EasyUI中datagrid获取选择行的相关总结

EasyUI中datagrid获取选择行的相关总结首先是一点基础datagrid对行的选择有两种方式:复选框和选择行1,复选框是这样的:EasyUI会提供表头的全选打钩功能,不用自己额外写代码另外easyUI提供了一个配置,可以保留翻页之前打的钩,比如在第一页上勾选几行,然后翻页,当你再翻回第一页的时候,之前打的几个钩还在(按需使用,因为页面不会告诉你在其他页面是不是打过钩)2,选择行是这样的:图2某一

首先是一点基础

datagrid对行的选择有两种方式:复选框和选择行

1,复选框是这样的:

EasyUI中datagrid获取选择行的相关总结

EasyUI会提供表头的全选打钩功能,不用自己额外写代码

另外easyUI提供了一个配置,可以保留翻页之前打的钩,比如在第一页上勾选几行,然后翻页,当你再翻回第一页的时候,之前打的几个钩还在(按需使用,因为页面不会告诉你在其他页面是不是打过钩)

2,选择行是这样的:

图2

EasyUI中datagrid获取选择行的相关总结

某一行选中的时候背景色会变成黄色(默认样式)

如果在datagrid里配置了singleSelect:true,则只能选择一行,相反singleSelect:false的话可以选择多行

 

复选框和选择行这两种方式可以联动

1,在datagrid里配置selectOnCheck : true,那么在打钩的时候,会把该行选中,点击全选复选框,那么所有行都会被选中

2,在datagrid里配置checkOnSelect : true,那么在选中某行的时候,会把该行的复选框打上钩

 

datagrid的idField属性

指示哪个字段是标识字段

这个字段必须设置为datagrid中存在的字段,并且这个字段要有值,否则在获取所有选中行的操作中(getChecked和getSelections)只会返回一行。

错误1,idField配置的字段不存在,就像下面的配置

$(‘#gogogo’).datagrid({

         idField: ‘orderIdABC’,

         columns: [ [

                   {field: ‘id’,title : ‘ID’,hidden : true,sortable : true},

                   {field: ‘orderId’,title : ‘运单号’,hidden : false,sortable : true},

                   {field: ‘count’,title : ‘件数’,hidden : false,sortable : true},

         ]],

});

idField配置为orderIdABC,但是columns里面并没有该字段,这种配置会影响获取行的操作。

错误2:idField配置的字段没有值,就像下面的配置

$(‘#gogogo’).datagrid({

         idField: ‘orderId’,

         columns: [ [

                   {field: ‘id’,title : ‘ID’,hidden : true,sortable : true},

                   {field: ‘orderId’,title : ‘运单号’,hidden : false,sortable : true},

                   {field: ‘count’,title : ‘件数’,hidden : false,sortable : true},

         ]],

});

datagrid获取的实际数据为[{“id”:”1″,”quantity”:”1″},{“id”:”2″,”quantity”:”1″}],即orderId字段无值

虽然表格可以正常显示(orderId字段显示为空),但是会影响获取行的操作。

 

下面是获得选择行的方式

getChecked

返回复选框选中的所有行。该方法自版本 1.3 起可用。

只判断复选框,不判断选择行

需要正确的idField,如果idField不对,只会返回一行

返回的是行组成的数组

比如:

var rows=$(‘#gogogo’).datagrid(‘getChecked’);

rows.length是行数

rows[0].id是第一行的id字段值

 

getSelected

返回第一个选中的行或者 null。

返回的是选择行方式选中的第一行,和复选框无关,并且只返回一行

返回的是行

比如:

var row=$(‘#gogogo’).datagrid(‘getSelected’);

row.id是该行的id字段值

 

getSelections

返回所有选中的行,当没有选中的记录时,将返回空数组。

需要正确的idField,如果idField不对,只会返回一行

返回的是行组成的数组

比如:

var rows=$(‘#gogogo’).datagrid(‘getSelections’);

rows.length是行数

rows[0].id是第一行的id字段值

今天的文章EasyUI中datagrid获取选择行的相关总结分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:http://bianchenghao.cn/28457.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注