动态添加gridPanel的列和数据

动态添加gridPanel的列和数据

下面通过实例介绍

一、gridPanel前面3列为固定的,后面4列动态从数据库读取

  •  
  • JScript 代码   复制
  • 
    function getDataPanel() {
        var cmItems = [];
        var cmConfig = {};
        cmItems.push(new Ext.grid.RowNumberer());
        // 固定列部分
        cmItems.push({
                    header : "學生",
                    dataIndex : 'student',
                    width : 100,
                    renderer : function(value, cellmeta, record) {
                        var name = record.get("student").nameCn;
                        return name;
                    }
                });
        cmItems.push({
                    header : "段考",
                    dataIndex : 'semester',
                    width : 100,
                    renderer : function(value, cellmeta, record) {
                        var semester = record.get("semester");
                        var result = " ";
                        result += semester.year + '' + (semester.index + 1) + '段考';
                        return result;
                    }
                });
        cmItems.push({
                    header : "分紙",
                    width : 100,
                    dataIndex : 'scoreSheet'
                });
    
        var results; // 动态列部分以及取值
        Ext.Ajax.request({
                    method : 'POST',
                    url : "/erips/portfolio/srcs/getScoreSheetHeaders。htm",
                    async : false,
                    success : function(response) {
                        results = Ext.util.JSON.decode(response.responseText).root;
                    }
                });
        var columns = results;
        for (var i = 0; i < columns.length; i++) {
            cmConfig = {
                header : columns[i].header,
                dataIndex : columns[i].dataIndex,
                sortable : true,
                renderer : function(value, cellmeta, record, rowIndex, columnIndex) {
                    var scores = record.get("scores");
                    var score = scores[columnIndex - columns.length];
                    if (score < 60) {
                        return "<span style="color:red" mce_style="color:red">" + score + "</span>";
                    }
                    return score;
                }
            }
            cmItems.push(cmConfig);
        }
    
        var cm = new Ext.grid.ColumnModel(cmItems);
        var store = new Ext.data.Store({
                    proxy : new Ext.data.HttpProxy({
                                url : '/erips/portfolio/srcs/getScoreSheet。htm',
                                baseParams : {
                                    cmd : 'semesterId'
                                }
                            }),
                    reader : new Ext.data.JsonReader({
                                totalProperty : 'totalCount',
                                successProperty : 'success',
                                idProperty : 'id',
                                root : 'root'
                            }, [{
                                        name : 'student'
                                    }, {
                                        name : 'semester'
                                    }, {
                                        name : 'scoreSheet'
                                    }, {
                                        name : 'scores'
                                    }]),
                    writer : getWriter()
                });
    
        var data_Panel = new Ext.grid.GridPanel({
                    id : 'data_Panel',
                    trackMouseOver : true,// 鼠标移到上面会高亮显示
                    border : false,
                    hidden : true,
                    stripeRows : true,
                    autoDestroy : false,
                    // collapsible : true,// 是否可以展开
                    animCollapse : false,// 展开时是否有动画效果
                    store : store,
                    defaults : {
                        anchor : "100%",
                        padding : '5 5 5 5'
                    },
                    cm : cm,
                    viewConfig : {
                        forceFit : true
                    }
                });
    
        return data_Panel;
    }
    
    		
  • 效果图

    实例二、前3列是固定的,其后的列是根据所选中树节点的不同而不同

  •  
  • JScript 代码   复制
  • 
    function onTreeNodeClick(n) {
        var grid = this.grid; 
        //根据传递过来的node,ajax请求服务器获取对应的动态列 
        Ext.Ajax.request({ 
            url:"sample。ashx?method=getDynColumn", 
            params:{node:n.id}, 
            success:function(response, option){ 
                //固定列 
                var cm = [ 
                {header:"编号", mapping:"id", dataIndex:"id", width:65, menuDisabled:true}, 
                {header:"名称", mapping:"name", dataIndex:"name", width:65, menuDisabled:true}, 
                {header:"路径", mapping:"url", dataIndex:"url", width:65, menuDisabled:true}]; 
                var fd = ["id", "name", "url", "classID"]; 
                var res = Ext.util.JSON.decode(response.responseText); 
                var columns = res.columns; 
                var fields = res.fields; 
                var types = res.types; 
    标签: