zoukankan      html  css  js  c++  java
  • Jquery easyUI datagrid载入复杂JSON数据方法

    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,
    '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', 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', 100},  
    {field:'spec',title: ' 物料规格',align: 'center', 100},  
    {field:'pattern',title: '物料型号',align: 'center', 100},
    {field:'itemCategory',title: '类别',align: 'center', 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', 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', 100}就可以载入数据。

    但处理复杂数据,比方     

     "itemCategory": {
            "id": "A01",
            "name": "中药"
          },

    则须要使用formatter属性来载入。代码例如以下:

    {field:'itemCategory',title: '类别',align: 'center', 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', 80,
    			formatter: function(value,row,index){
    				if (row.user){
    					return row.user.name;
    				} else {
    					return value;
    				}
    			}
    		}
    	]]
    });

  • 相关阅读:
    Oracle 建用户、 表空间脚本
    Java常见Jar包的用途
    EF:无法检查模型兼容性,因为数据库不包含模型元数据。
    Eclipse -Xms256M -Xmx640M -XX:PermSize=256m -XX:MaxPermSize=768m
    CentOS远程连接Windows操作系统
    spring boot / cloud (二十) 相同服务,发布不同版本,支撑并行的业务需求
    jvm
    jvm
    spring boot / cloud (十九) 并发消费消息,如何保证入库的数据是最新的?
    spring boot / cloud (十八) 使用docker快速搭建本地环境
  • 原文地址:https://www.cnblogs.com/llguanli/p/6758334.html
Copyright © 2011-2022 走看看