JQueryEasyUI datagrid框架的基本使用

http://www.jb51.net/article/35348.htm

今天说说这个datagrid框架的基本使用，这个框架一直以来都是大家比较头疼的框架，尤其是Json数据的拼接，后台前台都很重要，使用这个框架，最重要的是仔细：
无需废话，上代码了：

复制代码代码如下:

HTMLPage.htm代码：

复制代码代码如下:

这是前台请求数据时发送的数据；

Json格式数据一定要是双引号的，单引号无法显示数据哦；

数据格式如下：

复制代码代码如下:

{
"total":239,
"rows":[
{"code":"001","name":"Name 1","addr":"Address 11","col4":"col4 data"},
{"code":"002","name":"Name 2","addr":"Address 13","col4":"col4 data"},
{"code":"003","name":"Name 3","addr":"Address 87","col4":"col4 data"},
{"code":"004","name":"Name 4","addr":"Address 63","col4":"col4 data"},
{"code":"005","name":"Name 5","addr":"Address 45","col4":"col4 data"},
{"code":"006","name":"Name 6","addr":"Address 16","col4":"col4 data"},
{"code":"007","name":"Name 7","addr":"Address 27","col4":"col4 data"},
{"code":"008","name":"Name 8","addr":"Address 81","col4":"col4 data"},
{"code":"009","name":"Name 9","addr":"Address 69","col4":"col4 data"},
{"code":"010","name":"Name 10","addr":"Address 78","col4":"col4 data"}
]
}

这里呢，后台传递数据很重要：

注意：表格Post或者get回来的请求中
page：3 代表page为key，然后选择的当前页码为3
rows：10 代表一页的大小为10
后台返回的数据的格式为：{total：''，rows：[{},{}]}
只要包含了总数tatol字段，rows是具体的行数
例如：
Asp.Net MVC 例子：
public JsonResult GetAllUserInfos()
{
int pageSize = 5;
int pageIndex = 1;
int.TryParse(this.Request["page"], out pageIndex);
int.TryParse(this.Request["rows"], out pageSize);

pageSize = pageSize <= 0 ? 5 : pageSize;
pageIndex = pageIndex < 1 ? 1 : pageIndex;

var temp = db.UserInfo
.OrderBy(u=>u.Sort)
.Skip<UserInfo>((pageIndex-1)*pageSize)
.Take<UserInfo>(pageSize)
.ToList<UserInfo>();
Hashtable ht = new Hashtable();
ht["total"] = db.UserInfo.Count();
ht["rows"] = temp;
return Json(ht);
}

Asp.Net WebForm 例子：
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
var strWebName = context.Request["WebName"] ?? string.Empty;
var GoodsNo = context.Request["GoodsNo"] ?? string.Empty;
int categoryId = 0;

int pageIndex = 1;
int pageSize = 10;

int.TryParse(context.Request["rows"], out pageSize);
int.TryParse(context.Request["page"], out pageIndex);

decimal priceLeft = 0;
decimal priceRight = 1000000;
int goodsStatus = 0;
decimal.TryParse(context.Request["PriceLeft"], out priceLeft);
decimal.TryParse(context.Request["PriceRight"], out priceRight);
int.TryParse(context.Request["CategoryId"], out categoryId);
int.TryParse(context.Request["GoodsStatus"], out goodsStatus);
var goodsQueryParamter = new GoodsQueryParamter();

goodsQueryParamter.GoodsStatus = (Model.GoodsModel.GoodsStatusEnum)goodsStatus;

var ds = goodsService.GetGoodsList(goodsQueryParamter);
string json = string.Empty;

if (ds != null && ds.Tables.Count > 0)
{
System.Text.StringBuilder rowJson = new System.Text.StringBuilder();
int colLen = ds.Tables[0].Columns.Count;
DataColumnCollection col = ds.Tables[0].Columns;
foreach (DataRow row in ds.Tables[0].Rows)
{
System.Text.StringBuilder colJson = new System.Text.StringBuilder();
rowJson.Append("{");
for (int i = 0; i < colLen; i++)
{
colJson.Append("\"" + col[i].ColumnName + "\":\"" + row[i].ToString() + "\",");
}
rowJson.Append(colJson.ToString().TrimEnd(','));
rowJson.Append("},");
}
json = "{\"total\":" + ds.Tables[0].Rows[0]["sumGoods"] + ",\"rows\":[" + rowJson.ToString().TrimEnd(',') + "]}";
}
context.Response.Write(json);
}

ASP.Net中有一个类也可以序列化Json格式数据；

JQueryEasyUI datagrid框架的基本使用的更多相关文章

Jquery结合datagrid框架
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8 ...
JQuery-EasyUI DataGrid CRUD
ASP.NET使用EasyUI-DataGrid + ashx + JQuery Ajax:实现数据的增删查改,查询和分页! 数据表: 学生表:学生编号.姓名.性别.班级编号.年龄班级表:班级编号. ...
datagrid 添加、修改、删除（转载）
原链接:JQueryEasyUI学习笔记(十)datagrid 添加.修改.删除基于datagrid框架的删除.添加与修改: 主要是批量删除,双击表单修改.选中行修改,增加行修改,再有就是扩展edi ...
TinyFrame升级之八：实现简易插件化开发
本章主要讲解如何为框架新增插件化开发功能. 在.net 4.0中,我们可以在Application开始之前,通过PreApplicationStartMethod方法加载所需要的任何东西.那么今天我们 ...
jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法
博客分类: jquery-easyui jQueryAjax框架HTML 现象: AJAX返回的html无法做到自动渲染为EasyUI的样式.比如:class="easyui-layout ...
EasyUi之datagird解读
1.其json格式需要为: JSON Code 1234567891011121314151617181920212223 { , "rows": [ ...
二十二、【轻量级开源框架】EFW框架Web前端开发之JqueryEasyUI
回<[开源]EFW框架系列文章索引> EFW框架源代码下载V1.2:http://pan.baidu.com/s/1hcnuA EFW框架实例源代码下载:http://pan ...
ASP.NET MVC+EF框架+EasyUI实现权限管理系列(5)-前台JqueryEasyUI前台实现
原文:ASP.NET MVC+EF框架+EasyUI实现权限管理系列(5)-前台JqueryEasyUI前台实现 ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇) (1):框 ...
RDIFramework.NET框架Web中datagrid与treegrid控件自动生成右键菜单与列标题右键菜单
在实际应用中常可以看到数据展示控件有右键菜单的功能,对应的列标题也可以右键弹出快捷菜单设置指定列的显示与隐藏等功能.在我们的RDIFramework.NET Web框架中,只要是使用了EasyUI的D ...

随机推荐

.Net core环境准备
.Net core 出来有段日子了,在跨平台上迈出了坚实的一步,尽管如此身边还是有很多人都转向了Java阵营.抛开语言之争,在.net平台上工作多年,还是有必要了解下新推出的技术,没准有朝一日就用上了 ...
C语言预处理三（条件编译--#if）
//#if 条件编译 //一般用于产品各个版本的语言包 #include<stdio.h> #include<stdlib.h> //#都是预处理指令,条件表达式必须在预处理里 ...
DDD 领域驱动设计－谈谈 Repository、IUnitOfWork 和 IDbContext 的实践(转)
http://www.cnblogs.com/xishuai/p/ddd-repository-iunitofwork-and-idbcontext.html 好久没写 DDD 领域驱动设计相关的文章 ...
工作随笔——xshell4安装后应该做的一些事
xshell4默认支持中文语言选项→键盘和鼠标:设置快捷键,鼠标按键(可以提高工作效率) 1.选定文本自动复制到剪贴板选择→将选定的文本自动复制到剪贴板(选上) 2.更高鼠标中间按钮和右键按钮的功 ...
聊聊HTTPS和SSL_TLS协议
要说清楚 HTTPS 协议的实现原理,至少需要如下几个背景知识. 1. 大致了解几个基本术语(HTTPS.SSL.TLS)的含义 2. 大致了解 HTTP 和 TCP 的关系(尤其是“短连接”VS“长 ...
mysql基础事务的认识和使用
事务(Transaction)是访问并可能更新数据库中各种数据项的一个程序执行单元(unit).事务是恢复和并发控制的基本单位. 在关系数据库中,一个事务可以是一条SQL语句,一组SQL语句或整个程序 ...
微信小程序开发:Flex布局
微信小程序页面布局方式采用的是Flex布局.Flex布局,是W3c在2009年提出的一种新的方案,可以简便,完整,响应式的实现各种页面布局.Flex布局提供了元素在容器中的对齐,方向以及顺序,甚至他们 ...
Android数据共享
Android数据共享在Android应用程序开发的过程中,借助Bundle类对象来传递数据并不是在所有场景下都适用,就那简单的Intent类对象来说,就不能put进Bundle类对象中.当然不能否 ...
大型网站系统架构实践（四）http层负载均衡之haproxy实践篇（一）
方案上篇文章讲到了负载均衡的相关理论知识,这篇文章我打算讲讲实践方法以及实践中遇到的问题方案:haproxy http层负载均衡安装一个haproxy服务,两个web服务 haproxy:192 ...
2、面向对象以及winform的简单运用（面向对象的四大基本特性）
面向对象的四大基本特性面向对象的核心概念就是封装.抽象.继承.多态这四大基本特性,在这里先解释一下它们的定义: 封装:是一种隐藏信息的特性.找到变化并且把它封装起来,你就可以在不影响其它部分的情况下 ...

JQueryEasyUI datagrid框架的基本使用

JQueryEasyUI datagrid框架的基本使用的更多相关文章

随机推荐

热门专题