Go语言视频零基础入门到精通

admin

主要实现：
用的 EasyUI 1.3.2
实现多个复选框列，各列互不影响。能够实现全选。主要部门用红色标记了的。

easyui datagrid 初始化：

1. <script>
2.   function initTableGMAL() {
3.         $("#dg_gmal").datagrid({
4.             url: "/Manager/PublishManager/ashx/MALOP.ashx?action=search",
5.             idField: "MAL_ID", fit: false, fitColumns: true, singleSelect: true,
6.             width: 637, height: 280,
7.             rownumbers: true, nowrap: true, pagination: false,
8.           [b] checkOnSelect: false, selectOnCheck: false,[/b]
9.             columns: [[
11.                 { field: "MAL_ZHName", title: "属性", width: 200, align: "center" }
12.                 ,
13.                 { field: "op1", title: " 明细中显示：", width: 70, align: "right" },
14.                 {
15.                     field: "op11", title: "<input id="detailcheckbox" type="checkbox"  >", width: 30,
16.                     formatter: function (value, rec, rowIndex) { return "<input type="checkbox"  name="PD" value="" + rec.MAL_ID + "" >"; }
17.                 },
19.                 { field: "op2", title: "列表中显示：", width: 70, align: "right" },
20.                 {
21.                     field: "op22", title: "<input id="listcheckbox" type="checkbox"  >", width: 30,
22.                    formatter: function (value, rec, rowIndex) { return "<input type="checkbox"  name="PL"   value="" + rec.MAL_ID + "" >"; }
25.                 }
26.             ]],
27.             onLoadSuccess: function () { $("#detailcheckbox").unbind(); $("#listcheckbox").unbind();
28. $("input[name="PL"]").unbind().bind("click", function () { //总记录数 var totolrows = $("input[name="PL"]").length; //选中的记录数 var checkrows = $("input[name="PL"]:checked").length; //全选 if (checkrows == totolrows) { $("#listcheckbox").attr("checked", "checked"); } else { $("#listcheckbox").removeAttr("checked"); }
29. $("#pllist").val(""); var items = $("input[name="PL"]:checked"); var result = ""; $.each(items, function (index, item) { result = result + "|" + item.value; }); $("#pllist").val(result); }); $("input[name="PD"]").unbind().bind("click", function () { //总记录数 var totolrows = $("input[name="PD"]").length; //选中的记录数 var checkrows = $("input[name="PD"]:checked").length; if (checkrows == totolrows) { $("#detailcheckbox").attr("checked", "checked"); } else { $("#detailcheckbox").removeAttr("checked"); } $("#pdlist").val(""); var items = $("input[name="PD"]:checked"); var result = ""; $.each(items, function (index, item) { result = result + "|" + item.value; }); $("#pdlist").val(result); }); //全选 $("#detailcheckbox").click(function () { if ($(this).attr("checked") == "checked") { $("input[name="PD"]").attr("checked", "checked"); } else { $("input[name="PD"]").removeAttr("checked"); } $("#pdlist").val(""); var items = $("input[name="PD"]:checked"); var result = ""; $.each(items, function (index, item) { result = result + "|" + item.value; }); $("#pdlist").val(result); }); $("#listcheckbox").click(function () { if ($(this).attr("checked") == "checked") { $("input[name="PL"]").attr("checked", "checked"); } else { $("input[name="PL"]").removeAttr("checked"); } $("#pllist").val(""); var items = $("input[name="PL"]:checked"); var result = ""; $.each(items, function (index, item) { result = result + "|" + item.value; }); $("#pllist").val(result); }); }
30.         });
31.     }

复制代码

  </script>

保存选中的行：

1. <div style="padding: 15px; overflow: hidden">
2.     <form id="f_package_general" method="post">
4.         <table class="tableForm" style="width: 100%; margin-left: 2px;">
5.      
6.             <tr>
7.                 <td style="width: 80px;">显示配置：</td>
8.                 <td colspan="3" style="height: 280px;">
9.                     <table id="dg_gmal">
10.                     </table>
11.                 </td>
12.             </tr>
13.         </table>
14.         <input type="hidden" id="pdlist" name="pdlist" value="">
15.         <input type="hidden" id="pllist" name="pllist" value="">
16.       
17.     </form>
18. </div>

复制代码