JQueryEasyUI datagrid框架的基本使用

2024-12-17 10:33:03

今天说说这个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格式数据；

jQuery easyui datagrid动态查询数据实例讲解

该插件组小巧使用方便,以下是一个从前台提交查询条件,从MSSQL返回json数据的一个事例 HTML前端代码复制代码代码如下: <?php include_once("auth.php"); ?> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel=&qu
EasyUI，点击开启编辑框，并且编辑框获得焦点的方法

复制代码代码如下: onClickRow : function(rowIndex, rowData){ var editor = $('#datagrid').datagrid('getEditor', {index:rowIndex,field:"buyNum"}); editor.target.focus(); } 点击一行,开启编辑框的同时,将光标放在编辑框中. rowIndex:是开启编辑框这行当前页的行索引,从0开始: buyNum:是开启编辑框的字段
easy ui datagrid 从编辑框中获取值的方法

如下所示: var editors = $('datagrid的id').datagrid('getEditors', rowIndex); //rowIndex 行编号,从0算起 console.info(editors[0].target.val()); 以上这篇easy ui datagrid 从编辑框中获取值的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.
JQueryEasyUI datagrid框架的基本使用

今天说说这个datagrid框架的基本使用,这个框架一直以来都是大家比较头疼的框架,尤其是Json数据的拼接,后台前台都很重要,使用这个框架,最重要的是仔细:无需废话,上代码了: 复制代码代码如下: <link href="jquery-easyui-1.3.2/themes/default/easyui.css" rel="stylesheet" type="text/css" /><!--easyui最全的样式包也可单独引
JQueryEasyUI datagrid框架的进阶使用

由于datagrid接收数据为Json格式,所以我们在前台展示数据的时候会出现问题,尤其是时间格式,在Json序列化之后,前台无法展示正确的时间数据,那么我们如何解决这样的问题呢?首先我们可以使用datapattern.js来解决这个问题:无需废话,直接上代码: <script src="Scripts/datapattern.js" type="text/javascript"></script> 复制代码代码如下: //列表初始化fun
datagrid框架的删除添加与修改

复制代码代码如下: <script type="text/javascript" charst="utf-8">var editFlag = undefined;//设置一个编辑标记//因为layout框架指向href时,只取html页面body中间的部分,所以该页面这样写即可//有datagrid包含属性较多,所以尽量使用js的方式初始化datagrid框架$(function () {$("#dg").datagrid({url
基于datagrid框架的查询

复制代码代码如下: <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link href="jquery-easyui-1.3.2/themes/default/easyui.css" rel="stylesheet" /><link href="jquery-easyui
JQuery EasyUI学习教程之datagrid 添加、修改、删除操作

一篇关于JQueryEasyUI学习之datagrid 添加.修改.删除学习笔记教程有需要了解的朋友可参考本的笔记,批量删除,双击表单修改.选中行修改,增加行修改,再有就是扩展editor的方法,无需废话,直接上代码,代码中的注释写的很详细 <script type="text/javascript" charst="utf-8">var editFlag = undefined;//设置一个编辑标记 //因为layout框架指向href时,只取htm
ASP 使用jqGrid实现读写删的代码(json)

jqGrid是一个优秀的基于jQuery的DataGrid框架,想必大伙儿也不陌生,网上基于ASP的资料很少,我提供一个,数据格式是json的: .一个针对jqGrid的json类:这段代码似乎是由官网论坛的一些PHP中转化而来,我们存为json.asp,代码贴一下: 复制代码代码如下: <% response.Charset="utf-8" '--------------------------------------- ' JSONClass类 ' 将Select语句的执行
JQueryEasyUI框架下的combobox的取值和绑定的方法

最近做的项目涉及到JQueryEasyUI框架的使用,EasyUI是什么?网上解释说它是来自W3C标准WEB前端专家DHTML精英俱乐部的简单易用功能强大的轻量级WEB前端JavaScript框架!从这句话的理解来说,我认为它是一种JavaScript框架. 对于最近的使用中,给我的感觉就是,借用官网JqueryEasyUI上的一句话,EasyUI是基于jQuery用户界面插件的集合,我把它理解成一种插件,不知道有没有问题.而使用easyui,不需要写很多的javascript代码,只需在定义的
JQueryEasyUI之DataGrid数据显示

在有的项目中,为了方便将数据库中的某些定值储存为指定的数字,例如在State中,将1指定为允许,0指定为禁止,但是在管理界面用1和0显示却不太美观且易用性很差,那么遇到这种情况该如何处理呢? 提一个最简单的方法,在DataGrid进行数据绑定的时候加上判断,代码如下: <script type="text/javascript"> $("#dg").datagrid({ columns:[[ {field:'State',title:'拓展状态',wid
jQuery EasyUI框架中的Datagrid数据表格组件结构详解

基础DOM结构什么叫"完整的基础DOM结构",这里"基础"的意思是指这个结构不依赖具体数据,不依赖Datagrid的view属性,只要存在Datagrid实例就会存在这样的基础DOM结构:而"完整"的意思是指在冻结列,冻结行,标题,footer,分页这些功能块都存在时候的DOM结构. 要搞清楚Datagrid的工作原理,这个DOM结构必须要烂熟于胸的,我们直接来看这个"基础完整DOM结构"是什么样子的: <!-- da
JQueryEasyUI Layout布局框架的使用

layout就是一个布局面板: 也就是布局的容器,有五个布局区域:北部,南部,东部,西部和中心.其中中心区域面板是必需的,但中心区域面板边缘区域面板是可选的.通过拖动它的边框,面板,可以调整每一个边缘地区.可以嵌套的布局,以便用户可以建立复杂的布局. 如果想要各个区域中的框架随框架的大小改变,请嵌套到layout框架中: 复制代码代码如下: <script type="text/javascript"> //split属性:如果设置为true将显示一个分隔条

JQueryEasyUI datagrid框架的基本使用

相关推荐

随机推荐