博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JQueryEasyUI-DataGrid显示数据,条件查询,排序及分页
阅读量:5912 次
发布时间:2019-06-19

本文共 5230 字,大约阅读时间需要 17 分钟。

<html>

<head>
    <title></title>
    <script src="/jquery-easyui-1.3.4/jquery-1.8.0.min.js" type="text/javascript"></script>
    <script src="/jquery-easyui-1.3.4/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="/jquery-easyui-1.3.4/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
    <link href="/jquery-easyui-1.3.4/themes/icon.css" rel="stylesheet" type="text/css" />
    <link href="/jquery-easyui-1.3.4/themes/default/easyui.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        $(function () {
            $("#cc").layout();
        })
    </script>
</head>
<body>
    <div id="cc" fit="true">
        <div data-options="region:'north',title:'North Title',split:true" style="height: 100px;">
        </div>
        <div data-options="region:'south',title:'South Title',split:true" style="height: 100px;">
        </div>
        <div data-options="region:'west',title:'West',split:true" style="width: 100px;">
        </div>
        <div data-options="region:'center',title:'我是中间面板'" style="overflow:hidden;" href='/tabs/tabChild/UserManager.htm'>
        </div>
    </div>
</body>
</html>
-------------------UserManager.html-------------------
<script type="text/javascript">
    $(function () {
        $("#divLayout").layout();
        $("#tblUserList").datagrid({
            url: '/ashx/UserManager.ashx',
            title: '',
            loadMsg: '数据加载中,请稍候...',
            nowrap: false,
            pageSize: 10,
            pageList: [10, 20, 30],
            columns: [[          //注意要两个嵌套的中括号
                { field: 'Id', title: '编号', width: 120, align: 'center', sortable: true },
                { field: 'LoginId', title: '用户ID', width: 120, align: 'left', sortable: true },
                { field: 'Name', title: '用户名称', width: 120, align: 'left', sortable: true },
                { field: 'Address', title: '用户地址', width: 120, align: 'left', sortable: true }
                ]],
            fitColumns: true,
            singleSelect: true,
            pagination: true,
            sortOrder: "asc",
            sortName: "Id",      //初始化时按Id升序排序
            toolbar: [{
                iconCls: 'icon-add',
                text: '添加',
                handler: function () { alert('Add') }
            }, '-', {            //分隔符
                iconCls: 'icon-edit',
                text: '编辑',
                handler: function () { alert('edit') }
            }, '-', {
                iconCls: 'icon-remove',
                text: '删除',
                handler: function () {
                    alert('delete')
                }
            }, '-', {
                iconCls: 'icon-search',
                text: '查询',
                handler: function () {
                    alert('search')
                }
            }]
        });
    });
    //按用户自定义查询条件查询,调用datagird的load方法,传递name查询条件
    function QueryData() {
        $("#tblUserList").datagrid("load", {
            "name":$("#tblQuery").find("input[name='txtName']").val()
        });
    }
    //清除查询条件
    function ClearQuery() {
        $("#tblQuery").find("input").val("");
    }
</script>
<div id="tt" class="easyui-tabs" fit="true" border="false">
    <div title="用户管理">
        <div id="divLayout" fit="true">
            <div data-options="region:'north',split:false" style="height: 60px;padding-top:6px;" border="false">
                <!--高级查询部分-->
                <table id="tblQuery" border="0" cellspacing="0" cellpadding="0" width="100%">
                    <tr>
                        <th>
                            用户名:
                        </th>
                        <td>
                            <input name="txtName" />
                        </td>
                    </tr>
                    <tr>
                        <th>
                            注册时间:
                        </th>
                        <td>
                            <input name="txtRegStartTimeStart" class="easyui-datetimebox" editable="false" />&nbsp;至
                            <input name="txtRegStartTimeEnd" class="easyui-datetimebox" editable="false" />
                            <a class="easyui-linkbutton" data-options="iconCls:'icon-search'" src="javascript:void(0)" οnclick="QueryData()" plain="true">查询</a>
                            <a class="easyui-linkbutton" data-options="iconCls:'icon-remove'" src="javascript:void(0)" οnclick="ClearQuery()" plain="true">清空</a>
                        </td>
                    </tr>
                </table>
            </div>
            <div data-options="region:'center',split:false"  border="false">
                <!--显示数据列表部分-->
                <table id="tblUserList" fit="true">
                </table>
            </div>
        </div>
    </div>
</div>
---------------------后台一般处理程序UserManager---------------------------
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Script.Serialization;
using System.Data;
namespace MyStartEasyUi.ashx
{
    /// <summary>
    /// UserManager 的摘要说明
    /// </summary>
    public class UserManager : IHttpHandler
    {
        UsersExtendBll bll = new UsersExtendBll();
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            int pageIndex = GetPageIndex(context);
            int pageSize= GetPageSize(context);
            string mySort = GetSort(context) + " " + GetOrder(context);
            string queryName = GetQueryName(context);
            string whereStr = "";
            if (!string.IsNullOrEmpty(queryName))
            {
                whereStr += " name like '%" + queryName + "%'";
            }
            DataSet dsGet = bll.GetListByPage(whereStr, mySort, (pageIndex - 1) * pageSize + 1, pageIndex * pageSize);
            List<MyBookShop.Model.Users> lst = bll.DataTableToList(dsGet.Tables[0]);
            int total = bll.GetRecordCount("");
            JavaScriptSerializer js = new JavaScriptSerializer();
            string jsonStrings = js.Serialize(lst);
            string returnJson = "{\"total\":"+ total.ToString() + ",\"rows\":" + jsonStrings +"}";
   //返回Json格式total表示总数,rows表示返回的数据,这样返回才能分页
            System.Threading.Thread.Sleep(2000);
            context.Response.Write(returnJson);
        }
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
        public Int32 GetPageSize(HttpContext context)
        {
            try
            {
                return Int32.Parse(context.Request["rows"].ToString());
            }
            catch
            {
                return 10;
            }
        }
        public string GetOrder(HttpContext context)
        {
            return context.Request.Form["order"];
        }
        public string GetSort(HttpContext context)
        {
            return context.Request.Form["sort"];
        }
        public string GetQueryName(HttpContext context)
        {
            return context.Request.Form["name"];
        }
        public Int32 GetPageIndex(HttpContext context)
        {
            try
            {
                return Int32.Parse(context.Request["page"].ToString());
            }
            catch
            {
                return 1;
            }
        }
    }

}

转载地址:http://bdmpx.baihongyu.com/

你可能感兴趣的文章
计算机图形学 课设
查看>>
ucenter1.5通讯过程分析(转载)
查看>>
js和html5实现画板
查看>>
浏览器中可以访问,但是git命令、go get命令使用时却无法连接
查看>>
Apache Spark源码走读之7 -- Standalone部署方式分析
查看>>
如何避免重构带来的危险
查看>>
有序的双链表
查看>>
MSSQLServer的备份与还原
查看>>
Eclipse导入的项目中发现包的形式变成了文件夹的形式,需要将文件夹的形式变成包...
查看>>
使用MySQL yum源安装MySQL
查看>>
iOS8中使用CoreLocation定位
查看>>
mvn package时设置了maven.test.skip=true依旧执行单元测试
查看>>
我的lamp常用安装配置
查看>>
Java NIO中的通道Channel(二)分散/聚集 Scatter/Gather
查看>>
Palindrome Partitioning
查看>>
一年多了,该回来了……
查看>>
四则运算
查看>>
Qt5 for Android: incompatible ABI
查看>>
zookeeper学习
查看>>
class类名的管理
查看>>