JQueryEasyUI学习笔记（八）datagrid

欢迎大家转载，转载请注明出处！

希望这个笔记对自己和大家有用，但是本人水平有限，如果出错的地方，希望大家指出，多多批评，谢谢！

昨天说了datagrid框架的基本使用，今天来说下他的进阶使用：

由于datagrid接收数据为Json格式，所以我们在前台展示数据的时候会出现问题，尤其是时间格式，在Json序列化之后，前台无法展示正确的时间数据，那么我们如何解决这样的问题呢？首先我们可以使用datapattern.js来解决这个问题：无需废话，直接上代码：

<script src="http://www.cnblogs.com/Scripts/datapattern.js" type="text/javascript"></script>

 

 //列表初始化
        function initTable(searchWhere) {
            $('#tt').datagrid({
                url: '/UserInfo/GetAllUserInfos',
                title: '用户列表',
                width: 700,
                height: 400,
                fitColumns: true,
                idField: 'ID',
                loadMsg: '正在加载用户的信息...',
                pagination: true,
                singleSelect: false,
                pageSize: 10,
                pageNumber: 1,
                pageList: [10, 20, 30],
                queryParams: searchWhere,
                columns: [[
                    { field: 'ck', checkbox: true, align: 'left', width: 50 },
                    { field: 'ID', title: '用户编号', width: 80 },
                    { field: 'UName', title: '用户名', width: 120 },
                    { field: 'Pwd', title: '密码', width: 120 },
                    { field: 'Phone', title: '手机', width: 120 },
                    { field: 'Mail', title: '邮箱', width: 120 },
                    { field: 'SubTime', title: '注册时间', width: 120,
                        formatter: function (value, row, index) {//Json格式时间转化为正常格式
                            return (eval(value.replace(/\/Date\((\d+)\)\//gi, "new Date($1)"))).pattern("yyyy-MM-dd");
                        }
                    }
                    ]],
                toolbar: [
                    {
                        id: 'btnadd',
                        text: '注册用户',
                        iconCls: 'icon-add',
                        handler: function () {
                            showCreateDialog();
                        }
                    },
                {
                    id: 'btnDownShelf',
                    text: '修改用户',
                    iconCls: 'icon-edit',
                    handler: function () {
                        upDateUser();
                    }
                },
                {
                    id: 'btnDel',
                    text: '删除用户',
                    iconCls: 'icon-cancel',
                    handler: function () {
                        delUsers();
                    }
                },
                {
                    id: 'btnSet',
                    text: '设置用户角色',
                    iconCls: 'icon-redo',
                    handler: function () {
                        setUserRole();
                    }
                },
                {
                    id: 'btnSetVip',
                    text: '设置特殊角色',
                    iconCls: 'icon-redo',
                    handler: function () {
                        setVip();
                    }
                }]
            });
        }

 

toolbar指的是表单上面的按钮，api中好像没有介绍，但是可以直接以数组的形式写到上面，完美显示：

图片跟上面的代码不是对应的，只是为了展示个效果；



easyuidatagrid+asp.net mvc3的示例代码下载地址（只有前台和Controller）：增删改都写了

示例代码

datapattern.js下载地址：

datapattern