表格里的滑动开关

表格里的滑动开关怎么设置

我原先的是通过按钮来控制是否接收消息,后来带我的老师要求改成滑动开关,我想到的办法是用两张图片,但是每一行都要嵌入一个滑动开关,所以我把从后台传过来的值在界面翻译成了image标签。但是我每次点击image标签,都会同时更改另外一行的值,请问怎么把我这一行的ID绑定到imag标签里。

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>用户消息接收管理</title>
    <%@ include file="../base.jsp" %>
</head>
<script src="<%=resourcePubBasePath%>js/utils/JsonUtil.js"></script>
<script>
    var dhtmlx_layout;
    <%--var menuId = "<s:property value='menuId'/>";--%>
    var a;
    var b;
    var toolbar_1;
    var grid_1;
    var myWins = null;
    var win_code = null;
    var status1 = "";
    var ban = "";


    function doOnLoad() {
        dhtmlx.image_path = "<%=resourcePubBasePath%>js/dhtmlx/imgs/";
        dhtmlx_layout = new dhtmlXLayoutObject(document.body, '2E');
        a = dhtmlx_layout.cells("a");
        setQueryConditionsCellHeight(a, 1);
        a.hideHeader();
        a.attachObject("div_id");
        //a.attachObject("template");

        //------------------------------------------------------------
        b = dhtmlx_layout.cells('b');
        b.setText("用户消息接收管理");
        b.hideHeader();
        toolbar_1 = b.attachToolbar();
        toolbar_1.setIconsPath('<%=basePath%>images/icons/');
        toolbar_1.addButton('open', 2, "订阅", "new.gif", "new.gif");
        toolbar_1.addSeparator('line_1', 2);
        toolbar_1.addButton('stop', 3, "退订", "close.png", "close.png");
        initGrid1(b);
        //b.attachObject("template");

        //点击接收管理的触发事件
        toolbar_1.attachEvent("onClick", function (id) {
     
            if (id == "query") {
                doQuery();
            }

            if (id == "open") {
                var selectedId = grid_1.getSelectedRowId();
                if (selectedId == null || selectedId == "") {
                    alert("请先点击选中一条需要订阅的消息类型");
                    return false;
                } else {
                    var rid = grid_1.getSelectedRowId();
                    var ban = grid_1.cells(rid, 6).getValue();
                    var thisTypeName = grid_1.cells(rid, 4).getValue();
                    if (ban == "已订阅") {
                        alert("“" + thisTypeName + "”类消息已订阅!");
                    } else if (confirm("确定订阅:“" + thisTypeName + "”类消息?")) {
                        doOpen();
                    }
                }
            }
            if (id == "stop") {
                var selectedId = grid_1.getSelectedRowId();
                if (selectedId == null || selectedId == "") {
                    alert("请先点击选中一条需要退订的消息类型");
                    return false;
                } else {
                    var rid = grid_1.getSelectedRowId();
                    var sysBan = grid_1.cells(rid, 5).getValue();
                    var ban = grid_1.cells(rid, 6).getValue();
                    var thisTypeName = grid_1.cells(rid, 4).getValue();
                    if (sysBan == "系统消息") {
                        alert("“" + thisTypeName + "”是系统类消息,无法退订!");
                        return false;
                    }
                    if (ban == "已退订") {
                        alert("“" + thisTypeName + "”类消息已退订!");
                        return false;
                    }
                    if (confirm("确定退订:“" + thisTypeName + "”类消息?")) {
                        doStop();
                    }
                }
            }
        });

        initGrid1(b);
      
    }

    //初始化 消息接收管理表
    function initGrid1(layoutId) {
        grid_1 = layoutId.attachGrid();
        grid_1.setIconsPath('<%=resourcePubBasePath%>js/dhtmlx/imgs');
        grid_1.setHeader("序号,ID,用户ID,消息类型ID,消息类型名称,消息级别,是否订阅,是否订阅2", null,
            ["text-align:center;", "text-align:center;", "text-align:center;", "text-align:center;",
                "text-align:center;", "text-align:center;", "text-align:center;", "text-align:center;",
                "text-align:center;", "text-align:center;"]);
        grid_1.setColumnIds("xh,id,userId,msgTypeId,msgTypeName,sysBan,ban,ban");
        grid_1.attachHeader("&nbsp;,#text_filter,#text_filter,#text_filter,#text_filter,#text_filter,#text_filter");
        grid_1.setColAlign("center,center,center,center,center,center,center,center");
        grid_1.setColTypes("cntr,ro,ro,ro,ro,ro,ro,ro");
        grid_1.setColSorting("str,str,str,str,str,str,str,str");
        grid_1.setInitWidths("100,100,100,250,*,*,*");
        grid_1.init();
        grid_1.enableRowsHover(true, "hover");//鼠标经过时,添加行变色
        grid_1.setColumnHidden(1, true);  //隐藏Id列
        grid_1.setColumnHidden(2, true);  //隐藏userId列
        grid_1.setColumnHidden(3, true);  //隐藏msgTypeId列
        grid_1.attachEvent("onRowCreated", function (rId, rObj, rXml) {
            var sysBan = grid_1.cells(rId, 5).getValue();
            var ban = grid_1.cells(rId, 6).getValue();
            var selectedId = grid_1.cells(rId, 2).getValue();
            if (sysBan == "1") {
                grid_1.cells(rId, 5).setValue("系统消息");
                grid_1.cells(rId, 6).setValue("<img id=\""+selectedId+"\" src=\"<%=resourceProjectBasePath%>/image/msg_on.png\" οnclick=\"doRefuse("+selectedId +"/);\"/>");

            } else {
                grid_1.cells(rId, 5).setValue("其它消息");
                if (ban == "1") {
                    grid_1.cells(rId, 6).setValue("<img id=\""+selectedId+"\" src=\"<%=resourceProjectBasePath%>/image/msg_on.png\" οnclick=\"doStop2("+selectedId +"/);\"/>");
                } else if (ban == "0") {
                    grid_1.cells(rId, 6).setValue("<img id=\""+selectedId+"\" src=\"<%=resourceProjectBasePath%>/image/msg_off.png\" οnclick=\"doOpen2("+selectedId +"/);\"/>");
                    //grid_1.setRowTextStyle(rId, "color:red;");
                } else {
                    grid_1.cells(rId, 6).setValue("<img id=\""+selectedId+"\" src=\"<%=resourceProjectBasePath%>/image/msg_on.png\" οnclick=\"doStop2("+selectedId +"/);\"/>");
                }
            }
        });
        doQuery();
    }

    //查询所有需要配置的类型
    function doQuery() {
        grid_1.clearAll();
        a.progressOn();
        dhtmlxAjax.post("<%=basePath%>system/Message_queryTypesInUconfig.do", null, function (loader) {
            var responseText = loader.xmlDoc.responseText;
            if (responseText != null && responseText != "") {
                grid_1.parse(responseText, 'js');
                grid_1.setSortImgState(true, 1, 'asc');
                a.progressOff();
            } else {
                a.progressOff();
            }
        });
    }

    //按钮订阅
    function doOpen() {
        var selectedId = grid_1.getSelectedRowId();
        var ban = "1";
        var load_grid_url = "<%=basePath%>system/Message_updateBan.do";
        dhtmlxAjax.post(load_grid_url, "id=" + selectedId + "&ban=" + ban, function (loader) {
            var responseText = loader.xmlDoc.responseText;
            if ("ok" == responseText) {
                alert("订阅成功!");
                doQuery();
            } else {
                alert("订阅失败!");
            }
        });
    }


    //按钮退订
    function doStop() {
        var rid = grid_1.getSelectedRowId();
        var sysBan = grid_1.cells(rid, 5).getValue();
        var ban = grid_1.cells(rid, 6).getValue();
        var thisTypeName = grid_1.cells(rid, 4).getValue();
        if (sysBan == "系统消息") {
            alert("“" + thisTypeName + "”是系统类消息,无法退订!");
            return false;
        } else {
            var selectedId = grid_1.getSelectedRowId();
            var ban = "0";
            var load_grid_url = "<%=basePath%>system/Message_updateBan.do";
            dhtmlxAjax.post(load_grid_url, "id=" + selectedId + "&ban=" + ban, function (loader) {
                var responseText = loader.xmlDoc.responseText;
                if ("ok" == responseText) {
                    alert("退订成功!");
                    doQuery();
                } else {
                    alert("退订失败!");
                }
            });
        }
    }

    //滑动订阅
    function doOpen2() {
        var selectedId = grid_1.getSelectedRowId();
        var ban = "1";
        var load_grid_url = "<%=basePath%>system/Message_updateBan.do";
        dhtmlxAjax.post(load_grid_url, "id=" + selectedId + "&ban=" + ban, function (loader) {
            var responseText = loader.xmlDoc.responseText;
            if (responseText != null && responseText != "") {
                if ("ok" == responseText) {
                    $("#message_off").hide();
                    $("#message_on").show();
                    doQuery();
                } else {
                    $("#message_off").show();
                    $("#message_on").hide();
                }
            } else {
                alert("订阅失败!");
            }
        });
    }

    //判断是否是系统级消息,系统级消息不可拒收。
    function doRefuse() {
        var rid = grid_1.getSelectedRowId();
        var sysBan = grid_1.cells(rid, 5).getValue();
        var thisTypeName = grid_1.cells(rid, 4).getValue();
        if (sysBan == "系统消息") {
            alert("“" + thisTypeName + "”是系统类消息,无法退订!");
            return false;
        }
    }

    //滑动退订
    function doStop2() {
        var selectedId = grid_1.getSelectedRowId();
        var ban = "0";
        var load_grid_url = "<%=basePath%>system/Message_updateBan.do";
        dhtmlxAjax.post(load_grid_url, "id=" + selectedId + "&ban=" + ban, function (loader) {
            if (responseText != null && responseText != "") {
                if ("ok" == responseText) {
                    $("#message_off").show();
                    $("#message_on").hide();
                    doQuery();
                } else {
                    $("#message_off").hide();
                    $("#message_on").show();
                }
            } else {
                alert("订阅失败!");
            }
        });
    }

</script>
</head>
<body onl oad="doOnLoad();">
<div id="div_id" style="margin-top: 10px!important;">
    <div style="opacity: 0.5;position:fixed;">***系统级消息不可拒收,对系统级消息的拒收不生效。未设置是否拒收的消息类型默认接收***</div>
</div>
</form>
</body>
</html>

上一篇:Task01c:随机抽样与卡方检验的SQL实现


下一篇:表格修改