1、百度搜索easyui，找到easyui的官网，下载easyui的jsAPI文件，并将js文件添加到项目中，具体目录，看个人的习惯和爱好。
2、新建html页面，将easyui的关键js文件及css文件引入到页面，引入方法如下：<link href="/Scripts/jquery-easyui-1.5/themes/bootstrap/easyui.css" rel="stylesheet" /> <link href="/Scripts/jquery-easyui-1.5/themes/icon.css" rel="stylesheet" /> <script src="/Scripts/jquery-easyui-1.5/jquery.min.js"></script> <script src="/Scripts/jquery-easyui-1.5/jquery.easyui.min.js"></script>
3、在页面声明datagrid的渲染元素，该元素主要是datagrid显示的载体。<div id="grid" fit="true"></div>
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、运行页面，我们就可以看到相应的结果。
