您的位置首页百科问答

easyui的datagrid如何获取选中行数据

easyui的datagrid如何获取选中行数据

的有关信息介绍如下:

easyui的datagrid如何获取选中行数据

easyui是一个开源的前端js框架,在我们的项目中使用的也很多,那么使用datagrid如何获取选中的行数据,下面,小编为大家介绍一下。

百度搜索easyui,找到easyui的官网,下载easyui的jsAPI文件,并将js文件添加到项目中,具体目录,看个人的习惯和爱好。

新建html页面,将easyui的关键js文件及css文件引入到页面,引入方法如下:

在页面声明datagrid的渲染元素,该元素主要是datagrid显示的载体。

编写js模块,为datagrid绑定数据源及配置字段及属性,到这里,datagrid的配置就完成了,这时,我们运行页面就可以得到一个带分页的列表

grid = $("#grid").datagrid({

title: "测试",

view: detailview,

url: 'GetList',

sortName: 'Road2',

sortOrder: 'desc',

idField: 'T_ID',

pageSize: 30,

frozenColumns: [[

{ field: 'ck', checkbox: true }

]],

columns: [[

{ field: 'Road2', title: '路口编号', width: 100, sortable: true, align: 'center' },

{ field: 'Road1', title: '路口名称', width: 160, sortable: true, align: 'center' },

]],

pagination: true,

rownumbers: true,

singleSelect: false,

toolbar: [

{ text: "合并数据", iconCls: "icon-edit", handler: HBSJ },

{ text: "删除数据", iconCls: "icon-remove", handler: Remove },

{ text: "通过审核", iconCls: "icon-ok", handler: function(){SH(2);} },

{ text: "不通过审核", iconCls: "icon-no", handler: function(){SH(1);} }

]

编写获取datagrid选中行的js,具体实现如下:

注意:rows就是选中的所有的行的数据。

var rows = grid.datagrid('getSelections');

var num = rows.length;

if (num == 0) {

$.messager.alert('提示', '请选择一条记录进行操作!', 'info');

return;

}

else if (num > 1) {

$.messager.alert('提示', '您选择了多条记录,只能选择一条记录进行修改!', 'info');

return;

}

运行页面,我们就可以看到相应的结果。