EasyUI

效果：

　　

html代码：

<div style="padding-top: 50px;  800px; margin: 0 auto;">
            <!--使用JS加载方式-->
            <table id="tab"></table>

            <!--按钮--->
            <div id="tb">
                <div style="padding: 5px;">
                    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add', plain:true," onclick="obj.add();">添加</a>
                    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit', plain:true," onclick="obj.edit();">修改</a>
                    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove', plain:true," onclick="obj.remove();">删除</a>
                    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save', plain:true," style="display: none;" id="save" onclick="obj.save();">保存</a>
                    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-redo', plain:true," style="display: none;" id="redo" onclick="obj.redo();">取消编辑</a>
                </div>
                <div style="padding-left: 10px; padding-bottom: 10px;">
                    搜索姓名（可以模糊查询）：<input id="name" name="name" type="text" class="textbox" style=" 130px;" />
                    查询时间 从：<input id="time_from" name="time_from" type="text" class="easyui-datebox" style=" 130px;" />
                    到：<input id="time_to" name="time_to" type="text" class="easyui-datebox" style=" 130px;" />
                    <a id="search" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'," style="margin-left: 20px; padding: 0 10px 0 10px;" onclick="obj.search();">搜索</a>
                </div>
            </div>
        </div>

JS代码：

    <script type="text/javascript">
        //扩展 dateTimeBox
        $.extend($.fn.datagrid.defaults.editors, {
            datetimebox: {
                init: function (container, options) {
                    var input = $('<input type="text">').appendTo(container);
                    options.editable = false;
                    input.datetimebox(options);
                    return input;
                },
                getValue: function (target) {
                    return $(target).datetimebox('getValue');
                },
                setValue: function (target, value) {
                    $(target).datetimebox('setValue', value);
                },
                resize: function (target, width) {
                    $(target).datetimebox('resize', width);
                },
                destroy: function (target) {
                    $(target).datetimebox('destroy');
                },
            }
        });

        $(function () {
            obj = {
                editRow: undefined,//undefined默认为false
                search: function () {
                    $('#tab').datagrid('load', {
                        searchvalue: $.trim($('input[name="name"]').val()),
                        time_from: $('input[name="time_from"]').val(),
                        time_to: $('input[name="time_to"]').val(),
                    });
                },
                add: function () {
                    $('#save,#redo').show();
                    /*
                    //当前页行结尾添加
                    $('#box').datagrid('appendRow', {
                        user : 'bnbbs',
                        email : 'bnbbs@163.com',
                        date : '2014-11-11',
                    });
                    */

                    if (this.editRow == undefined) {
                        //添加一行 
                        $('#tab').datagrid('insertRow', {
                            index: 0,
                            row: {
                                /*
                                user : 'bnbbs',
                                email : 'bnbbs@163.com',
                                date : '2014-11-11',
                                */
                            },
                        });

                        //将第一行设置为可编辑状态
                        $('#tab').datagrid('beginEdit', 0);

                        this.editRow = 0;
                    }
                },
                save: function () {
                    //这两句不应该放这里，应该是保存成功后，再执行
                    //$('#save,#redo').hide();
                    //this.editRow = false;
                    //将第一行设置为结束编辑状态
                    $('#tab').datagrid('endEdit', this.editRow);//保存当前选定行
                },
                redo: function () {
                    $('#save,#redo').hide();
                    this.editRow = undefined;
                    $('#tab').datagrid('rejectChanges');
                },
                edit: function () {
                    var rownumber = $('#tab').datagrid('getSelections');

                    if (rownumber.length == 1) {
                        //如果为false时，可以编辑本行。不可在点击另外的一行。
                        if (this.editRow == undefined) {
                            //获取选中行的索引
                            var index = $('#tab').datagrid('getRowIndex', rownumber[0]);
                            $('#save,#redo').show();
                            $('#tab').datagrid('beginEdit', index);
                            this.editRow = index;//原先是没有值，现在把rowindex的值给obj.editrow
                        }
                    }
                    else {
                        $.messager.alert("提示", "请选择一行！");
                    }
                },
                remove: function () {
                    var delnumber = $('#tab').datagrid('getSelections');
                    if (delnumber.length > 0) {
                        $.messager.confirm("提示", "是否要确定删除！", function (flag) {
                            if (flag) {
                                var ids = [];
                                for (var i = 0; i < delnumber.length; i++) {
                                    ids.push("'" + delnumber[i].id + "'");
                                }

                                //删除
                                $.ajax({
                                    type: 'post',
                                    url: '../ashx/delete.ashx',
                                    data: {
                                        ids: "(" + ids.join(',') + ")",
                                    },
                                    beforeSend: function () {
                                        $('#tab').datagrid('loading');
                                    },
                                    success: function (data) {
                                        if (data == -1) {
                                            $.messager.alert("提示", "删除错误！");
                                        }
                                        else {
                                            $('#tab').datagrid('loaded');
                                            $.messager.show({
                                                title: '提示',
                                                msg: data + '名用户被删除成功！',
                                                timeout: 3000,//2秒钟
                                                showtype: 'fade',//null,slide,fade,show
                                            });
                                            $('#tab').datagrid('load');//重新加载数据
                                            $('#tab').datagrid('unselectAll');//取消所有选中
                                        }
                                    },
                                })
                            }
                        });
                    }
                    else {
                        $.messager.alert("提示", "请选择要删除的行。");
                    }
                },
            };

            //格式化日期输出样式
            $('#time_from, #time_to').datebox({
                formatter: function (date) { return date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate(); },
            });

            //Datagrid设置
            $('#tab').datagrid({
                //===================================== 样式 ===============================================//
                 800,//宽度
                title: '信息列表',//标题名
                iconCls: 'icon-search',//图标
                //singleSelect: true,//是否单选
                striped: true,//是否开启斑马线
                fitColumns: false,//是否自适应宽度（出现滚动条）
                loadMsg: '正在努力加载，请稍后………………',//显示加载提示信息
                //rownumbers: true,//显示行号
                //showHeader: false,//是否显示行头（标题）
                //showFooter:false,//显示行尾，默认情况下不显示，要在后台使用json数据传递
                //==========================================================================================//


                //============================= 加载数据，要显示的字段 =========================================//
                //要加载的数据
                url: "../Json/datagridjson.ashx",
                //要显示的列
                columns: [[
                    {
                        field: 'id',
                        title: '编号',
                        checkbox: true,
                    },
                    {
                        field: 'name',
                        title: '姓名',
                         100,//所有字段设置成100，起到自动平均分配大小的作用
                        halign: 'center',//仅标题居中

                        //显示数据的时候，格式化数据
                        //formatter: function (value, row, index) {
                        //    return '[ ' + value + ' ]';
                        //},

                        //设置为可以编辑的列，只有这样才能使用编辑
                        editor: {
                            type: 'validatebox',
                            //其中写的使一些验证，像邮箱验证等等
                            options: {
                                required: true,
                            },
                        },
                    },
                    {
                        field: 'sex',
                        title: '性别',
                         100,//所有字段设置成100，起到自动平均分配大小的作用

                        //设置为可以编辑的列，只有这样才能使用编辑
                        editor: {
                            type: 'validatebox',
                            //其中写的使一些验证，像邮箱验证等等
                            options: {
                                required: true,
                            },
                        },
                    },
                    //在字段中使用排序，每点击一次，都会向后台POST要排序的字段和正序还是倒序排列。
                    {
                        field: 'createtime',
                        title: '创建时间',
                         400,//所有字段设置成100，起到自动平均分配大小的作用
                        sortable: true,//允许排序
                    }
                ]],
                //==========================================================================================//


                //===================================== 分页 ===============================================//
                //显示分页控件栏
                pagination: true,
                pageNumber: 1,//初始化的时候在第几页
                pageSize: 10,//，每页显示的条数
                pageList: [10, 15, 20],//每页显示的条数
                //==========================================================================================//


                //===================================== 排序 ===============================================//
                //通过POST传递到后台，然后进行排序。
                sortName: 'createtime',
                sortOrder: 'desc',
                //==========================================================================================//


                //===================================== 按钮 ===============================================//
                toolbar: '#tb',
                //==========================================================================================//


                //===================================== 添加一行 ===============================================//
                //检测是否完成添加
                onAfterEdit: function (rowIndex, rowData, changes) {
                    $('#save,#redo').hide();
                    obj.editRow = undefined;
                    //console.log(rowData);
                    //判断是删除数据还是修改数据
                    var inserted = $('#tab').datagrid('getChanges', 'inserted');
                    var updated = $('#tab').datagrid('getChanges', 'updated');

                    //新增
                    if (inserted.length > 0) {
                        $.ajax({
                            type: 'post',
                            url: '../ashx/insert.ashx',
                            data: {
                                rows: inserted,
                            },
                            beforeSend: function () {
                                $('#tab').datagrid('loading');
                            },
                            success: function (data) {
                                if (data == -1) {
                                    $.messager.alert("提示", "增加信息错误！");
                                }
                                else {
                                    $('#tab').datagrid('loaded');
                                    $.messager.show({
                                        title: '提示',
                                        msg: data + '名增加成功！',
                                        timeout: 3000,//2秒钟
                                        showtype: 'fade',//null,slide,fade,show
                                    });
                                    $('#tab').datagrid('load');//重新加载数据
                                }
                            },
                        })
                    }

                    //修改
                    if (updated.length > 0) {
                        $.ajax({
                            type: 'post',
                            url: '../ashx/update.ashx',
                            data: {
                                rows: updated,
                            },
                            beforeSend: function () {
                                $('#tab').datagrid('loading');
                            },
                            success: function (data) {
                                if (data == -1) {
                                    $.messager.alert("提示", "修改信息错误！");
                                }
                                else {
                                    $('#tab').datagrid('loaded');
                                    $.messager.show({
                                        title: '提示',
                                        msg: data + '修改成功！',
                                        timeout: 3000,//2秒钟
                                        showtype: 'fade',//null,slide,fade,show
                                    });
                                    $('#tab').datagrid('load');//重新加载数据
                                }
                            },
                        })
                    }
                },
                //==========================================================================================//
                //双击一行,进行修改
                onDblClickRow: function (rowIndex, rowData) {
                    //如果为false时，可以编辑本行。不可在点击另外的一行。
                    if (obj.editRow == undefined) {
                        $('#save,#redo').show();
                        $('#tab').datagrid('beginEdit', rowIndex);
                        obj.editRow = rowIndex;//原先是没有值，现在把rowindex的值给obj.editrow
                    }
                }
            });
        })
    </script>

后台代码：

datagridjson.ashx:

• 加载数据，搜索：

public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "application/json";

            //接受前台传递来的页数和每页显示的条数
            //前台开启分页之后，传递来的参数
            int pageIndex = Convert.ToInt32(context.Request["page"]);
            int pagenumber = Convert.ToInt32(context.Request["rows"]);


            //接收排序字段
            string sortfield = context.Request["sort"];
            string sortDescOrasc = context.Request["order"];


            //------------------------------------------搜索-----------------------------------------
            string connect = "";
            string searchvalue = "";
            string time_from = "";
            string time_to = "";

            if (context.Request["searchvalue"] != null && context.Request["searchvalue"] != "")
            {
                searchvalue = "name like '%" + context.Request["searchvalue"] + "%' and ";
                connect += searchvalue;
            }

            if (context.Request["time_from"] != null && context.Request["time_from"] != "")
            {
                time_from = "createtime>='" + context.Request["time_from"].Replace('/','-') + "' and ";
                connect += time_from;
            }

            if (context.Request["time_to"] != null && context.Request["time_to"] != "")
            {
                time_to = "createtime<='" + context.Request["time_to"].Replace('/', '-') + "' and ";
                connect += time_to;
            }

            if (connect != "")
            {
                connect = " where " + connect.Substring(0, connect.Length - 4);
            }
            //--------------------------------------------------------------------------------------------


            //存储数据
            DataTable dt = new DataTable();

            if (pageIndex == 1)
            {
                //加载第一页
                string pageIndexOne = "select top " + pagenumber + " id, name, sex, createtime from Tb_person "+connect+"  order by " + sortfield + " " + sortDescOrasc + "";
                //获取并转换为JSON数据
                dt = SQLHelper.ExecuteTable(pageIndexOne, CommandType.Text);
            }
            else if (pageIndex != 1)
            {
                //加载非第一页
                string pageIndexNotOne = @"select id, name, sex, createtime from (select ROW_NUMBER() over(order by " + sortfield + " " + sortDescOrasc + ") as rownum, id, name, sex, createtime from Tb_person " + connect + " ) as a where a.rownum > " + (pageIndex - 1) * pagenumber + " and a.rownum <= " + pageIndex * pagenumber + "";
                //获取并转换为JSON数据
                dt = SQLHelper.ExecuteTable(pageIndexNotOne, CommandType.Text);
            }
            else { }


            //将datatable转换为json
            //在返回的JSON数据中，加入total属性（总记录数）
            //那么他就会在加载的时候，显示总记录数。
            //显示的格式是【 {"total":12, "rows":"[{},{},{}]"} 】,rows内为JSON数据。
            //计算总条数（同时可以统计，使用关键字查询之后的条数）
            int totalnumber = (int)SQLHelper.ExcuteScalar("select count(*) from Tb_person " + connect + "", CommandType.Text);
            //返回数据
            string strjson = "{"total":" + totalnumber + ", "rows":" + DatatableToJson.ToJson(dt) + "}";

            context.Response.Write(strjson);
        }

insert.ashx:

public void ProcessRequest(HttpContext context)
        {
            string name = context.Request["rows[0][name]"];
            string sex = context.Request["rows[0][sex]"];

            int count = 0;
            try
            {
                count = SQLHelper.ExecuteNonQuery("insert into Tb_person (name, sex) values ('" + name + "', '" + sex + "')", CommandType.Text);
                if (count != 0)
                {
                    context.Response.Write(1);
                }
            }
            catch
            {
                context.Response.Write(-1);
            }
        }

delete.ashx:

public void ProcessRequest(HttpContext context)
        {
            int count = 0;
            string deletevalue = context.Request["ids"];
            try
            {
                count = (int)SQLHelper.ExecuteNonQuery("delete from Tb_person where id in " + deletevalue + "", CommandType.Text);
                if (count > 0)
                {
                    context.Response.Write(count);
                }
            }
            catch
            {
                context.Response.Write(-1);
            }
        }

update.ashx:

public void ProcessRequest(HttpContext context)
        {
            string id = context.Request["rows[0][id]"];
            string name = context.Request["rows[0][name]"];
            string sex = context.Request["rows[0][sex]"];
            int count = 0;

            try
            {
                count = SQLHelper.ExecuteNonQuery("update Tb_person set name = '"+name+"', sex = '"+sex+"' where id = '"+id+"'", CommandType.Text);
                if (count >0 )
                {
                    context.Response.Write(count);
                }
            }
            catch
            {
                context.Response.Write(-1);
            }
        }