EasyUI - DataGrid 组建 - [ 搜索功能 ]

效果：

 

html代码：

• 使用css加载的方式，所以要在写html代码，也可以使用js操作。

<div>
        <!--使用JS加载方式-->
        <table id="tab"></table>

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

 

JS代码：

• toolbar使用css加载。其余看代码，看注释。

$(function () {

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

        //Datagrid设置
        $('#tab').datagrid({

            //===================================== 样式 ===============================================//
            width: 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: '编号',
                    align: 'center',//标题和内容居中
                    resizable: false,//不允许改变大小
                    //hidden:true,//隐藏该列
                    width: 100,//所有字段设置成100，起到自动平均分配大小的作用
                },
                {
                    field: 'name',
                    title: '姓名',
                    width: 100,//所有字段设置成100，起到自动平均分配大小的作用
                    halign: 'center',//仅标题居中

                    //显示数据的时候，格式化数据
                    formatter: function (value, row, index) {
                        return '[ ' + value + ' ]';
                    },
                },
                {
                    field: 'sex',
                    title: '性别',
                    width: 100,//所有字段设置成100，起到自动平均分配大小的作用
                },
                //在字段中使用排序，每点击一次，都会向后台POST要排序的字段和正序还是倒序排列。
                {
                    field: 'createtime',
                    title: '创建时间',
                    width:400,//所有字段设置成100，起到自动平均分配大小的作用
                    sortable: true,//允许排序
                }
            ]],
            //==========================================================================================//


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


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


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


        });

            
        //添加
        $('#add').click(function () {
            alert('添加按钮');
        });

        //修改
        $('#edit').click(function () {
            alert('编辑按钮');
        });

        //删除
        $('#remove').click(function () {
            alert('删除按钮');
        });

        //查询
        $('#search').click(function () {
            $('#tab').datagrid('load', {
                searchvalue: $.trim($('input[name="name"]').val()),
                time_from: $.trim($('input[name="time_from"]').val()),
                time_to: $.trim($('input[name="time_to"]').val()),
            });
        });

    })

 

后台一般处理程序接收：

• 查询代码。
• 底部统计总条数代码。

• rom Tb_person "+connect+"  order by 

• time from Tb_person " + connect + " ) as a where a.

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);
        }