`
黄继华
  • 浏览: 44979 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

jQuery ligerGrid 打造通用的分页排序查询表格(提供下载)

 
阅读更多

一,ligerGrid是如何工作的。

在没有开始做之前,需要先了解一下ligerGrid是如何工作的。简单来说,liger grid 就是提交准备好的数据到指定的目标请求数据,拿到数据以后,显示出来。

所以问题在于发送什么数据,拿到什么数据。先来看看ligerGrid的参数:

   url: null,                          
        pageSize: 10,                        
        sortName : null,
        sortOrder:null,      
        root :'Rows',                       //数据源字段名
        record:'Total',                     //数据源记录数字段名
        pageParmName :'page',               //页索引参数名,(提交给服务器)
        pagesizeParmName:'pagesize',        //页记录数参数名,(提交给服务器)
        sortnameParmName:'sortname',        //页排序列名(提交给服务器)
        sortorderParmName:'sortorder',      //页排序方向(提交给服务器)


发送什么数据

page、pagesize、sortname、sortorder 这几个是默认发送到服务器的参数,可用于正确返回分页、排序后的数据。 如果需要查询,可能需要配置一下parms,格式如 parms:[{name:'wherestr',value:'status="active"'}] ,这样后台就可以收到这个参数了

比如我在页面上这样配置:

pageSize:30,url:"service/BillListData.ashx?gridviewname=authors",sortName:'au_id'

后台收到的数据,将会是:

拿到什么数据

Rows、Total这两个是返回数据的默认字段名,Rows是数据的json格式,Total是记录的总数,需要的数据类似这样的:


效果如下:

二,存储过程

CREATE PROCEDURE [dbo].[P_GridViewPager] (
    @recordTotal INT OUTPUT,            --输出记录总数
    @viewName VARCHAR(800),        --表名
    @fieldName VARCHAR(800) = '*',        --查询字段
    @keyName VARCHAR(200) = 'Id',            --索引字段
    @pageSize INT = 20,                    --每页记录数
    @pageNo INT =1,                    --当前页
    @orderString VARCHAR(200),        --排序条件
    @whereString VARCHAR(800) = '1=1'        --WHERE条件
)
AS
BEGIN
     DECLARE @beginRow INT
     DECLARE @endRow INT
     DECLARE @tempLimit VARCHAR(200)
     DECLARE @tempCount NVARCHAR(1000)
     DECLARE @tempMain VARCHAR(1000)

     SET @beginRow = (@pageNo - 1) * @pageSize    + 1
     SET @endRow = @pageNo * @pageSize
     SET @tempLimit = 'rows BETWEEN ' + CAST(@beginRow AS VARCHAR) +' AND '+CAST(@endRow AS VARCHAR)
     
     --输出参数为总记录数
     SET @tempCount = 'SELECT @recordTotal = COUNT(*) FROM (SELECT '+@keyName+' FROM '+@viewName+' WHERE '+@whereString+') AS my_temp'
     EXECUTE sp_executesql @tempCount,N'@recordTotal INT OUTPUT',@recordTotal OUTPUT
       
     --主查询返回结果集
     SET @tempMain = 'SELECT * FROM (SELECT ROW_NUMBER() OVER ('+@orderString+') AS rows ,'+@fieldName+' FROM '+@viewName+' WHERE '+@whereString+') AS main_temp WHERE '+@tempLimit
     
     --PRINT @tempMain
     EXECUTE (@tempMain)
END
GO

三,准备一个通用的ashx页面

<%@ WebHandler Language="C#" Class="BillListData" %>
using System;
using System.Web; 
using ligerUI.Utility.Common;
using ligerUI.Utility.LigerGrid;
public class BillListData : IHttpHandler {
    
    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
        try
        {
            TryGetGridViewData();
        }
        catch (Exception err)
        {
            context.Response.Write("null");
        }
        context.Response.End();
    }

    public void TryGetGridViewData()
    {
        System.Web.HttpContext context = System.Web.HttpContext.Current;
        GridViewPager pager = new GridViewPager();
        string datajson = pager.GetDataJSON();
        context.Response.Write(datajson); 
    }
    public bool IsReusable {
        get {
            return false;
        }
    }

}

四,实现处理方法(接收分页排序信息,并返回正确的数据)

public DataTable GetGridView(string gridViewName, string fieldName, string gridKeyName, int pageNo, int pageSize, string orderStr, string whereStr, ref int recordTotal)
        { 
            string sqlCommad = "P_GridViewPager"; 
            SqlParameter[] parms = new SqlParameter[]{
                new SqlParameter("viewName",SqlDbType.VarChar,50),
                new SqlParameter("fieldName",SqlDbType.VarChar,50),
                new SqlParameter("keyName",SqlDbType.VarChar,50),
                new SqlParameter("pageNo",SqlDbType.Int),
                new SqlParameter("pageSize",SqlDbType.Int),
                new SqlParameter("orderString",SqlDbType.VarChar,50),
                new SqlParameter("whereString",SqlDbType.VarChar,50),
                new SqlParameter("recordTotal",SqlDbType.VarChar,50)
            };
            parms[0].Value = gridViewName;
            parms[1].Value = fieldName;
            parms[2].Value = gridKeyName;
            parms[3].Value = pageNo;
            parms[4].Value = pageSize;
            parms[5].Value = orderStr;
            parms[6].Value = whereStr;
            parms[7].Direction = ParameterDirection.Output; 
            DataTable dt = SqlHelper.ExecuteDataset(DataBaseHelper.connectionstring, CommandType.StoredProcedure, sqlCommad, parms).Tables[0];
            recordTotal = CommonHelper.ObjToInt(parms[7].Value);
            return dt;
        }
public string GetDataJSON()
        {
            System.Web.HttpContext ctx = System.Web.HttpContext.Current;

            int pageno = CommonHelper.ObjToInt(ctx.Request.Params["page"]);
            int pagesize = CommonHelper.ObjToInt(ctx.Request.Params["pagesize"]);
            string sortname = CommonHelper.ObjToStr(ctx.Request.Params["sortname"]);
            string sortorder = CommonHelper.ObjToStr(ctx.Request.Params["sortorder"]);
            string gridviewname = CommonHelper.ObjToStr(ctx.Request.Params["gridviewname"]);
            string gridsearch = CommonHelper.ObjToStr(ctx.Request.Params["gridsearch"]);
            if (string.IsNullOrEmpty(gridviewname))
                throw new ArgumentNullException("Grid视图名[gridsearch]不能为空"); 
            if (pageno == 0 || pagesize == 0)
            {
                if (string.IsNullOrEmpty(sortorder) && string.IsNullOrEmpty(gridsearch))
                {
                    return GetDataJSON(gridviewname);
                }
                if(string.IsNullOrEmpty(sortorder))
                    return GetDataJSON(gridviewname, gridsearch);
                if (string.IsNullOrEmpty(gridsearch))
                    return GetDataJSONUseSQL(string.Format("select * from {0} order by {1} {2}", gridviewname, sortname, sortorder.ToLower() == "asc" ? "asc" : "desc"));
                return GetDataJSON(gridviewname, gridsearch, string.Format("order by {0} {1}", sortname, sortorder));
            }
            if (string.IsNullOrEmpty(gridsearch) && string.IsNullOrEmpty(sortname))
            {
                return GetDataJSON(gridviewname, pageno, pagesize);
            }
            if (string.IsNullOrEmpty(gridsearch) && !string.IsNullOrEmpty(sortname))
            {
                return GetDataJSON(gridviewname, pageno, pagesize, sortname, sortorder);
            }
            if (!string.IsNullOrEmpty(gridsearch) && string.IsNullOrEmpty(sortname))
            {
                return GetDataJSON(gridviewname, pageno, pagesize, gridsearch);
            }
            if (!string.IsNullOrEmpty(gridsearch) && !string.IsNullOrEmpty(sortname))
            {
                return GetDataJSON(gridviewname, pageno, pagesize, sortname, sortorder, gridsearch);
            }
            return @"{""Rows"":[],""Total"":""0""}";
        }



分享到:
评论

相关推荐

    jQuery liger ul ligerGrid 打造通用的分页排序查询表格

    《jQuery ligerUI打造通用的分页排序查询表格详解》 在Web开发中,高效的数据展示和管理是关键。jQuery ligerUI库提供了一种强大的工具——ligerGrid,它可以帮助开发者快速创建具有分页、排序和查询功能的表格,...

    jQuery LigerUI 插件介绍及使用之ligerGrid

    2. 排序与分页:ligerGrid 提供了列排序功能,包括 JavaScript 内部排序和服务器端排序。分页功能则可以通过配置分页参数,实现客户端或服务器端的分页操作,提供良好的用户体验。 3. 显示/隐藏列:用户可以根据...

    ligerGrid列表Demo

    4. **功能扩展**:ligerGrid提供了分页、排序、过滤、编辑、添加、删除等多种功能。例如,通过设置`allowUnsort`来控制是否允许用户手动排序,通过`parms`参数可以传递额外的请求参数到服务器。 5. **事件处理**:...

    LigerGrid动态改变加载字段列名

    LigerGrid是一款基于jQuery的表格插件,它支持多种数据绑定方式,如Ajax数据绑定等,并提供了丰富的功能,如排序、分页、行编辑等。在实际应用中,经常需要根据用户需求或业务逻辑的变化动态调整表格显示的列名,这...

    LigerGridDemo_fieldz67_ligergrid_树表格_

    ligerGrid的功能列表:1支持本地数据和服务器数据(配置data或者url)2支持排序和分页(包括Javascript排序和分页)3支持列的“显示/隐藏”4支持明细行(表格内嵌)5支持汇总行6支持单元格模板7支持编辑表格(ligerGrid的一...

    LigerGridDemo完整示例

    LigerGrid 是由LigerUI库提供的一个组件,它允许开发者在网页上创建具有分页、排序、过滤、编辑等功能的表格。LigerGrid 的设计目标是简化数据绑定和交互,提供灵活的自定义选项,以满足各种复杂的数据展示需求。 *...

    LigerGrid 行背景颜色设置

    在ASP.NET开发中,LigerUI是一个非常流行的前端框架,它提供了一系列的UI组件,其中LigerGrid是一款功能强大的表格控件,适用于展示和操作数据。本项目是基于VS2010创建的一个Web空应用,主要实现了LigerGrid的一个...

    基于jQuery ligerUI实现分页样式

    ligerUI是一个基于jQuery的前端界面库,它提供了一系列预定义的控件,其中ligerGrid控件是该系列插件的核心,允许开发者以一种快速便捷的方式来创建表格,并且这个表格支持多种实用功能,如排序、分页、多表头、固定...

    LigerUI 储存过程分页查询

    例如,分页功能可能涉及到`ligerUI`目录下的`ligerGrid.js`文件,该文件定义了分页相关的函数和事件处理程序。 `App_Data`目录通常用于存储应用程序运行时生成的数据,如日志文件或数据库文件。如果LigerUI连接到一...

    jQuery LigerUI V1.1.5

    **jQuery LigerUI V1.1.5**是一款基于jQuery的UI库,它为开发者提供了丰富的界面组件,便于快速构建用户界面。其中,ligerGrid是LigerUI中的核心控件,专门用于创建功能强大的表格展示。这个版本的发布旨在提供更加...

    jQuery ligerUI API.rar_jQuery ligerUI API_ligerui api

    1. 数据表格(ligerGrid):提供强大的数据展示和操作功能,支持排序、筛选、分页、编辑等。 2. 表单(ligerForm):提供各种表单控件,如文本框、下拉框、日期选择器等,并支持验证和动态加载。 3. 对话框...

    前端 jQuery

    - `ligerGrid()`: 创建数据网格,可以自定义列、排序、分页等功能。 - `ligerForm()`: 创建表单,支持验证和动态加载数据。 - `ligerDialog()`: 显示弹出对话框,可以设置大小、位置、按钮等属性。 - `ligerCalendar...

    jQuery ligerUI 帮助文档

    1. 表格(Grid):ligerUI的表格控件支持数据分页、排序、过滤等功能。开发者可以通过`$("#gridId").ligerGrid({ options })`创建表格,并通过`options.data`设置初始数据。 2. 下拉框(ComboBox):提供了下拉列表...

    jQuery LigerUI V1.3.3

    1. **组件丰富**:jQuery LigerUI包含了大量的UI组件,如日期选择器、下拉列表、滑块、文件上传、分页、表格排序和过滤等功能,满足多样化的开发需求。 2. **响应式设计**:支持不同设备和屏幕尺寸的适配,使得在...

    Jquery LigerUI 中文 API

    - **通用方法**:LigerUI 的大部分组件可以通过 jQuery 对象的 `ligerGetControl` 方法创建,例如创建一个简单的输入框: ```javascript $("#inputId").ligerTextBox(); ``` 3. **组件属性与配置** - **配置项*...

    jquery-ligerUi-1.2.2.api

    1. 表格(Grid):jQuery LigerUI的表格组件支持数据分页、排序、过滤等功能,且提供多种数据操作接口,如添加、删除、编辑记录,极大地提升了数据展示和管理的便捷性。 2. 下拉框(ComboBox):LigerUI的下拉框...

    用JQuery,ajax从数据库读取数据.pdf

    这意味着当用户交互(如分页或排序)时,`ligerGrid`会通过Ajax请求向`ValidateData.ashx`发送请求来获取或处理数据。`dataAction: 'server'`表示数据加载和操作都在服务器端进行。 引用的JS文件包含了LigerUI库的...

    jQuery ligerUI API

    - **表格(Grid)**:支持分页、排序、过滤、编辑等功能,可自定义列模板,实现复杂数据展示和操作。 - **表单(Form)**:包含各种输入控件,如文本框、下拉框、日期选择器等,支持验证和联动效果。 - **对话框...

    jQuery LigerUI 使用教程表格篇(1)

    第一个例子 简介 ligerGrid是ligerui系列插件的核心控件,用户可以快速地创建一个美观,而且功能强大的表格,支持排序、分页、多表头、固定列等等。 支持本地数据和服务器数据(配置data或者url) 支持排序和分页(包括...

Global site tag (gtag.js) - Google Analytics