多语言展示
当前在线:546今日阅读:103今日分享:49

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

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

vs2015

2

easyui

方法/步骤
1

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

2

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

3

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

4

编写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);} }            ]

5

编写获取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;        }

6

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

推荐信息