Jquery easyUI datagrid加载复杂JSON数据方法

1、JSON数据为:

{

"rows": [

{

"itemNo": "1",

"itemName": "12",

"spec": "",

"pattern": "",

"itemCategory": {

"id": "A01",

"name": "中药"

},

"itemUnit": {

"id": "B01",

"name": "公斤"

},

"uploadFileName": null

},

],

}

2、其对应的java类为:

public class PageModel<T> {

//结果集

private List<T>
rows;

//getter and setter methods

}

注意:由于EasyUI中的datagrid组件处理该数据时,默认都是使用rows.length参数的,所以为了保证数组的key为rows,java类中的list属性名比如为rows。

for(var i=0;i<rows.length;i++){

...

}

3、List中的class如下:

public class Item {

private String itemNo;

private String itemName;

private String spec;

private String pattern;

private ItemCategory itemCategory;

private ItemUnit itemUnit;

private String uploadFileName;

//getter and setter methods

}

public class ItemCategory {

private String id;

private String name;

//getter and setter methods

}

public class ItemUnit {

private String id;

private String name;

//getter and setter methods

}

4、SpringMVC中处理showJSON的Controller:

@ResponseBody

protected Object showJson(HttpServletRequest request, HttpServletResponse response)

throws Exception {

PageModel pageModel = get_page_model_from_database();

return pageModel;

}

直接返回PageModel 对象,@ResponseBody注解会自动调用JSON库将其转换成JSON格式的数据,即本文开头的数据;

5、datagrid中加载数据

//加载数据

$(‘#Ajax‘).datagrid({

fit:true,

fitColumns:true,

width: ‘auto‘,

height:300,

striped: true,

singleSelect : true,

url:‘item.do‘,

//POST parameters: command=showJson

queryParams:{

command: ‘showJson‘

},

loadMsg:‘数据加载中请稍后……‘,

pagination: true,

rownumbers: true,

columns:[[

{field:‘itemNo‘,title: ‘物料代码‘,align: ‘center‘,width: 100,

formatter:function(value,row,index){

//alert("itemNo: "+value+" "+row.itemNo+" "+index);

return "<a href=‘item.do?command=showDetail&itemNo="+value+"‘>"+value+"</a>";

}

},

{field:‘itemName‘,title: ‘物料名称‘,align: ‘center‘,width: 100},

{field:‘spec‘,title: ‘
物料规格‘,align: ‘center‘,width: 100},

{field:‘pattern‘,title: ‘物料型号‘,align: ‘center‘,width: 100},

{field:‘itemCategory‘,title: ‘类别‘,align: ‘center‘,width: 100,

formatter:function(value,row,index){

var ret="";

if(value != null) {

ret = value.name;

//alert("itemCategory.id="+value.id+" name="+value.name);

}

return ret;

}

},

{field:‘itemUnit‘,title: ‘计量单位‘,align: ‘center‘,width: 100,

formatter:function(value,row,index){

var ret="";

if(value != null) {

ret = value.name;

//alert("itemCategory.id="+value.id+" name="+value.name);

}

return ret;

}

},

]]

});

处理简单数据,比如 "itemNo": "1"时直接使用{field:‘itemNo‘,title: ‘物料代码‘,align: ‘center‘,width: 100}即可加载数据;

但处理复杂数据,比如

"itemCategory": {

"id": "A01",

"name": "中药"

},

则需要使用formatter属性来加载,代码如下:

{field:‘itemCategory‘,title: ‘类别‘,align: ‘center‘,width: 100,

formatter:function(value,row,index){

var ret="";

if(value != null) {

ret = value.name;

//alert("itemCategory.id="+value.id+" name="+value.name);

}

return ret;

}

},

关于datagrid formatter属性的描述参考:http://www.jeasyui.com/documentation/index.php#

The cell formatter function, take three parameters:

value: the field value.表示当前field对应的值,可以是一个简单对象,如一个字符串,也可以是一个复杂对象,对应一个java类

row: the row record data.表示当前行对应的整个对象,相当于json数据中的rows[i]对象(i为当前行的index),可以使用row.itemNo访问JSON数据中的rows[i].itemNo对象,使用row.itemCategory.id访问JSON数据中的rows[i].itemCategory.id对象。

index: the row index.行号,第一行的行号为0

Code example:

$(‘#dg‘).datagrid({
	columns:[[
		{field:‘userId‘,title:‘User‘, width:80,
			formatter: function(value,row,index){
				if (row.user){
					return row.user.name;
				} else {
					return value;
				}
			}
		}
	]]
});

时间: 2024-10-07 07:51:51

Jquery easyUI datagrid加载复杂JSON数据方法的相关文章

使用Sencha Touch加载本地Json数据

本例没有采用Sencha的mvc模式.只是一个简单的读取加载本地Json数据示例. 文档结构如下: app.js代码如下: Ext.require(['Ext.form.Panel', 'Ext.data.Store', 'Ext.data.reader.Json', 'Ext.dataview.DataView']); Ext.application({ name:'MyApp', icon:'images/icon.png', glossOnIcon:false, phoneStarupSc

easyui中加载table列表数据 第一次有数据第二次没有数据问题

$('#allUsingProductTable').datagrid({  加载数据时,第二加载时table会发生变化会出现找不到问题.如果是弹框没有影响,弹框出现出现列表每次都会执行销毁方法. 解决办法 发送ajax请求获取数据,用$('#usingProductTableUpdate').datagrid('loadData', data.rows);加载数据 $(function(){ $('#usingProductTableUpdate').datagrid({ width: 'au

easyui datagrid 加载两次请求,触发两次ajax 请求 问题

datagrid初始化的时候请求两次URL 两种情况 1. <table id="gridview" class="easyui-datagrid"></table> $(function(){ $("#gridview").datagrid({ url:"getData.do", title:"列表", singleSelect:false, pagination:true, to

easyui datagrid加载数据的两种方式

1.加载本地数据 var obj = {"total":2,"rows":[{id:"1",name:"一"},{id:"2",name:"二"}]}; $('#dg').datagrid('loadData',obj); 注意:这里的数据必须是json对象,要是json字符串,必须先转换成json对象才能作为datagrid的数据源.否则会出现异常:Cannot read proper

easyui datagrid加载数据和分页

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><%String basepath = request.getContextPath();%><%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core&quo

jquery easyui tab加载内容的几种方法

转:http://my.oschina.net/u/2331760/blog/391937?fromerr=saqeoxxB jQuery Easyui 的tabs插件有两种方式加载某个tab(标签页)上的内容:“href远程请求”和“content本地内容”,本文就两种方式的优缺点进行简单分析和思考. 两者特点: href方式加载数据的特点: content方式加载数据的特点: 简单总结: href常见问题: 1.href只加载目标URL的html片段 2.短暂的页面混乱: 3.html片段的

Android异步加载学习笔记之一:用AsyncTask加载服务器json数据

我们知道在Android开发中,UI主线程不能执行耗时太久的操作,Activity一般是不超过5s,BroadCaseReceiver一般不超过10s,因为这些耗时操作不仅仅阻塞UI线程操作,还可能导致用户不想见到的ANR,所以我们需要使用异步操作. 我们通常用的异步操作有两种方式: 1:多线程或线程池异步加载, 2,AsyncTask异步任务操作(底层也是用的线程池). 数据来源于慕课网:json数据地址:http://www.imooc.com/api/techer?type=4&num=3

vue2.0配置webpack.dev.conf.js加载本地json数据

打开webpack.dev.conf.js 在const portfinder = require('portfinder')后加入以下配置 1 const express = require('express') 2 const app = express() // 请求server 3 var appData = require('../data.json') //加载本地数据 4 var seller = appData.seller //获取对应的数据 5 var goods = app

EasyUI DataGrid绑定嵌套的json数据

现有json数据如下: {"total":2,"rows": [{"BarrackGUID":"dc1be891-4489-4eb8-bb1d-ba1debd59b07","BarrackName":"屋舍一","BarrackNumber":"0001","BarrackArea":"100平米",&quo