当前位置: 代码迷 >> JavaScript >> EXTJS 四 动态加载GRID
  详细解决方案

EXTJS 四 动态加载GRID

热度:386   发布时间:2012-08-31 12:55:03.0
EXTJS 4 动态加载GRID

EXTJS 4 动态加载GRID

Ext.onReady(function()?{

????Ext.Ajax.request({
????????url:?"/Sys_Module/GetGridInfo",
????????params:?{},
????????success:?function(response,?config)?{
????????????json?=?Ext.JSON.decode(response.responseText); ?//加载grid信息,具体json格式在下面

????????????var?Sys_RolePermissionList;
????????????var?Sys_RolePermissionStore;
????????????//?功能模块grid展示
????????????Sys_RolePermissionList?=?function()?{
????????????????var?url?=?"/Sys_RolePermission/List";
????????????????//var?sm?=?Ext.create('Ext.selection.RowModel');

????????????????//grid?填充
????????????????Ext.define('Sys_RolePermissionGridModel',?{
????????????????????extend:?'Ext.data.Model',
????????????????????fields:?json.fieldsNames
????????????????});

????????????????var?groupingFeature?=?Ext.create('Ext.grid.feature.Grouping',?{
????????????????????groupHeaderTpl:?'text1:?{name}?({rows.length}?Item{[values.rows.length?>?1???"s"?:?""]})'
????????????????});

????????????????//grid获取?json数组
????????????????Sys_RolePermissionStore?=?Ext.create('Ext.data.Store',?{
????????????????????pageSize:?10,
????????????????????model:?'Sys_RolePermissionGridModel',
????????????????????buffered:?true,
????????????????????groupField:?'text1',
????????????????????data:?json.data,
????????????????????proxy:?{
????????????????????????//actionMethods:?'post',
????????????????????????type:?'memory'
????????????????????????//url:?url,
????????????????????????//????????????????????????reader:?{
????????????????????????//????????????????????????????type:?'json',
????????????????????????//????????????????????????????root:?'root',
????????????????????????//????????????????????????????totalProperty:?'totalPorperty'
????????????????????????//????????????????????????}
????????????????????},
????????????????????sorters:?[{
????????????????????????property:?'number',
????????????????????????direction:?'DESC'
}]
????????????????????});
????????????????????SaveSys_RolePermissionFn?=?function()?{
????????????????????????var?rowcount?=?grid.getStore().getCount();
????????????????????????console.log(rowcount);
????????????????????????for?(i?=?0;?i?<?rowcount;?i++)?{
????????????????????????????console.log(i);
????????????????????????????var?abc?=?grid.getView().getNode(i);
????????????????????????????var?childs?=?abc.children[3].children[0];

????????????????????????????console.log(childs.childNodes.length);
????????????????????????????//console.log(childs.innerHTML);
????????????????????????????for?(var?j?=?0;?j?<?childs.children.length;?j++)?{
????????????????????????????????console.log(childs.children[i].value?+?childs.children[i].checked);
????????????????????????????}


????????????????????????????//var?cell?=?grid.getView().getCell(i,?3);
????????????????????????????//console.log(cell.outerText);

????????????????????????}


????????????????????}
????????????????????//grid配置
????????????????????var?grid?=?Ext.create('Ext.grid.Panel',?{
????????????????????????id:?"Sys_RolePermissionPanel",
????????????????????????renderTo:?"Sys_RolePermissionGrid",
????????????????????????layout:?"fit",
????????????????????????alias:?'widget.methodPanel',
????????????????????????columnLines:?true,
????????????????????????loadMask:?true,
????????????????????????frame:?true,
????????????????????????border:?false,
????????????????????????//selModel:?sm,???//选择框
????????????????????????height:?400,
????????????????????????autoScroll:?true,
????????????????????????store:?Sys_RolePermissionStore,
????????????????????????ds:?Sys_RolePermissionStore,
????????????????????????//sm:?sm,
????????????????????????columnLines:?true,
????????????????????????plugins:?[rowEditing],
????????????????????????//cm:?sm,
????????????????????????viewConfig:?{
????????????????????????????stripeRows:?true,
????????????????????????????trackOver:?true,
????????????????????????????emptyText:?'<div?style="color:#999;margin:5px;">当前没有记录显示<div>'
????????????????????????},
????????????????????????stripeRows:?true,
????????????????????????tbar:?[?????????????????????//工具条设置
?????????????????????{
?????????????????????text:?"新增",
?????????????????????tooltip:?"新增",
?????????????????????iconCls:?"addicon",
?????????????????????handler:?SaveSys_RolePermissionFn
}],
????????????????????????columns:?json.columModle

????????????????????});
????????????????????//Sys_RolePermissionStore.loadPage(1);
????????????????????grid.render();
????????????????}
????????????????Sys_RolePermissionList();

????????????},
????????????failure:?function()?{
????????????????alert("sdf");

????????????}
????????});
????});

?

grid动态加载json为

?//后台返回json数组

{'action':true,'message':'error!',
??'data':[
??{'number':'1','text1':?'3','info1':?'4','special1':?'5'},
{'number':'2','text1':?'3','info1':?'4','special1':?'<input?type=\'checkbox\'?value=\'xx权限\'?class=\'abc123\'?/>xx权限&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;???<input?type=\'checkbox\'?value=\'xx权限\'?class=\'abc123\'?/>xx权限????<input?type=\'checkbox\'?value=\'xx权限\'?/>xx权限????<input?type=\'checkbox\'?value=\'xx权限\'?/>xx权限????<input?type=\'checkbox\'?value=\'xx权限\'?/>xx权限????<input?type=\'checkbox\'?value=\'xx权限\'?/>'},
{'number':'3','text1':?'3','info1':?'4','special1':?'<input?type=\'checkbox\'?value=\'xx权限\'?class=\'abc123\'?/>xx权限&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;???<input?type=\'checkbox\'?value=\'xx权限\'?class=\'abc123\'?/>xx权限????<input?type=\'checkbox\'?value=\'xx权限\'?/>xx权限????<input?type=\'checkbox\'?value=\'xx权限\'?/>xx权限????<input?type=\'checkbox\'?value=\'xx权限\'?/>xx权限????<input?type=\'checkbox\'?value=\'xx权限\'?/>'},
{'number':'4','text1':?'3','info1':?'4','special1':?'5'}
??],
??'columModle':[
??{'header':?'序号','dataIndex':?'number','width':40},
??{'header':?'编码','dataIndex':?'text1',?editor:?{
????????????????????xtype:?'checkbox',
????????????????????cls:?'x-grid-checkheader-editor'
????????????????}},
??{'header':?'名称','dataIndex':?'info1',?editor:?{
????????????????????xtype:?'checkbox',
????????????????????cls:?'x-grid-checkheader-editor'
????????????????}},
??{'header':?'金额','dataIndex':?'special1','width':300}
??],
??'fieldsNames':[{name:'number'},{name:'text1'},{name:'info1'},{name:'special1'}]
??}

  相关解决方案