easyUI 创建有复选框的table.datagrid

83 阅读1分钟
table : function(data){
  pt.v.table.datagrid({
    // singleSelect:true,
    height:295,
    columns:[[
      {field:'xuhao',title:'0',width:'5%',checkbox:true},
      {field:'sjbm',title:'数据编码',width: '30%',align:'center'},
      {field:'sjmc',title:'数据名称',width:'35%',align:'center'},
      {field:'mrx',title:'默认值',width:'30%',align:'center',
        formatter :function(value,row,index){
          if(value === '1'){
            return '否';
          }else if(value === '0'){
            return '是';
          }
        },
      },
    ]],
    data : data,
    onSelect:function(index,row){
      var checkedMess = pt.v.table.datagrid('getSelections');   //getChecked是选行  getSelections 复选框
      if(checkedMess.length === 1){
        pt.v.edit_button.removeAttr('disabled');
        pt.v.del_button.removeAttr('disabled');
      }else{
        pt.v.edit_button.prop('disabled',true);
      }
    },
    onUnselect:function(){
      var checkedMess = pt.v.table.datagrid('getSelections');
      if(checkedMess.length === 1){
        pt.v.edit_button.removeAttr('disabled');
      }else if(checkedMess.length === 0){
        pt.v.edit_button.prop('disabled',true);
        pt.v.del_button.prop('disabled',true);
      }
    }
  });
}

关于getchecked:
getSelected:取得第一个选中行数据,如果没有选中行,则返回 null,否则返回记录。
getSelections:取得所有选中行数据,返回元素记录的数组数据。

   getChecked:取得checkbox选择行的数据,返回元素记录的数组数据。

   getSelected跟getSelections是选中行,而且getChecked是选择行。

   选中行的意思就是,我们单击到某一个行,一般这个时候默认样式会让该行的背景色为黄色,就证明我们选中了该行。

而选择行的意思就是,我们在该行放置了一个checkbox按钮,我勾选了这个按钮,因此也可以将选择行称为勾选行更贴切一些!

pt.m.num = pt.v.tab.datagrid('clearSelections'); //删除后要清除选中状态再加载

   IDfield是用于分页时可以多页选中的  例:

 

pt.v.tab.datagrid({
  height:'auto',
  singleSelect:false,
  idField: 'ygxxid',
  pagination: true,
    //是否分页  
  pageSize: 10,  // 这里用于分页,多个删除

     load加载第一页,reload刷新当前页

 pt.v.tab.datagrid('reload');