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、运行页面，我们就可以看到相应的结果。
