Jquery Easy UI初步学习(二)datagrid的使用

<div id="grid" class="easyui-grid" ></div>
<div id="EditDig" class="easyui-dialog" title="用户修改" style="width:400px;height:350px;" closed="true"  id="EditForm">
    <div id="info" closed="true" class="easyui-window"></div>
    
</div>
<script type="text/javascript">
    $(function () {
        $("#grid").datagrid({
            title: "用户列表",
            iconCls: ‘icon-save‘,
            methord: ‘get‘,
            url: "/CrmUser/GetUserList/",
            sortName: ‘Id‘,
            sortOrder: ‘desc‘,
            idField: ‘Id‘,
            border: true,
            width: 1000,
            height: 300,
            columns: [[
                { field: "LoginEmail", title: "登陆邮箱", sortable: true, width: 100 },
                { field: "PassWord", title: "密码", sortable: true, width: 100 },
                { field: "TrueName", title: "真实姓名", sortable: true, width: 100 },
                { field: "Phone", title: "手机号码", sortable: true, width: 100 },
                { field: "UserCard", title: "身份证", sortable: true, width: 100 },
                { field: "NickName", title: "昵称", sortable: true, width: 100 },
                { field: "QQ", title: "QQ号码", sortable: true, width: 100},
                { field: "LastLoginTime", title: "最后登陆时间", sortable: true, width: 100, formatter: formatDatebox },
                { field: "CreateOn", title: "创建时间", sortable: true, width: 100, formatter: formatDatebox },
                { field: "UpdateBy", title: "修改人", sortable: true, width: 100 },
                { field: "UpdateOn", title: "修改时间", sortable: true, width: 100, formatter: formatDatebox },
                { field: ‘Id‘, title: ‘操作‘, width: 100, align: ‘center‘, formatter: function (value,rowIndex) {
                    var s = ‘<a href="#" onclick="view(\‘‘ + value + ‘\‘)">查看</a> ‘;
                    var e = ‘<a href="#" onclick="edit(\‘‘ + value + ‘\‘)">编辑</a> ‘;
                    var d = ‘<a href="#" onclick="del(\‘‘ + value + ‘\‘)">删除</a> ‘;
                    return s + e + d;
                }
                }
            ]],
            //  frozenColumns: [[
            //      { field: "CreatorId",title:"创建人ID",sortable:true,width:100 }
            //  ]],
            toolbar: [{
                text: ‘新增‘,
                iconCls: ‘icon-add‘,
                handler: edit
            }, ‘-‘, {
                text: ‘用户名:&nbsp;<input type="text" id="username" style="height:18px; width: 100px;line-height: 18px; "/>‘
            }, ‘-‘, {
                text: ‘邮件:&nbsp;<input type="text" id="email" style="height:18px; width: 100px;line-height: 18px; "/>‘
            }, ‘-‘, {
                text: ‘查找‘,
                iconCls: ‘icon-search‘,
                handler: search
            }],
            pagination: true,
            fit: true,
            fitColumns: true,
            singleSelect: true

        });
    });

    //查询
    function search() {
        $("#grid").datagrid({
            url: "/CrmUser/GetUserList/?userName="+$("#username").val()+"&email="+$("#email").val(),
        });
    }
    //查看
    function view(pId) {
    }

    //修改
    function edit(pId) {
    }

    //删除
    function del(pId) {
    }

    //做时间转换
    function formatDatebox(value) {
        if (value == null || value == ‘‘) {
            return ‘‘;
        }
        var dt;
        if (value instanceof Date) {
            dt = value;
        }
        else {
            dt = new Date(value);
            if (isNaN(dt)) {
                value = value.replace(/\/Date\((-?\d+)\)\//, ‘$1‘); //标红的这段是关键代码，将那个长字符串的日期值转换成正常的JS日期格式
                dt = new Date();
                dt.setTime(value);
            }
        }
        return dt.format("yyyy-MM-dd");   //这里用到一个javascript的Date类型的拓展方法，这个是自己添加的拓展方法，在后面的步骤3定义
    }

    Date.prototype.format = function (format) {
        var o = {
            "M+": this.getMonth() + 1, //month 
            "d+": this.getDate(),    //day 
            "h+": this.getHours(),   //hour 
            "m+": this.getMinutes(), //minute 
            "s+": this.getSeconds(), //second 
            "q+": Math.floor((this.getMonth() + 3) / 3),  //quarter 
            "S": this.getMilliseconds() //millisecond 
        };
        if (/(y+)/.test(format))
            format = format.replace(RegExp.$1,
                (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
            if (new RegExp("(" + k + ")").test(format))
                format = format.replace(RegExp.$1,
                    RegExp.$1.length == 1 ? o[k] :
                        ("00" + o[k]).substr(("" + o[k]).length));
        return format;
    };

    function d_close() {
        $(‘#EditDig‘).dialog(‘close‘);
    };
</script>