动态添加gridPanel的列和数据
类别:Web前端 浏览量:4058
时间:2014-5-4 动态添加gridPanel的列和数据
动态添加gridPanel的列和数据下面通过实例介绍
一、gridPanel前面3列为固定的,后面4列动态从数据库读取
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列是固定的,其后的列是根据所选中树节点的不同而不同
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;
热门推荐
- 网站iis日志的位置
- vuecli打包项目(使用vue-cli创建项目并webpack打包的操作方法)
- 如何看云服务器日志(云服务器怎么查看日志的步骤)
- virtualbox 虚拟centos使用方法(Virtualbox 安装centos7虚拟机的图文教程详解)
- laravel自定义条件查询(解决laravel groupBy 对查询结果进行分组出现的问题)
- mac的mysql连接问题如何解决(MAC 中mysql密码忘记解决办法)
- dedecms标签怎么调用(dedecms首页调用随机文章及自动更新功能实例)
- css3动画让元素绕着圆圈转动(css3动画过渡实现鼠标跟随导航效果)
- js中作用域
- vue中的定时函数(vue计时器的实现方法)