easyui自定义checkbox列

来源：互联网发布：程序员个性手机壁纸编辑：程序博客网时间：2024/05/18 02:20

原文地址

最近蝉印网络在使用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 sourceprint?
01columns: [[
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');

0 0