jQuery easyUI 使用 datagrid 表格
Posted zhang1f
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery easyUI 使用 datagrid 表格相关的知识，希望对你有一定的参考价值。
获取后台数据依旧是使用一般处理程序（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: 800, title: ‘设备管理‘, method:‘get‘, columns: [[ field: ‘adminName‘, title: ‘登录名‘, width: 300 , field: ‘trueName‘, title: ‘用户名‘, width: 300 , field: ‘mobilePhone‘, title: ‘联系电话‘, width: 200 ]], pagination: true, pageSize:1, pageList:[1,2,3] ) ) 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 - 1) * 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[0]; 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 = -1) StringBuilder json = new StringBuilder(); foreach (DataTable dt in ds.Tables) //"total":5,"rows":[ json.Append("\"total\":"); if (total == -1) 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 = 0; i < dt.Rows.Count; i++) jsonBuilder.Append(""); for (int j = 0; 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 > 0) jsonBuilder.Remove(jsonBuilder.Length - 1, 1); jsonBuilder.Append(","); if (dt.Rows.Count > 0) jsonBuilder.Remove(jsonBuilder.Length - 1, 1); return jsonBuilder.ToString(); public bool IsReusable get return false;
以上是关于jQuery easyUI 使用 datagrid 表格的主要内容，如果未能解决你的问题，请参考以下文章