jquery easyui datagrid使用（二）——带有内部checkbox的datagrid

jquery easyui datagrid使用（二）——带有内部checkbox的datagrid

一般说道带有checkbox，都是全选之类的，但是这次遇到的是这样的，后端给过来的数据是这样

{memo=查询,编辑, dutyid=003001, power=11, MENUID=0703, MENUNAME=目录1}

这里面的权限明显是power代表的权限码，然后需要在datagrid中展现出每个都是checkbox 的样子。

这时候，需要用到的就是datagrid的Column属性中的formatter了。下面是代码：

//初始化权限表
            $('#powertb').datagrid({
                nowrap: false,
                striped: true,
                collapsible: true,
                singleSelect: true,
                fitColumns: true,
                rownumbers: true,
                columns: [[
                    {
                        field: 'MENUID',
                        title: '目录编号',
                        halign: 'center',
                        width: 40
                    },
                    {
                        field: 'MENUNAME',
                        title: '目录名称',
                        halign: 'center',
                        width: 60
                    },
                    {
                        field: 'memo',
                        title: '权限',
                        halign: 'center',
                        width: 120,
                        formatter: function (value, row, index) {
                            //return '<font color="red">' + value + ' ' +row.power + ' ' + index +'</font>';
                            var checkboxtext = '';
                            if (row.memo != null) {
                                var powernames = row.memo.split(',');
                                $(powernames).each(function (index, element) {
                                    if (row.power.charAt(index) == '1') {
                                        checkboxtext += '<input type="checkbox" name="' + row.MENUID + '" checked="checked" value="' + index + '"/>' + element;
                                    } else {
                                        checkboxtext += '<input type="checkbox" name="' + row.MENUID + '" value="' + index + '"/>' + element;
                                    }
                                });
                            }
                            return checkboxtext;
                            //return '<input type="checkbox" name="'+ row.MENUID+'" checked="checked"/>' + value;
                        }
                    }
                ]], data: [],
                onClickRow: function (index, data) {
                    $('#selectedmenuid').textbox('setValue', data.MENUID);
                    $('#selectedmemoid').textbox('setValue', data.memo);
                    $('#selectedpower').textbox('setValue', data.power);
                    //alert(index);
                    //console.log(data);
                }

            });

加载数据：

$('#powertb').datagrid('loadData', data.list);
$('#powertb').datagrid('hideColumn', 'MENUID');//隐藏MENUID列

对应界面上比较简单：

<table id="powertb" class="easyui-datagrid" data-options="border:false,fit:true">

</table>

上面这些步骤，基本上显示是没有问题了，现在需要的是知道checkbox是否选中。因为每一行对应的dutyid是相同的，而且界面上每个checkbox的name属性都为当前行的dutyid，所以可以直接取得当前选中状态的数组。

var chk_value =[];
$('input[name="0101"]:checked').each(function(){
chk_value.push($(this).val());
});
console.log(chk_value);

剩下的状态变换和保存，这里就略了。（主要就是数组的操作，有Jquery的话，直接就$(array).each(function(index,element{}))就可以了，这里不再赘述 ）