easyui+ashx 动态初始化datagrid（动态列头）

效果图：

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代码如下：

            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>