javascript封装ext js grid渲染函数

 *模拟map
 */
Map = function(){
    var mapAddM = {
        /**
         * entry函数
         * @param {Object} key
         * @param {Object} val
         */
        entry: function(key, val, flag){
            this.key = key;
            this.value = val;
            this.flag = flag;
        },
        //put方法
        put: function(key, val, flag){
            this.store[this.store.length] = new this.entry(key, val, flag);
        },
        //get方法
        get: function(key){
            for (var i = 0; i < this.store.length; i++) {
                if (this.store[i].key === key) 
                    return this.store[i].value;
            }
        },
        //get方法
        getFlag: function(key){
            for (var i = 0; i < this.store.length; i++) {
                if (this.store[i].key === key) 
                    return this.store[i].flag;
            }
        },
        //remove方法
        remove: function(key){
            for (var i = 0; i < this.store.length; i++) {
                this.store[i].key === key && this.store.splice(i, 1);
            }
        },
        //keyset
        keySet: function(){
            var keyset = new Array;
            for (var i = 0; i < this.store.length; i++) 
                keyset.push(this.store[i].key);
            return keyset;
        },
        //valset
        valSet: function(){
            var valSet = new Array;
            for (var i = 0; i < this.store.length; i++) 
                valSet.push(this.store[i].value);
            return valSet;
        },
        //flagSet
        flagSet: function(){
            var flagSet = new Array;
            for (var i = 0; i < this.store.length; i++) 
                flagSet.push(this.store[i].flag);
            return flagSet;
        },
        //clear
        clear: function(){
            this.store.length = 0;
        },
        //size 
        size: function(){
            return this.store.length;
        },
        /**
         *  迭代子
         */
        iterator: function(){
            //TODO 待实现
            var obj = this.keySet();//所有的key集合
            var idx = 0;
            var me = {
                /**
                 * 当前key
                 */
                current: function(){
                    return obj[idx - 1];
                },
                /**
                 * 第一个key
                 */
                first: function(){
                    return obj[0];
                },
                /**
                 * 最后一个key
                 */
                last: function(){
                    return obj[obj.length - 1];
                },
                /**
                 * 是否还有下一个元素
                 */
                hasNext: function(){
                    idx++;
                    if (idx > obj.length || null == obj[obj.length - 1]) 
                        return false;
                    return true;
                }
            };
            return me;
        }
    };
    for (var method in mapAddM) {
        this.store = new Array;
        Map.prototype[method] = mapAddM[method];
    }
}

/**
 * 生成column
 * @param {Object} map
 */
function createColumns(map){
    var columns = [];
    var i = 0;
    for (var it = map.iterator(); it.hasNext();) {
        var currentKey = it.current();//本次循环的key
        var currentVal = map.get(currentKey);//当前value
        var currentFlag = map.getFlag(currentKey);//判断是否隐藏该列
        var columni = {};
        columni.dataIndex = currentKey;
        columni.header = currentVal;
        columni.sortable = true;
        columni.width = 115;
        if ((currentFlag && (currentFlag == "hide"))) {
            columni.hidden = true;
        }
        columns.push(columni);
        i++;
    }
    return columns;
}

/**
 * 生成keyset集合
 * @param {Object} map
 */
function createReaderColumns(map){
    var columns = [];
    var i = 0;
    for (var it = map.iterator(); it.hasNext();) {
        var currentKey = it.current();//本次循环的key
        var columni = {};
        columni.name = currentKey;
        columns.push(columni);
        i++;
    }
    return columns;
}

/**
 * 渲染extgrid
 */
var _pageSize = 15;
function rendExtGrid(_url, _params, renderDiv, map){
    jQuery("#" + renderDiv).html("");//清空已经存在的数据
    /**
     * 读取数据代理
     */
    var proxy = new Ext.data.HttpProxy({
        url: _url,
        method: "POST"
    });
    
    /**
     * 记录
     */
    var record = Ext.data.Record.create(createReaderColumns(map));
    
    /**
     * 解析数据的reader
     */
    var reader = new Ext.data.JsonReader({
        totalProperty: "Total",
        root: "Rows",
    }, record);
    
    /**
     * 数据源
     */
    var store = new Ext.data.Store({
        proxy: proxy,
        reader: reader,
		//remoteSort:true,//全局排序
        baseParams: {
            method: "POST",
            searchParam: JSON.stringify(_params) //查詢參數
        }
    });
    
    /**
     * 遮罩
     */
    var loadMarsk = new Ext.LoadMask(document.body, {
        msg: '正在加载数据……',
        disabled: false,
        store: store
    });
    
    //分页工具栏 
    var pagingToolbar = new Ext.PagingToolbar({
        pageSize: _pageSize,
        store: store,
        displayInfo: true,
        displayMsg: '第{0}-第{1}条，一共{2}条',
        emptyMsg: "无数据",
        hideBorders: true,
		cls:"pageBar",//自定义样式
        items: ['-', {
            pressed: false,
            enableToggle: true,
            cls: 'x-btn-text-icon details',
            toggleHandler: function(btn, pressed){
                var view = grid.getView();
                view.showPreview = pressed;
                view.refresh();
            }
        }]
    });
    //创建grid  
    var grid = new Ext.grid.GridPanel({
        store: store,
        region: 'center',
		border:false,
        mode: "remote",
        columns: createColumns(map),
        frame: false, //表格外加边框   
        collapsible: true,
        animCollapse: false,
        sm: new Ext.grid.RowSelectionModel({
            singleSelect: true
        }),
        iconCls: 'icon-grid'
    
    });
	
	grid.on('load',function(){gridSpan(grid,'row','1px solid #8080FF');});
	
	store.load({ params: { start: 0, limit: _pageSize} });
    /**
     * 容器：为了能宽高自适应
     */
    var viewPort = new Ext.Panel({
        layout: 'fit',
		renderTo: renderDiv,
		autoScroll: false,
		height:400,
		bbar: pagingToolbar,
        items: [grid]
    });
    
    
}



//合并单元格的函数，合并表格内所有连续的具有相同值的单元格。调用方法示例：grid.on('load',function(){gridSpan(grid,'row','1px solid #8080FF');});   
//参数：grid-需要合并的表格,rowOrCol-合并行还是列,borderStyle-合并后单元格分隔线样式   
function gridSpan(grid, rowOrCol, borderStyle){   
    var array1 = new Array();   
    var count1 = 0;   
    var count2 = 0;   
    var index1 = 0;   
    var index2 = 0;   
    var aRow = undefined;   
    var preValue = undefined;   
    var firstSameCell = 0;   
    var allRecs = grid.getStore().getRange();   
       
    if(rowOrCol == 'row'){   
        count1 = grid.getColumnModel().getColumnCount();   
        count2 = grid.getStore().getCount();   
    } else {   
        count1 = grid.getStore().getCount();   
        count2 = grid.getColumnModel().getColumnCount();   
    }   
       
    for(i = 0; i < count1; i++){   
        preValue = undefined;   
        firstSameCell = 0;   
        array1[i] = new Array();   
        for(j = 0; j < count2; j++){   
            if(rowOrCol == 'row'){   
                index1 = j;   
                index2 = i;   
            } else {   
                index1 = i;   
                index2 = j;   
            }   
            var colName = grid.getColumnModel().getColumnId(index2);   
            if(allRecs[index1].get(colName) == preValue){   
                allRecs[index1].set(colName, '&nbsp;');   
                array1[i].push(j);   
                if(j == count2 - 1){   
                    var index = firstSameCell + Math.round((j + 1 - firstSameCell) / 2 - 1);   
                    if(rowOrCol == 'row'){   
                        allRecs[index].set(colName, preValue);   
                    } else {   
                        allRecs[index1].set(grid.getColumnModel().getColumnId(index), preValue);   
                    }   
                }   
            } else {   
                if(j != 0){   
                    var index = firstSameCell + Math.round((j + 1 - firstSameCell) / 2 - 1);   
                    if(rowOrCol == 'row'){   
                        allRecs[index].set(colName, preValue);   
                    } else {   
                        allRecs[index1].set(grid.getColumnModel().getColumnId(index), preValue);   
                    }   
                }   
                firstSameCell = j;   
                preValue = allRecs[index1].get(colName);   
                allRecs[index1].set(colName, '&nbsp;');   
                if(j == count2 - 1){   
                    allRecs[index1].set(colName, preValue);   
                }   
            }   
        }   
    }   
    grid.getStore().commitChanges();   
       
    //添加所有分隔线   
    for(i = 0; i < grid.getStore().getCount(); i ++){   
        for(j = 0; j < grid.getColumnModel().getColumnCount(); j ++){   
            aRow = grid.getView().getCell(i,j);   
            aRow.style.borderTop = borderStyle;   
            aRow.style.borderLeft = borderStyle;   
        }   
    }   
       
    //去除合并的单元格的分隔线   
    for(i = 0; i < array1.length; i++){   
        for(j = 0; j < array1[i].length; j++){   
            if(rowOrCol == 'row'){   
                aRow = grid.getView().getCell(array1[i][j],i);   
                aRow.style.borderTop = 'none';   
            } else {   
                aRow = grid.getView().getCell(i, array1[i][j]);   
                aRow.style.borderLeft = 'none';   
            }          
        }   
    }   
}