1. 程式人生 > >EASYUI DATAGRID 多列複選框CheckBox

EASYUI DATAGRID 多列複選框CheckBox

主要實現:

用的 easyui 1.3.2

實現多個複選框列,各列互不影響。能夠實現全選。主要部門用紅色標記了的。

easyui datagrid 初始化:

複製程式碼

<script>
  function initTableGMAL() {
        $("#dg_gmal").datagrid({
            url: "/Manager/PublishManager/ashx/MALOP.ashx?action=search",
            idField: 'MAL_ID', fit: false, fitColumns: true, singleSelect: true,
            width: 637, height: 280,
            rownumbers: true, nowrap: true, pagination: false,
            checkOnSelect: false, selectOnCheck: false,
            columns: [[

                { field: 'MAL_ZHName', title: '屬性', width: 200, align: 'center' }
                ,
                { field: 'op1', title: ' 明細中顯示:', width: 70, align: 'right' },
                {
                    field: 'op11', title: '<input id=\"detailcheckbox\" type=\"checkbox\"  >', width: 30,
                    formatter: function (value, rec, rowIndex) {
                        return "<input type=\"checkbox\"  name=\"PD\" value=\"" + rec.MAL_ID + "\" >";
                    }
                },

                { field: 'op2', title: '列表中顯示:', width: 70, align: 'right' },
                {
                    field: 'op22', title: '<input id=\"listcheckbox\" type=\"checkbox\"  >', width: 30,
                    formatter: function (value, rec, rowIndex) {
                        return "<input type=\"checkbox\"  name=\"PL\"   value=\"" + rec.MAL_ID + "\" >";
                    }


                }
            ]],
            onLoadSuccess: function () {

                $("#detailcheckbox").unbind();
                $("#listcheckbox").unbind();
               
                $("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");
                    }
                      
                    
                    $("#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);
                });

            }
        });
    }

 </script>

複製程式碼

儲存選中的行:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<div style="padding: 15px; overflow: hidden">

<form id="f_package_general" method="post">

<table class="tableForm" style="width: 100%; margin-left: 2px;">

<tr>

<td style="width: 80px;">顯示配置:</td>

<td colspan="3" style="height: 280px;">

<table id="dg_gmal">

</table>

</td>

</tr>

</table>

<input type="hidden" id="pdlist" name="pdlist" value="">

<input type="hidden" id="pllist" name="pllist" value="">

</form>

</div>