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{}))就可以了，这里不再赘述）