获取后台数据依旧是使用一般处理程序（ashx） ，分页上添加一个函数（pagerFilter(data)）

前端代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="dataGrid.aspx.cs" Inherits="Web.Management.dataGrid" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

     <link href="easyui/themes/default/easyui.css" rel="stylesheet" />

    <link href="easyui/themes/icon.css" rel="stylesheet" />

    <link href="css/style.css" rel="stylesheet" />

    <script src="easyui/jquery.min.js"></script>

    <script src="easyui/jquery.easyui.min.js"></script>

    <script type="text/javascript" src="http://www.w3cschool.cc/try/jeasyui/datagrid-detailview.js"></script>

    <script src="easyui/locale/easyui-lang-zh_CN.js"></script>

    <script src="js/echarts.js"></script>

    <script src="js/shine.js"></script>

    <script type="text/javascript">

        $(function () {

            $('#dg').datagrid({

                url:'ashx/GetDataFormSql.ashx',

                width: ,

                title: '设备管理',

                method:'get',

                columns: [[

                    { field: 'adminName', title: '登录名', width:  },

                    { field: 'trueName', title: '用户名', width:  },

                    { field: 'mobilePhone', title: '联系电话', width:  }

                ]],

                pagination: true,

                pageSize:,

                pageList:[,,]

            })

        })

        function pagerFilter(data) {

            if (typeof data.length == 'number' && typeof data.splice == 'function') {   // is array

                data = {

                    total: data.length,

                    rows: data

                }

            }

            var dg = $(this);

            var opts = dg.datagrid('options');

            var pager = dg.datagrid('getPager');

            pager.pagination({

                onSelectPage: function (pageNum, pageSize) {

                    opts.pageNumber = pageNum;

                    opts.pageSize = pageSize;

                    pager.pagination('refresh', {

                        pageNumber: pageNum,

                        pageSize: pageSize

                    });

                    dg.datagrid('loadData', data);

                }

            });

            if (!data.originalRows) {

                data.originalRows = (data.rows);

            }

            var start = (opts.pageNumber - ) * parseInt(opts.pageSize);

            var end = start + parseInt(opts.pageSize);

            data.rows = (data.originalRows.slice(start, end));

            return data;

        }

        $(function () {

            $('#dg').datagrid({ loadFilter: pagerFilter }).datagrid('loadData', getData());

        });

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <div>

     <table id="dg"></table>

    </div>

    </form>

</body>

</html>

后台代码：

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Data;

using System.Text;

namespace Web.Management.ashx

{

    /// <summary>

    /// GetDataFormSql 的摘要说明

    /// </summary>

    public class GetDataFormSql : IHttpHandler

    {

        public void ProcessRequest(HttpContext context)

        {

            string command = context.Request.QueryString["test"];//前台传的标示值

            if (command == "add")

            {//调用添加方法

                //Add(context);//我暂时只是绑定，所以把这些给注释了

            }

            else if (command == "modify")

            {//调用修改方法

                //Modify(context);//我暂时只是绑定，所以把这些给注释了

            }

            else

            {//调用查询方法

                Query(context);

            }  

        }

        public void Query(HttpContext context)

        {

            //调用B层的方法从而获取数据库的Dataset

            DataSet ds = BRL.BLL.A_admin.GetAllList();

            //将Dataset转化为Datable

            DataTable dt = ds.Tables[];

            int count = dt.Rows.Count;

            string strJson = Dataset2Json(ds, count);//DataSet数据转化为Json数据

            context.Response.Write(strJson);//返回给前台页面

            context.Response.End();

        }

        public static string Dataset2Json(DataSet ds, int total = -)

        {

            StringBuilder json = new StringBuilder();

            foreach (DataTable dt in ds.Tables)

            {

                //{"total":5,"rows":[

                json.Append("{\"total\":");

                if (total == -)

                {

                    json.Append(dt.Rows.Count);

                }

                else

                {

                    json.Append(total);

                }

                json.Append(",\"rows\":[");

                json.Append(DataTable2Json(dt));

                json.Append("]}");

            }

            return json.ToString();

        }

        public static string DataTable2Json(DataTable dt)

        {

            StringBuilder jsonBuilder = new StringBuilder();

            for (int i = ; i < dt.Rows.Count; i++)

            {

                jsonBuilder.Append("{");

                for (int j = ; j < dt.Columns.Count; j++)

                {

                    jsonBuilder.Append("\"");

                    jsonBuilder.Append(dt.Columns[j].ColumnName);

                    jsonBuilder.Append("\":\"");

                    jsonBuilder.Append(dt.Rows[i][j].ToString());

                    jsonBuilder.Append("\",");

                }

                if (dt.Columns.Count > )

                {

                    jsonBuilder.Remove(jsonBuilder.Length - , );

                }

                jsonBuilder.Append("},");

            }

            if (dt.Rows.Count > )

            {

                jsonBuilder.Remove(jsonBuilder.Length - , );

            }

            return jsonBuilder.ToString();

        }

        public bool IsReusable

        {

            get

            {

                return false;

            }

        }

    }

}

jQuery easyUI 使用 datagrid 表格的更多相关文章

  1. 第二百二十二节，jQuery EasyUI，DataGrid(数据表格)组件

    jQuery EasyUI,DataGrid(数据表格)组件 学习要点: 1.加载方式 2.分页功能 本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于 Pa ...

  2. JQuery EasyUI的datagrid的使用方式总结

    JQuery EasyUI的datagrid的使用方式总结第一步:添加样式和js脚本在前台添加展示数据表格的table元素 例如: <div> <table id="tt& ...

  3. 给Jquery easyui 的datagrid 每行增加操作链接(转)

    http://www.thinkphp.cn/code/207.html 通过formatter方法给Jquery easyui 的datagrid 每行增加操作链接我们都知道Jquery的EasyU ...

  4. JQuery EasyUI之DataGrid列名和数据列分别设置不同对齐方式(转)

    需求如下 现有数据列三列 Name,Age,CreateDate 数据 张三,18,2000-12-09 :12:34:56 李四,28,2000-12-09 :12:34:56 王麻子,38,200 ...

  5. ASP.NET MVC5+EF6+EasyUI 后台管理系统（92）-打印EasyUI 的datagrid表格

    前言 应用系统有时候需要打印Datagrid的表格内容,我们本节就来学习打印datagrid内容 打印主要使用:web打印(我们之前有讲过web打印插件jqprint) + 将datagrid重新编制 ...

  6. JQuery EasyUI中datagrid的使用

    在学习过程中,可以参照JQuery EasyUI的官方网站学习.地址:http://www.jeasyui.com/demo/main/index.php 在学习JQuery EasyUI中的Data ...

  7. jQuery EasyUI之DataGrid使用示例

    jQuery EasyUI是一个轻量级的Web前端开发框架,提供了很多的现成组件帮助程序员减轻前端代码开发量,之前有个项目中就用到了其中的DataGrid. jQuery EasyUI框架的官方主页: ...

  8. jquery easyui的datagrid在初始化的时候会请求两次URL？

    我们项目前端用的是jquery easyui,刚开始使用datagrid加载列表初始化时总是请求两次URL,这让人非常不解,怎么总是请求两次呢?数据一多,加载速度明显变慢,通过查资料才知道原来是重复声 ...

  9. easyui，datagrid表格，行内可编辑

    最近用到easyui,需要表格内编辑,但是我同一个页面有多个表格,把官方的代码修改了一下,如下: HTML代码 <table id="dg" class="easy ...

随机推荐

  1. [SDOI2011]消防（贪心，图论，树的直径）

    [SDOI2011]消防 题目描述 某个国家有n个城市,这n个城市中任意两个都连通且有唯一一条路径,每条连通两个城市的道路的长度为zi(zi<=1000). 这个国家的人对火焰有超越宇宙的热情, ...

  2. ps:HSB色彩模式

    前面我们已经学习过了两大色彩模式RGB和CMYK.色彩模式有很多种,但这两种是最重要和最基础的.其余的色彩模式,实际上在显示的时候都需要转换为RGB,在打印或印刷(又称为输出)的时候都需要转为CMYK ...

  3. 专家告诉你！如何避免黑客BGP劫持？

    BGP前缀劫持是针对Internet组织的持久威胁,原因是域间路由系统缺乏授权和身份验证机制. 仅在2017年,数千起路由事件导致代价高昂的中断和信息拦截,而问题的确切程度未知.尽管在过去20年中已经 ...

  4. 信号量计算问题--n个进程, 共享3个资源, 当前信号量为-1, 其他进程继续执行P操作, 那么信号量应该继续减

    选B

  5. php中ajax的使用实例讲解

    一.总结 1.多复习:代码都挺简单的,就是需要复习,要多看 2.ajax原理:ajax就是部分更新页面,其实还在的html页面监听到事件后,然后传给服务器进行操作,这里用的是get方式来传值到服务器, ...

  6. CKEditor粘贴图片上传功能

    很多时候我们用一些管理系统的时候,发布新闻.公告等文字类信息时,希望能很快的将word里面的内容直接粘贴到富文本编辑器里面,然后发布出来.减少排版复杂的工作量. 下面是借用百度doc 来快速实现这个w ...

  7. 有关CSS的一些事

    看到两篇关于CSS的文章,总结的非常好.因为没有那个网站的账号,没法收藏转发,所以把链接贴在这里,分享给大家.这两篇文章对于初学CSS的人来说,总结得很精炼准确,而且通俗易懂.推荐~ 有关CSS的一些 ...

  8. 20180708-Java变量类型

    public class Test{ public void pupAge(){ int age = 0; age = age + 7; System.out.println("Puppy ...

  9. Oracle 中 not exists (select 'X' ...) 的含义

    select a.col1,a.col2 from temp1 a where not exists (select 'X' from temp2 b where b.col2 = a.col1);s ...

  10. 「THUPC 2017」机场 / Airport

    https://loj.ac/problem/2403 题解 神仙题. 练习赛的时候想了个假建图. 正解太神仙了. 先把不合法情况判掉. 先对时间离散化,每个时间点开一个点. 然后把他们一次串起来,中 ...