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

  • 相关阅读:
    什么是webview
    juqery.fn.extend和jquery.extend
    LeetCode
    5. Longest Palindromic Substring
    42. Trapping Rain Water
    11. Container With Most Water
    621. Task Scheduler
    49. Group Anagrams
    739. Daily Temperatures
    3. Longest Substring Without Repeating Characters
  • 原文地址:https://www.cnblogs.com/llguanli/p/6758334.html
Copyright © 2011-2022 走看看