EasyUI 增删改查、分页

    <script src="~/EasyUI/jquery-easyui-1.4/jquery.min.js"></script>
    <script src="~/EasyUI/jquery-easyui-1.4/jquery.easyui.min.js"></script>
    <script src="~/EasyUI/jquery-easyui-1.4/locale/easyui-lang-zh_CN.js"></script>

界面展示如下：

<style type="text/css">
    .new-div {
        padding: 5px;
        background: #fafafa;
        border: 1px solid #ccc;
        margin-bottom: 5px;
    }

    .new-input {
        height: 26px;
        line-height: 26px;
        border: 1px solid #ccc;
    }
</style>

<div id="tb" class="new-div">
    <span>用户名:</span>
    <input id="UserCode" class="new-input">
    <span>手机号码:</span>
    <input id="Mobile" class="new-input">
    <span>电子邮箱:</span>
    <input id="Email" class="new-input">
    <a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-search'" onclick="doSearch()">搜索</a>
    <a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-clear'" onclick="doClear()">清空</a>
</div>

<div class="new-div">
    <a href="javascript:void(0);" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-add'" onclick="addTab('新增用户','Add','@Url.Action("Add", "User")')">新增</a>
    <a href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-edit'" onclick="addTab('用户编辑','Edite','@Url.Action("Edite", "User")')">编辑</a>
    <a href="javascript:void(0);" id="delete" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-cancel'">删除</a>
</div>

<table id="dg" data-options="rownumbers:true,singleSelect:true,pagination:true,url:'@Url.Action("ListJson", "User")',rownumbers:true,pagination:true">
    <thead>
        <tr>
            <th data-options="field:'UserCode',width:100,align:'center'">用户名</th>
            <th data-options="field:'FullName',width:100,align:'center'">姓名</th>
            <th data-options="field:'NickName',width:100,align:'center'">昵称</th>
            <th data-options="field:'Sex',width:70,align:'center',formatter:formatterSex">性别</th>
            <th data-options="field:'Mobile',width:150,align:'center'">手机号码</th>
            <th data-options="field:'Email',width:150,align:'center'">电子邮箱</th>
            <th data-options="field:'CreateDate',width:150,align:'center',formatter:formatterDate">创建时间</th>
        </tr>
    </thead>
</table>

@section scripts
{
    <!--自定义-->
    <script src="~/Content/js/CustomDateForm.js"></script>


    <!--脚本-->
    <script type="text/javascript">
        $(function () {
            var pager = $('#dg').datagrid().datagrid('getPager');

            //删除
            $("#delete").click(function () {
                var row = $('#dg').datagrid('getSelected');
                if (row) {
                    $.messager.confirm('提示信息', '您确定要删除吗？', function (f) {
                        if (f) {
                            $.ajax({
                                type: "POST",
                                url: '@Url.Action("Delete", "User")',
                                data: "userCode=" + row.UserCode,
                                success: function (msg) {
                                    if (msg) {
                                        $.messager.alert('提示信息', '删除成功!', "info");
                                        $('#dg').datagrid('reload');
                                    } else {
                                        $.messager.alert('提示信息', '删除失败!', "error");
                                    }
                                }
                            });
                        }
                    });
                } else {
                    $.messager.alert("提示信息", '请选择要删除的项！', "error");
                }
            });


        });

        //动态添加标签
        function addTab(title, state, url) {
            var row = $('#dg').datagrid('getSelected');

            var jqTabs = top.jQuery;

            var newUrl;
            if (state == "Add")
                newUrl = url;
            else {
                if (!row) {
                    $.messager.alert('提示信息', '请选择要编辑的项！', "error");
                    return false;
                }
                newUrl = url + "?userCode=" + row.UserCode;//用户名
            }

            if (jqTabs("#tabs").tabs('exists', title)) {
                jqTabs("#tabs").tabs('select', title);
            } else {
                var content = '<iframe scrolling="auto" frameborder="0"  src="' + newUrl + '" style="width:100%;height:100%;"></iframe>';
                jqTabs("#tabs").tabs('add', {
                    title: title,
                    content: content,
                    closable: true
                });
            }
        }



        //格式化表格中的数据 Start
        //性别
        function formatterSex(val, row) {
            if (val == "0") {
                return '<span style="color:blue;">男</span>';
            } else {
                return '<span style="color:red;">女</span>';
            }
        }

        //日期
        function formatterDate(val, row) {
            if (val == null)
                return "";
            else
                return customDate(val, "yyyy-MM-dd hh:mm");
        }

        //格式化表格中的数据 End


        //搜索
        function doSearch() {
            $('#dg').datagrid('load', {
                UserCode: $('#UserCode').val(),
                Mobile: $('#Mobile').val(),
                Email: $('#Email').val()
            });
        }

        //清空
        function doClear() {
            $('#UserCode').val("");
            $('#Mobile').val("");
            $('#Email').val("");
        }
    </script>
}

CustomDateForm.js 展示如下：

Date.prototype.format = function (format) {
    if (!format) {
        format = "yyyy-MM-dd hh:mm:ss";
    }
    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 customDate(value, stringDateForm) {
    if (value == "")
        return "";

    /*json格式时间转js时间格式*/
    value = value.substr(1, value.length - 2);
    var obj = eval('(' + "{Date: new " + value + "}" + ')');
    var dateValue = obj["Date"];
    if (dateValue.getFullYear() < 1900) {
        return "";
    }

    return dateValue.format(stringDateForm);
}

后台操作展示如下：

/// <summary>
        ///  获取用户信息列表(JsonResult ListJson())
        /// </summary>
        /// <returns>Json格式的数据</returns>
        public JsonResult ListJson()
        {
            var userCode = Request["UserCode"] ?? string.Empty;
            var mobile = Request["Mobile"] ?? string.Empty;
            var email = Request["Email"] ?? string.Empty;

            var page = Request["page"] ?? "1";
            var rows = Request["rows"] ?? "10";
            var total = 0;
            var usersList = _iUserInfoFacade.GetUsersListPage(int.Parse(page), int.Parse(rows), out total, WhereLambda(userCode, mobile, email),
                false, OrderByLambda());

            var htUserList=new Hashtable();
            htUserList["total"] = total;
            htUserList["rows"] = usersList;

            return Json(htUserList);
        }