表格里的滑动开关
作者：互联网
表格里的滑动开关怎么设置
我原先的是通过按钮来控制是否接收消息，后来带我的老师要求改成滑动开关，我想到的办法是用两张图片，但是每一行都要嵌入一个滑动开关，所以我把从后台传过来的值在界面翻译成了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(" ,#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>
标签：responseText,表格,开关,cells,selectedId,ban,grid,var,滑动 来源： https://blog.csdn.net/qq_39071990/article/details/110123835