码迷,mamicode.com
首页 > 编程语言 > 详细

EasyUI - DataGrid 组建 - [ 组件加载和排序 ]

时间:2015-10-27 23:44:52      阅读:339      评论:0      收藏:0      [点我收藏+]

标签:

效果:

技术分享

 

原理:通过POST传递到数据后台字段。

  • 此时上传的参数,page:当前页数,rows:每页显示的页数。
  • 有此两项参数,计算取出数据条数。
  • 通过后台接受参数,进行处理并返回抽取的数据。

技术分享

 

html代码:

            <table id="tab"></table>

 

JS代码:

  • 此时显示的列名称,对应的是JSON数据中的列名称。
$(function () {
    $(#tab).datagrid({
        width: 500,//宽度
        title: 信息列表,//标题名
        iconCls: icon-search,//图标
        singleSelect: true,//是否单选
        striped: true,//是否开启斑马线



        //要加载的数据
        url: "../Json/datagridjson.ashx",
        //要显示的列
        columns: [[
            { field: id, title: 编号 },
            { field: name, title: 姓名},
            { field: sex, title: 性别}
        ]],



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

 

一般处理程序(ashx)记载数据页:

  • 下方使用了,DataTable转换Json类。
  • 使用了分页的SQL语句。
  • 为了能在DataGrid组件中显示总条数,要在返回的数据中加入 total属性,具体详见代码中的注释。
using EasyUI.DAL;
using EasyUI.Tools;
using System;
using System.Data;
using System.Web;

namespace EasyUI.Json
{
    /// <summary>
    /// datagridjson 的摘要说明
    /// </summary>
    public class datagridjson : IHttpHandler
    {

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


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

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

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


            //将datatable转换为json
            //在返回的JSON数据中,加入total属性(总记录数)
            //那么他就会在加载的时候,显示总记录数。
            //显示的格式是【 {"total":12, "rows":"[{},{},{}]"} 】,rows内为JSON数据。
            string strjson = "{\"total\":15, \"rows\":" + DatatableToJson.ToJson(dt) + "}";

            context.Response.Write(strjson);
        }
        
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

 

EasyUI - DataGrid 组建 - [ 组件加载和排序 ]

标签:

原文地址:http://www.cnblogs.com/KTblog/p/4915713.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!