vs2015
easyui
百度搜索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; }
运行页面,我们就可以看到相应的结果。