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: ,
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 表格的更多相关文章
- 第二百二十二节，jQuery EasyUI，DataGrid(数据表格)组件
jQuery EasyUI,DataGrid(数据表格)组件 学习要点: 1.加载方式 2.分页功能 本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于 Pa ...
- JQuery EasyUI的datagrid的使用方式总结
JQuery EasyUI的datagrid的使用方式总结第一步:添加样式和js脚本在前台添加展示数据表格的table元素 例如: <div> <table id="tt& ...
- 给Jquery easyui 的datagrid 每行增加操作链接(转)
http://www.thinkphp.cn/code/207.html 通过formatter方法给Jquery easyui 的datagrid 每行增加操作链接我们都知道Jquery的EasyU ...
- JQuery EasyUI之DataGrid列名和数据列分别设置不同对齐方式(转)
需求如下 现有数据列三列 Name,Age,CreateDate 数据 张三,18,2000-12-09 :12:34:56 李四,28,2000-12-09 :12:34:56 王麻子,38,200 ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（92）-打印EasyUI 的datagrid表格
前言 应用系统有时候需要打印Datagrid的表格内容,我们本节就来学习打印datagrid内容 打印主要使用:web打印(我们之前有讲过web打印插件jqprint) + 将datagrid重新编制 ...
- JQuery EasyUI中datagrid的使用
在学习过程中,可以参照JQuery EasyUI的官方网站学习.地址:http://www.jeasyui.com/demo/main/index.php 在学习JQuery EasyUI中的Data ...
- jQuery EasyUI之DataGrid使用示例
jQuery EasyUI是一个轻量级的Web前端开发框架,提供了很多的现成组件帮助程序员减轻前端代码开发量,之前有个项目中就用到了其中的DataGrid. jQuery EasyUI框架的官方主页: ...
- jquery easyui的datagrid在初始化的时候会请求两次URL？
我们项目前端用的是jquery easyui,刚开始使用datagrid加载列表初始化时总是请求两次URL,这让人非常不解,怎么总是请求两次呢?数据一多,加载速度明显变慢,通过查资料才知道原来是重复声 ...
- easyui，datagrid表格，行内可编辑
最近用到easyui,需要表格内编辑,但是我同一个页面有多个表格,把官方的代码修改了一下,如下: HTML代码 <table id="dg" class="easy ...
随机推荐
- Linux性能优化从入门到实战：12 内存篇：Swap 基础
内存资源紧张时,可能导致的结果 (1)OOM 杀死大内存CPU利用率又低的进程(系统内存耗尽的情况下才生效:OOM 触发的时机是基于虚拟内存,即进程在申请内存时,如果申请的虚拟内存加上服务器实际已用的 ...
- BZOJ1135 LYZ（POI2009） Hall定理+线段树
做这个题之前首先要了解判定二分图有没有完备匹配的Hall定理: 那么根据Hell定理,如果任何一个X子集都能连大于等于|S|的Y子集就可以获得完备匹配,那么就是: 题目变成只要不满足上面这个条件就能得 ...
- shell脚本--expect自动应答
expect自动应答 TCL语言 需求1:远程登录到A主机,什么事情也不做 #! /usr/bin/env expect # 开启一个程序 spawn ssh root@192.144.213.11 ...
- Tomcat的作用思考及NIO在Tomcat中的应用模型
Tomcat的作用 平时写完web程序都是直接点击启动,就可以在本机浏览器访问了.但是仔细想想,我们似乎都没有写过浏览器与servlet通信的代码,也没有写过创建request.reponse的代码. ...
- service pom
<properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> &l ...
- web应用，http协议简介，web框架
一.web应用 web应用程序是一种可以通过Web访问的应用程序,程序的最大好处是用户很容易访问应用程序,用户只需要有浏览器即可,不需要再安装其他软件.应用程序有两种模式C/S.B/S.C/S是客户端 ...
- Python_003(字符串的神操作)
一.编码问题 1.编码:计算机最早是ACSII码,美国人创造的,包含了英文字母(大写字母,小写字母)数字,标点等特殊符号; :共有7位0和1组成,表示128个ACSII码,但是计算机对7这个数字不敏感 ...
- [CSP-S模拟测试]:折纸（模拟）
题目描述 小$s$很喜欢折纸.有一天,他得到了一条很长的纸带,他把它从左向右均匀划分为$N$个单位长度,并且在每份的边界处分别标上数字$0\sim n$.然后小$s$开始无聊的折纸,每次他都会选择一个 ...
- 阿里云code上传代码
1-从官网下载git,然后安装,这一步可以百度. 2-在阿里云上面创建project,如图 3-回到本地,进入本地代码文件目录,右击打开git 4-输入git init 在文件夹下面会出现.git文件 ...
- Centos6.5在线配置安装Java环境与Tomcat环境
书写此文一来记录环境,以便后期查看使用,Linux环境下配置centos与Java开发环境 本文环境:虚拟机系统centos6.5 链接工具:xshell脚本链接工具 一.安装Java开发 ...