传统后台开发中最常用的控件就是表格控件了，一般一个基本的管理模块的首页面都是用表格控件实现的，表格控件的上面都会跟着一个操作区用于进行数据的查询及增加、修改、删除常用操作的入口。本文实现效果如下：

学习交流QQ：346933996

前端实现主要的工作有页面布局及Jquery EasyUI表格控件datagrid数据初始化脚本及增加、修改、删除操作相关脚本，

<table id="gridList" toolbar="#questionTb" fit="true"></table>
    <div id="questionTb" style="padding: 3px">
        <div class="query-content">
            <span>活动名称:</span>
            @Html.TextBox("NAME")
            <span>活动分类:</span>
            @Html.TextBox("ASORT")
            <span>银行名称:</span>
            @Html.TextBox("BANKNAME")
        </div>
        <div class="btn-content">
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'" onclick="btnComMethod('Query')">查询</a>
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'" onclick="btnComMethod('Add')">创建</a>
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit'" onclick="btnComMethod('Modify')">修改</a>
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'" onclick="btnComMethod('Delete')">删除</a>
        </div>
        <div class="clear"></div>
    </div>

<table id="gridList" toolbar="#questionTb" fit="true"></table>

这句定义了一个datagrid表格，并且设定其工具栏为id为qustionTb的元素,这里是一个div，里面实现了数据查询及常用操作按钮。

$(function () {
            $('#gridList').datagrid({
                title: false,
                nowrap: false,
                iconCls: 'icon-list-bullets',
                dataType: "json",
                fitColumns: true,
                rownumbers: true,
                pagination: true,
                pageSize: 200,
                pageNumber: 1,
                pageList: [20, 40, 200],
                url: '/Activity/ActivityBaseList',
                sortOrder: "desc",
                sortName: "Id",
                columns: [[
                    { field: 'ck', checkbox: true },
                    { field: 'ID', title: 'ID', width: 120, align: 'center', hidden: true, sortable: true },
                    { field: 'BANKNAME', title: '所属银行', width: 200, align: 'left', sortable: true },
                    { field: 'NAME', title: '活动名称', width: 200, align: 'center', sortable: true },
                    { field: 'ASORT', title: '优惠方式', width: 90, align: 'center', sortable: true },
                    { field: 'BIGINDATE', title: '开始时间', width: 80, align: 'center', sortable: true },
                    { field: 'ENDDATE', title: '结束时间', width: 80, align: 'center', sortable: true }
                ]],
                striped: true,
                singleSelect: false,
                selectOnCheck: true,
                checkOnSelect: true
            });
            //设置分页控件
            $('#gridList').treegrid('getPager').pagination({
                beforePageText: '第',//页数文本框前显示的汉字
                afterPageText: '页 共{pages}页',
                displayMsg: '{from}-{to}条 共{total}条'
            });
        });

具体参数使用方法见本文第三部分，这里说一下url: '/Activity/ActivityBaseList',这句代码指定了datagrid表格的数据源，这里直接调用.net mvc后台conctroller的代码。

//增、修、删、查操作
        function btnComMethod(cmd) {
            //获取选择的数据行的
            var row = $('#gridList').datagrid('getSelected');
            //查询
            if (cmd == "Query") {
                $('#gridList').treegrid('load', {
                    NAME: $('#NAME').val(),
                    BANKNAME: $('#BANKNAME').val(),
                    ASORT: $('#ASORT').val()
                });
            }
            //增加-调整到增加页面
            if (cmd == "Add") {
                window.location.href = "/Activity/AddActivityBase/";
            }
            //修改-获取选择行Id，并跳转到修改页面
            if (cmd == "Modify") {
                if (row) {
                    window.location.href = "/Activity/EditActivityBase/" + row.ID;
                }
                else $.messager.alert('提示信息', '请先选择数据！', 'info');
            }
            //删除-判断是否选择数据然后执行删除代码
            if (cmd == "Delete") {
                if (row) {
                    $.messager.confirm('提示', '你确定删除此条记录吗？',
                                    function (r) {
                                        if (r) {
                                            $.ajax({
                                                url: "/Activity/DelActivityBase/",
                                                type: 'get',
                                                cache: false,
                                                dataType: 'html',
                                                data: { dataId: row.ID },
                                                success: function (data) {
                                                    if (data == "Success") {
                                                        $('#gridList').datagrid('reload');
                                                        $.messager.alert('提示信息', '删除成功！', 'info');
                                                    }
                                                    else $.messager.alert('提示信息', '删除失败！', 'info');
                                                },
                                                error: function (XMLHttpRequest, textStatus, errorThrown) {
                                                    alert(textStatus); return;
                                                }
                                            });
                                        }
                                        else $.messager.show({ title: '信息', msg: '已经取消了删除操作' });
                                    });
                }
                else { $.messager.alert('警告', '没有选择任何记录信息！', 'warning'); }
            }
        }

public JsonResult ActivityBaseList(FormCollection collection)
        {
            //获取flexigrid参数
            int p_pageSize = 0, p_curPage = 0;
            string sortName = "", sortOrder = "";
            if (System.Web.HttpContext.Current.Request.Form["order"] != null)
                sortOrder = System.Web.HttpContext.Current.Request.Form["order"].ToString();//排序方式
            if (System.Web.HttpContext.Current.Request.Form["sort"] != null)
                sortName = System.Web.HttpContext.Current.Request.Form["sort"].ToString();//排序字段
            if (System.Web.HttpContext.Current.Request.Form["rows"] != null)
                p_pageSize = int.Parse(System.Web.HttpContext.Current.Request.Form["rows"].ToString());//每页显示条数
            if (System.Web.HttpContext.Current.Request.Form["page"] != null)
                p_curPage = int.Parse(System.Web.HttpContext.Current.Request.Form["page"].ToString());//当前页
            //获取前端外部查询条件，并且构造select语句where部分
            string define = "";
            string logic = " AND ";
            string tmp1 = HttpContext.Request.Form["NAME"] == null ? "" : HttpContext.Request.Form["NAME"];
            string tmp2 = HttpContext.Request.Form["ASORT"] == null ? "" : HttpContext.Request.Form["ASORT"];
            string tmp3 = HttpContext.Request.Form["BANKNAME"] == null ? "" : HttpContext.Request.Form["BANKNAME"];
            define = (define == "" ? (tmp1 == "" ? "" : (" NAME like '%" + tmp1 + "%'")) : (tmp1 == "" ? define : (define + " " + logic + " NAME like '%" + tmp1 + "%'")));
            define = (define == "" ? (tmp2 == "" ? "" : (" ASORT like '%" + tmp2 + "%'")) : (tmp2 == "" ? define : (define + " " + logic + " ASORT like '%" + tmp2 + "%'")));
            define = (define == "" ? (tmp3 == "" ? "" : (" BANKNAME like '%" + tmp3 + "%'")) : (tmp3 == "" ? define : (define + " " + logic + " BANKNAME like '%" + tmp3 + "%'")));
            if (define != "") define = " and " + define;

            int v_startRecord = (p_curPage - 1) * p_pageSize + 1;//开始行
            int v_endRecord = p_curPage * p_pageSize;//结束行
            //构造分页获取数据查询 
            string sqlStrTmp = "";
            sqlStrTmp = "SELECT * FROM TABLE WHERE 1=1 " +define;
            string sqlStr = "SELECT TOP " + p_pageSize + " * FROM (SELECT ROW_NUMBER() OVER (ORDER BY " + sortName + " " + sortOrder + ") AS RowNumber,* FROM (" + sqlStrTmp + ") as b) A WHERE RowNumber > " + p_pageSize + "*(" + p_curPage + "-1)";
            var pageCount = db.Database.SqlQuery<ActivityBaseGridList>(sqlStrTmp).ToList();//获取总页数
            var list = db.Database.SqlQuery<ActivityBaseGridList>(sqlStr).ToList();//分页获取数据

            var json = new
            {
                total = pageCount.Count,
                rows = list.ToArray()
            };
            return Json(json, JsonRequestBehavior.AllowGet);
        }

其特性扩展自 panel，下列是为 datagrid 增加的特性。

列（Column）的特性

DataGrid 的 Column 是一个数组对象，它的每个元素也是一个数组。数组元素的元素是一个配置对象，它定义了每个列的字段。

代码示例：

    columns:[[   
        {field:'itemid',title:'Item ID',rowspan:2,width:80,sortable:true},   
        {field:'productid',title:'Product ID',rowspan:2,width:80,sortable:true},   
        {title:'Item Details',colspan:4}   
    ],[   
        {field:'listprice',title:'List Price',width:80,align:'right',sortable:true},   
        {field:'unitcost',title:'Unit Cost',width:80,align:'right',sortable:true},   
        {field:'attr1',title:'Attribute',width:100},   
        {field:'status',title:'Status',width:60}   

   ]]  

编辑器（Editor）

用 $.fn.datagrid.defaults.editors 重写了 defaults。

每个编辑器有下列行为：

例如，文本编辑器（text editor）像下面这样定义：

    $.extend($.fn.datagrid.defaults.editors, {   
        text: {   
            init: function(container, options){   
                var input = $('<input type="text" class="datagrid-editable-input">').appendTo(container);   
                return input;   
            },   
            getValue: function(target){   
                return $(target).val();   
            },   
            setValue: function(target, value){   
                 $(target).val(value);   
             },   
             resize: function(target, width){   
                 var input = $(target);   
                 if ($.boxModel == true){   
                     input.width(width - (input.outerWidth() - input.width()));   
                 } else {   
                    input.width(width);   
                 }   
             }   
        }   

 });  

用 $.fn.datagrid.defaults.view 重写了 defaults。

view 是一个对象，它告诉 datagrid 如何呈现行。这个对象必须定义下列方法。

事件

其事件扩展自 panel，下列是为 datagrid 增加的事件。

方法