easyui自定义checkbox列

原文地址

最近蝉印网络在使用jquery easyui插件开发系统的时候需要对checkbox进行自定义，比如某行的checkbox不让选中，后来想不让选中的checkbox话还不如直接去掉这行的checkbox 。

于是查阅了一下datagrid的api，发现一个可用的函数：formatter
开始动手：
 

1 {
2     field: 'ck1',
3     checkbox:true,
4     width: 100,
5     align: 'center',
6     formatter: function(value, rowData, rowIndex) {
7         returnrowData.disabled ==1 ? '':'<input name="user_list" type="checkbox">'
8     }
9 }

发现不管用，后来才知道checkbox列是系统保留的formatter不生效。

于是干脆就自己写一个checkbox，
 

01 columns: [[
02 {
03     field: 'ck',
04     title: '<input id="check_all" type="checkbox">',
05     width: 30,
06     align: 'center',
07     formatter: function(value, rowData, rowIndex) {
08         returnrowData.disabled ==1 ? '':'<input name="user_list" type="checkbox">';
09
10
11     }
12 }]]

1

//全选

2	$("#check_all").click(function(){

3	if($(this).attr('checked')=='checked'){

4	$("input[name='user_list']").attr("checked",'checked');

5

}else{

6	$("input[name='user_list']").removeAttr("checked");

7

}

下面是我自己的实现应用

 {field:'core',title:'核心',width:30, formatter: function(value, rowData, rowIndex) {
                     return value == 'YES' ? '<input name="core" type="checkbox" checked="checked">': '<input name="core" type="checkbox">';
                    }    
                }

保存的时候分析checkbox，然后改变row的数据

    for(var i=0;i<rows.length;i++){
            if($($("input[name='core']")[i]).attr("checked")){
                rows[i].core='YES';
            }else{
                rows[i].core='NO';
            }
            if($($("input[name='core2']")[i]).attr("checked")){
                rows[i].core2='YES';
            }else{
                rows[i].core2='NO';
            }
        }          
          $('#manageSalaryDataGrid').datagrid('acceptChanges');