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，
 

view source print ?

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');