脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-JQueryEasyUI学习笔记（八）datagrid，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

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

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

&nbsp;//列表初始化
        function inittable(seArchWhere) {
            $(&#39;#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）：增删改都写了

 

觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-JQueryEasyUI学习笔记（八）datagrid全部内容，希望文章能够帮你解决javascript代码实例教程-JQueryEasyUI学习笔记（八）datagrid所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。