效果图：
1：简单初始化
JSON格式数据如下（后台自己构建，后台代码略）：
{"total":6,"columns":[{"field":"building_id","title":"公寓编号","align":"center","width":100},{"field":"building_name","title":"公寓名称","align":"center","width":100},{"field":"building_info","title":"公寓信息","align":"center","width":100},{"field":"school_area","title":"所在校区","align":"center","width":100}],"rows":[{"building_id":"B1","building_name":"1号楼","building_info":"一公寓（女生）","school_area":"小营"},{"building_id":"B2","building_name":"2号楼","building_info":"二公寓（女生）","school_area":"小营"},{"building_id":"B3","building_name":"3号楼","building_info":"三公寓（女生）","school_area":"小营"},{"building_id":"B4-1","building_name":"4-1号楼","building_info":"四公寓（男生）","school_area":"小营"},{"building_id":"B4-2","building_name":"4-2号楼","building_info":"四公寓（女生）","school_area":"小营"},{"building_id":"B5","building_name":"5号楼","building_info":"五公寓（男生）","school_area":"小营"}]}
前台代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="Scripts/jquery-2.1.4.min.js"></script>
<script src="Scripts/jquery.easyui-1.4.3.min.js"></script>
<link href="Content/themes/icon.css" rel="stylesheet" />
<link href="Content/themes/default/easyui.css" rel="stylesheet" />
<script>
$(function () {
// Handlers/FreeBeHandler.ashx 各自的后台JSON数据处理地址
$.getJSON('Handlers/FreeBeHandler.ashx', function (result) {
$('#grd').datagrid({
title: ' XXX公司价差补差分配表',
height: 500,
singleSelect: true,
url: '',
columns: [
result.columns
],
rownumbers: true
}).datagrid('loadData', result.rows);
});
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table id="grd" title="Client Side Pagination" style=" 700px; height: 300px">
</table>
</div>
</form>
</body>
</html>
2:datagrid复杂显示，添加linkbutton多标签页的处理方式
效果图：
JSON数据格式不变
客户端javascript代码如下：
<script>
var grid;
$(function () {
grid = $('#tt').datagrid({
fit: true,//自动大小
rownumbers: true,//行号
//loadMsg:'数据装载中......',
singleSelect: true,//单行选取
pagination: false,//显示分页
columns: [[]],
toolbar: [{
text: '显示1',
iconCls: 'icon-add',
handler: newData
}, '-', {
text: '显示2',
iconCls: 'icon-add',
handler: newData2
}]
});
});
function newData() {
$.post('Handlers/show1.ashx', { id: 1 },
function (data) {
grid.datagrid({
columns: [data.columns]
}).datagrid("loadData", data);
}, 'json');
}
function newData2() {
$.post('Handlers/show2.ashx', { id: 2 },
function (data) {
grid.datagrid({
columns: [data.columns]
}).datagrid("loadData", data);
}, 'json');
}
</script>