<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)" onclick="QueryData()" plain="true">查询</a>
                            <a class="easyui-linkbutton" data-options="iconCls:'icon-remove'" src="javascript:void(0)" onclick="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;
            }
        }
    }

}

JQueryEasyUI-DataGrid显示数据，条件查询，排序及分页的更多相关文章

  1. EF：分页查询 + 条件查询 + 排序

    /// <summary> /// linq扩展类---zxh /// </summary> /// <typeparam name="T">& ...

  2. yii2数据条件查询-where专题

    条件查询 $customers = Customer::find()->where($cond)->all(); $cond就是我们所谓的条件,条件的写法也根据查询数据的不同存在差异,那么 ...

  3. 关于datagrid中数据条件颜色问题

    前天公司考核中做了一个小的考核项目,在考核中一直没找到怎么设置datagrid中数据颜色的代码 他的题目是这样的: 项目资金小于50000时,项目资金数字需要红色文字显示,否则以绿色文字显示 后来找到 ...

  4. Spring Boot Jpa 多条件查询+排序+分页

    事情有点多,于是快一个月没写东西了,今天补上上次说的. JPA是Java Persistence API的简称,中文名Java持久层API,是JDK 5.0注解或XML描述对象-关系表的映射关系,并将 ...

  5. 微信小程序云开发-数据条件查询

    一.使用where条件查询 在.get()语句之前增加.where语句实现条件查询.  二.通过doc查询单条数据 1.使用doc来查询数据库中的单条数据 2.定义一个空对象,用来展示插叙到的单条数据 ...

  6. jsp 条件查询、列表分页

    条件查询 dao //根据搜索条件筛选数据 public List<User> GetUserBySearch(String userName, String sex) throws SQ ...

  7. 10）drf 过滤器（条件查询 排序 ） 分页器

    一.群查接口各种筛选组件 数据准备 models.py class Car(models.Model): name = models.CharField(max_length=16, unique=T ...

  8. EasyUI datagrid 的多条件查询

    <script type="text/javascript">         $(function () {            $("#dg" ...

  9. dojox.grid.DataGrid显示数据的方法（转）

    第一种:数据存在本地或者已经写死的JSON对象中,不需要跟服务端进行数据传输 <%@ page language="java" contentType="text/ ...

  10. SQL必知必会02 过滤数据/条件查询

随机推荐

  1. css换行缩进

    1.换行缩进 <div id="alertiframe"> <span id="closeiframe">×</span> ...

  2. ejs和swig对比的问题之一

    本来想测试下两者在nodejs中得执行速度,设置了一个测试数据,如下 var testData = { title:'测试标题', description: '<p>这是一个描述,里面用很 ...

  3. Oracle的操作系统身份认证

    Oracle的操作系统身份认证 oraclelogin数据库远程登录authenticationos sqlnet.authentication_services=(NTS),在$ORACLE_HOM ...

  4. Cg入门21：Fragment shader - 2D纹理採样

    体纹理:是啥? tex2D 曾经仅仅能在Fragment程序中纹理採样 UV坐标系:事实上点为左下角,范围为[0,1].U为x轴,V为y轴 watermark/2/text/aHR0cDovL2Jsb ...

  5. Linux cmp命令——比较二进制文件（转）

    Linux cmp命令用于比较两个文件是否有差异. 当相互比较的两个文件完全一样时,则该指令不会显示任何信息.若发现有所差异,预设会标示出第一个不同之处的字符和列数编号.若不指定任何文件名称或是所给予 ...

  6. Ubuntu下开启root登陆--并开启SSH登录验证

    Ubuntu下开启root登陆亲手安装过Ubuntu的童鞋都知道,默认安装只会添加一个普通用户名和密码,而超级用户权限则是利用sudo命令来执行.在Ubuntu下使用root登陆或者在shell中用s ...

  7. 【JS】jQuery设置定时器，访问服务器（PHP示例）配合微信、支付宝原生支付，跳转web网页

    废话不多说,直接上代码: 把下面的js放在html的</body>即可 <!-- 设置页面定时器,3秒查询一次数据库该订单状态,ok就跳走 --xzz1115> <scr ...

  8. maven web配置发布路径 cargo自动部署项目到tomcat

    pom.xml中加入以下 配置发布路径 <build> <!-- 发布名 www.locathost:8080/HelloWeb可以访问,如果改成ROOT那么 默认的tomcat也就 ...

  9. 流媒体协议RTMP,RTSP与HLS有什么不同

    转载自:http://www.cuplayer.com/player/PlayerCode/Wowza/2015/0204/1774.html HLS (HTTP Live Streaming) Ap ...

  10. 从程序员到CTO的Java技术路线图 JAVA职业规划 JAVA职业发展路线图 系统后台框架图、前端工程师技能图 B2C电子商务基础系统架构解析

    http://zz563143188.iteye.com/blog/1877266在技术方面无论我们怎么学习,总感觉需要提升自已不知道自己处于什么水平了.但如果有清晰的指示图供参考还是非常不错的,这样 ...