EXTJS2--grid通过后台返回数据动态生成表头和列表

1.需要引入Ext.ux.data.PagingMemoryProxy.js

Ext.namespace("Ext.ux");
Ext.namespace("Ext.ux.data");

/* Fix for Opera, which does not seem to include the map function on Array's */
if(!Array.prototype.map){
    Array.prototype.map = function(fun){
        var len = this.length;
        if(typeof fun != "function"){
            throw new TypeError();
        }
        var res = new Array(len);
        var thisp = arguments[1];
        for(var i = 0; i < len; i++){
            if(i in this){
                res[i] = fun.call(thisp, this[i], i, this);
            }
        }
        return res;
    };
}

/* Paging Memory Proxy, allows to use paging grid with in memory dataset */
Ext.ux.data.PagingMemoryProxy = function(data, config) {
    Ext.ux.data.PagingMemoryProxy.superclass.constructor.call(this);
    this.data = data;
    Ext.apply(this, config);
};

Ext.extend(Ext.ux.data.PagingMemoryProxy, Ext.data.MemoryProxy, {
    customFilter: null,

    load : function(params, reader, callback, scope, arg) {
        params = params || {};
        var result;
        try {
            result = reader.readRecords(this.data);
        } catch(e) {
            this.fireEvent("loadexception", this, arg, null, e);
            callback.call(scope, null, arg, false);
            return;
        }

        // filtering   
        if (this.customFilter!=null) {
            result.records = result.records.filter(this.customFilter);
            result.totalRecords = result.records.length;
        } else if (params.filter!==undefined) {
            result.records = result.records.filter(function(el){
                if (typeof(el)=="object"){
                    var att = params.filterCol || 0;
                    return String(el.data[att]).match(params.filter)?true:false;
                } else {
                    return String(el).match(params.filter)?true:false;
                }
            });
            result.totalRecords = result.records.length;
        }

        // sorting   
        if (params.sort!==undefined) {
            // use integer as params.sort to specify column, since arrays are not named   
            // params.sort=0; would also match a array without columns   
            var dir = String(params.dir).toUpperCase() == "DESC" ? -1 : 1;
            var fn = function(r1, r2){
                return r1==r2 ? 0 : r1
            };
            var st = reader.recordType.getField(params.sort).sortType;
            result.records.sort(function(a, b) {
                var v = 0;
                if (typeof(a)=="object"){
                    v = fn(st(a.data[params.sort]), st(b.data[params.sort])) * dir;
                } else {
                    v = fn(a, b) * dir;
                }
                if (v==0) {
                    v = (a.index < b.index ? -1 : 1);
                }
                return v;
            });
        }

        // paging (use undefined cause start can also be 0 (thus false))   
        if (params.start!==undefined && params.limit!==undefined) {
            result.records = result.records.slice(params.start, params.start+params.limit);
        }

        callback.call(scope, result, arg, true);
    }
});   

2.页面extjs代码

<% 
	String id= request.getParameter("id")==null?"-1":request.getParameter("id");
%>	


3.后台返回json数据格式

{
    "columnNames":[
        "INSTANCE_ID",
        "INSTANCE_NAME",
        "INSTANCE_CODE"
    ],
    "columnNamesMap":[
        {
            "columnName":"INSTANCE_ID"
        },
        {
            "columnName":"INSTANCE_NAME"
        },
        {
            "columnName":"INSTANCE_CODE"
        }
    ],
    "EntityArray":[
        {
            "INSTANCE_ID":"j4cbbbf443ac4b6cb0e99753c5d250d2",
            "INSTANCE_NAME":"审计码",
            "INSTANCE_CODE":"DAC"
        },
        {
            "INSTANCE_ID":"ofe3ebacc10f490788d37c848b8a6f56",
            "INSTANCE_NAME":"数据校验码",
            "INSTANCE_CODE":"DDVC"
        },
        {
            "INSTANCE_ID":"u690c38bce8f4125af7da3293ea7d3d3",
            "INSTANCE_NAME":"记录更新系统",
            "INSTANCE_CODE":"DK_SYSTEM_OF_UPD"
        },
        {
            "INSTANCE_ID":"tee1fa75b25c418b8e91253395021df9",
            "INSTANCE_NAME":"插入时间戳",
            "INSTANCE_CODE":"INSERTTIME"
        },
        {
            "INSTANCE_ID":"j2a902cd32e04a5cbcd9f9fd4e24f9e6",
            "INSTANCE_NAME":"更新时间戳",
            "INSTANCE_CODE":"UPDATETIME"
        }
    ]
}

你可能感兴趣的:(EXT.JS)