MVC简捷调用EasyUI的datagrid

一直想在项目中使用EasyUi的datagrid，但种种原因，没有实现。

这两天在开发一个项目中，愿望终于得以实现。

先看效果：

实现步骤是这样的：

1，在页面中画dataGrid,具体代码如下：

    <table id="UserListTb" class="easyui-datagrid" title="用户列表">
    </table>

   function ListLoad() {
        var columnsSetting = [                    
                    { field: 'EnName', title: '英文名', width: 100,sortable:true,
                        formatter: function (val, rowData) {
                            var url = "/User/Index/66666666";
                            return "<a href=\'" + url + "\');>"+rowData.EnName+"</a>";
                        }
                    },
                    { field: 'CnName', title: '中文名', width: 80 },
                    { field: 'DomainName', title: '域帐号', width: 120 },
                    { field: 'ID', title: 'ID', width: 80, align: 'right' },
                    { field: 'unitcost', title: '部门', width: 80, align: 'right' },
                    { field: 'attr1', title: '权限组', width: 250 },
                    { field: 'status', title: '状态', width: 60, align: 'center' }
                ];

        $('#UserListTb').datagrid({
            url: '/User/GetUserList',
            queryParams: { name: "wuf" 
            },
            method: 'get',            
            width: 1077,
            height: 250,
            fitColumns: true,            
            pagination: true,
            pageSize: 20,
            singleSelect: true,
            showPageList: false,
            pageList: [1,20, 50, 100],
            rownumbers: true,
            nowrap: false,
            loadMsg: 'Load……',
            columns: [columnsSetting],
            onLoadSuccess: function (row) {},
            onLoadError: function (arguments) {}
        });
    }

View Code