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