1、JSON数据为:

{
    "total":28, "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;

private int total;

//getter and setter methods

}

注意:因为EasyUI中的datagrid组件处理该数据时,默认都是使用rows属性和total属性的,所以为了json数据符合要求,java类中的list属性名比方为rows,list个数的属性名必须为total。

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;}}}]]
});

转载于:https://www.cnblogs.com/llguanli/p/6758334.html

Jquery easyUI datagrid载入复杂JSON数据方法相关推荐

  1. jQuery EasyUI datagrid实现本地分页的方法

    本文实例讲述了jQuery EasyUI datagrid实现本地分页的方法.分享给大家供大家参考.具体如下: 一般分页都是后台做,前端做无论从哪方面考虑都不合适.但是有的时候还是有这种需求. 这里重 ...

  2. jQuery EasyUI DataGrid Checkbox 数据设定与取值

    纯粹做个记录,以免日后忘记该怎么设定. 这一篇将会说明两种使用 jQuery EasyUI DataGrid 的 Checkbox 设定方式,以及在既有数据下将 checked 为 true 的该笔数 ...

  3. 使用jQuery easyui和Springdata JPI进行数据的查询

    使用jQuery easyui进行数据的查询     [1]无条件查询          1. datagrid 在页面加载后 会自动向 url 地址发送一次请求                 传递 ...

  4. JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能

    JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能 JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能 html <table id=&q ...

  5. jQuery EasyUI DataGrid - 格式化列(formatter )

    以下实例格式化在 easyui DataGrid 里的列数据,并使用自定义列的 formatter,如果价格小于 20 就将文本变为红色. 为了格式化一个数据网格(DataGrid)列,我们需要设置 ...

  6. jquery easyui dataGrid动态改变排序字段名

    2019独角兽企业重金招聘Python工程师标准>>> jquery easyui dataGrid 动态改变排序字段名,一般情况下,在使用的时候,我们会点击相应字段进行排序, 这里 ...

  7. EasyUI Form提交后json数据IE上需要下载(转)

    EasyUI Form提交后json数据IE上需要下载(转) 在使用EasyUI的form中的submit方法时,返回json在IE中变成提示下载的问题,代码如下: $('#fileForm').fo ...

  8. jquery的ajax,请求JSON数据。

    jquery的ajax,请求JSON数据. 第一个页面:1.htm <!DOCTYPE html> <html> <head> <title></ ...

  9. php输出json数据方法

    php输出json数据方法. /*** 输出json* @param string $msg 提示信息* @param int $errcode 错误代码* @param array $append_ ...

  10. ajax 循环html元素,AJAX返回API数据并使用jQuery循环遍历嵌套的JSON数据

    我使用AJAX连接到返回JSON对象的API(请参阅下面的JSON代码参考),并试图循环并解析要在HTML元素内部呈现的JSON数据.AJAX返回API数据并使用jQuery循环遍历嵌套的JSON数据 ...

最新文章

  1. hexo框架个人博客的搭建(面试加分!)
  2. 为什么2G/3G和AI擦不出火花?他们用这篇论文告诉你答案
  3. 大白话解析模拟退火算法
  4. 华为手机30s桌面循环滑动_【短讯】内循环工程机械高景气;苹果自研自产两种口罩;明年起华为手机将搭载鸿蒙系统...
  5. 用哈希桶实现错位字组的分类(Group Anagrams)
  6. CF891B-Gluttony【构造】
  7. linux中如何快速进入某个目录
  8. SuperEdge正式成为CNCF沙箱项目,腾讯云携手六家厂商在边缘计算领域踏入新篇章
  9. 命令启动jar包_java项目打jar包,一句命令搞定
  10. 【无人机】德国初创企业利用AR障碍训练无人机操作员
  11. InflateException:Bin file line #19:Error inflating class MyTextView
  12. 二维树状数组(bzoj 1452: [JSOI2009]Count)
  13. 如何在阿里云建立网站
  14. LAMP平台部署及应用_wuli大世界_新浪博客
  15. 让电视走向高端化,创维能否继续领跑显示行业?
  16. 怎样把本地文档共享至服务器上,利用云服务器共享本地文件
  17. 开场白——第一篇博客
  18. 宝哥面试题分享(07): Java中间件面试题
  19. 关于RoboMaster2019新型能量机关的一些感想(大风车)
  20. 【Kaldi 新手入门】手把手教你搭建简易英文数字ASR系统

热门文章

  1. 软件工程 - 设计模式学习之策略模式Strategy
  2. sql之stuff函数学习笔记
  3. 在uniapp或者vue中,单行文字或者数字无法换行导致后面内容无法展示问题的解决方案
  4. C#中类的修饰符,this关键字和static关键字
  5. Linux下源码安装ElasticResearch
  6. copy-and-swap idiom详解和实现安全自我赋值
  7. 微服务学习之Hystrix容错保护【Hoxton.SR1版】
  8. JSP之jsp内置标签
  9. Liunx 常用命令 学习备份
  10. SpringCloud实战(一)基于nacos实现订单+视频服务的调用