Ext grid

返回数据形式: 

Json代码   收藏代码
  1. {'totalCount'27,'result':[{"uum0401":103,"uum0402":"a81","uum0405":false,"uum0406":false},{"uum0401":104,"uum0402":"9","uum0405":false,"uum0406":false},{"uum0401":105,"uum0402":"a9","uum0405":false,"uum0406":false},{"uum0401":127,"uum0402":"2","uum0405":false,"uum0406":false},{"uum0401":122,"uum0402":"aa"},{"uum0401":123,"uum0402":"ok"},{"uum0401":124,"uum0402":"asas"},{"uum0401":125,"uum0402":"aaa","uum0405":false,"uum0406":false},{"uum0401":129,"uum0402":"a1","uum0405":false,"uum0406":false},{"uum0401":130,"uum0402":"a2","uum0405":false,"uum0406":false}]}  


为了方便大虾路过方便过目,最后只贴出js源码,其余东东附件提供,good luck。项目繁忙,就不多说了,有问题短我吧,我会尽力尽快回复,大家见谅。 
Javascript代码   收藏代码
  1. /** 
  2.  * @author cnyangqi@126.com 
  3.  * @version 1.0 
  4.  * @since 1.0 
  5.  */  
  6.   
  7. Ext.Loader.setConfig({  
  8.             enabled : true  
  9.         });  
  10. Ext.Loader.setPath('Ext.ux''../js/extjs4/ux/');  
  11.   
  12. Ext.require(['Ext.grid.*''Ext.data.*''Ext.util.*''Ext.toolbar.Paging',  
  13.         'Ext.ModelManager''Ext.tip.QuickTipManager',  
  14.         'Ext.ux.ProgressBarPager']);  
  15.   
  16. Ext.onReady(function() {  
  17.     Ext.tip.QuickTipManager.init();  
  18.   
  19.     // 定义领域模型  
  20.     Ext.define('Ecwuum04', {  
  21.                 extend : 'Ext.data.Model',  
  22.                 fields : ['uum0401''uum0402''uum0403''uum0404',  
  23.                         'uum0405''uum0406'],  
  24.                 idProperty : 'uum0401'// 实体主键  
  25.             });  
  26.   
  27.     var itemsPerPage = 10;  
  28.     var key;// 搜索关键字  
  29.   
  30.     // 创建数据仓库  
  31.     var store = Ext.create('Ext.data.Store', {  
  32.                 autoDestroy : true,  
  33.                 model : 'Ecwuum04',  
  34.                 proxy : {  
  35.                     type : 'ajax',  
  36.                     url : 'ecwuum04!list.action',  
  37.                     reader : {  
  38.                         type : 'json',  
  39.                         root : 'result',// JSON数组对象名  
  40.                         totalProperty : 'totalCount'// 数据集记录总数  
  41.                     }  
  42.                 },  
  43.                 pageSize : itemsPerPage,  
  44.                 autoLoad : true  
  45.             });  
  46.   
  47.     // beforeload( Ext.data.Store store, Ext.data.Operation operation)  
  48.     store.on('beforeload'function(s, o) {  
  49.                 if (Ext.getCmp('key').getValue()) {  
  50.                     key = Ext.getCmp('key').getValue();  
  51.                 } else {  
  52.                     key = 'undefined';  
  53.                 }  
  54.                 s.proxy.extraParams['key'] = key;  
  55.             });  
  56.   
  57.     var selModel = Ext.create('Ext.selection.CheckboxModel');  
  58.   
  59.     var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {  
  60.                 // clicksToEdit : 2,//默认双击修改行数据  
  61.                 clicksToMoveEditor : 1,  
  62.                 autoCancel : false  
  63.             });  
  64.   
  65.     // 创建表格  
  66.     var grid = Ext.create('Ext.grid.Panel', {  
  67.         width : 650,  
  68.         height : 300,  
  69.         title : '角色信息',  
  70.         frame : true,  
  71.         disableSelection : false// 允许选择行 *  
  72.         selType : 'rowmodel'// 选择类型设置为:行选择  
  73.         plugins : [rowEditing],// 加载行编辑插件  
  74.         listeners : {  
  75.             'selectionchange' : function(sm, selections) {  
  76.                 grid.down('#removeButton').setDisabled(selections.length == 0);  
  77.             }  
  78.         },  
  79.         selModel : selModel,  
  80.         store : store,  
  81.         columns : [{  
  82.                     text : "角色编号",  
  83.                     dataIndex : "uum0401"  
  84.                 }, {  
  85.                     text : "角色名称",  
  86.                     dataIndex : 'uum0402',  
  87.                     sortable : true// 此列数据可排序  
  88.                     hideable : false// 此列数据不可隐藏  
  89.                     renderer : function(value) { // 一般用于添加EMail  
  90.                         return Ext.String.format(  
  91.                                 '<a href="mailto:{0}@qq.com">{1}</a>', value,  
  92.                                 value);  
  93.                     },  
  94.                     field : {  
  95.                         xtype : 'textfield',  
  96.                         allowBlank : false  
  97.                     }  
  98.                 }, {  
  99.                     text : "角色类型",  
  100.                     dataIndex : 'uum0403',  
  101.                     sortable : true,  
  102.                     field : {  
  103.                         xtype : 'textfield'  
  104.                     }  
  105.                 }, {  
  106.                     text : "关联业务系统",  
  107.                     dataIndex : 'uum0404',  
  108.                     sortable : true  
  109.                 }, {  
  110.                     text : "标记",  
  111.                     dataIndex : 'uum0405',  
  112.                     sortable : true  
  113.                 }, {  
  114.                     text : "默认角色",  
  115.                     dataIndex : "uum0406"  
  116.                 }],  
  117.         // bbar : bbar,  
  118.         dockedItems : [{  
  119.                     xtype : 'toolbar',  
  120.                     dock : 'top',  
  121.                     items : [{  
  122.                                 xtype : 'button',  
  123.                                 text : '添加',  
  124.                                 tooltip : '添加角色',  
  125.                                 iconCls : 'add',  
  126.                                 handler : function() {  
  127.                                     var r = Ext.ModelManager.create({  
  128.                                                 uum0402 : '',  
  129.                                                 uum0403 : '',  
  130.                                                 uum0404 : '',  
  131.                                                 uum0405 : '',  
  132.                                                 uum0406 : ''  
  133.                                             }, 'Ecwuum04');  
  134.                                     store.insert(0, r);  
  135.   
  136.                                     rowEditing.startEdit(0, 0);  
  137.                                 }  
  138.                             }, '-', {  
  139.                                 xtype : 'button',  
  140.                                 text : '修改',  
  141.                                 tooltip : '修改选择的角色',  
  142.                                 iconCls : 'option',  
  143.                                 handler : function() {  
  144.                                     var sm = grid.getSelectionModel();  
  145.                                     rowEditing.startEdit(sm.getSelection()[0],  
  146.                                             0);// records  
  147.                                 }  
  148.                             }, '-', {  
  149.                                 itemId : 'removeButton',  
  150.                                 xtype : 'button',  
  151.                                 text : '删除',  
  152.                                 tooltip : '删除选择的角色',  
  153.                                 iconCls : 'remove',  
  154.                                 handler : function() {  
  155.                                     var sm = grid.getSelectionModel();  
  156.                                     var records = sm.getSelection();  
  157.                                     rowEditing.cancelEdit();  
  158.                                     store.remove(records);  
  159.                                     sm.select(0);  
  160.                                     for (var i = 0; i < records.length; i++) {  
  161.                                         delEcwuum04(records[i].data['uum0401']);  
  162.                                     }  
  163.                                 },  
  164.                                 disabled : true  
  165.                             }, '->', {  
  166.                                 xtype : "label",  
  167.                                 text : "角色名称:"  
  168.                             }, {  
  169.                                 xtype : "textfield",  
  170.                                 id : "key"  
  171.                             }, {  
  172.                                 text : "搜索",  
  173.                                 iconCls : 'search',  
  174.                                 handler : function() {  
  175.                                     // searchEcwuum04();  
  176.                                     store.load();  
  177.                                 }  
  178.                             }]  
  179.                 }, {  
  180.                     xtype : 'pagingtoolbar',  
  181.                     id : 'pt',  
  182.                     store : store, // 分页store与grid一致  
  183.                     dock : 'bottom',  
  184.                     displayInfo : true,  
  185.                     plugins : Ext.create('Ext.ux.ProgressBarPager', {})  
  186.                 }],  
  187.         iconCls : 'icon-grid',  
  188.         renderTo : 'grid'  
  189.     });  
  190.   
  191.     grid.on('edit', onEdit, this);  
  192.   
  193.     function onEdit(e) {  
  194.         e.record.commit();  
  195.         Ext.Ajax.request({  
  196.                     url : 'ecwuum04!save.action',  
  197.                     params : {  
  198.                         "ecwUum04.uum0401" : e.record.data['uum0401'],  
  199.                         "ecwUum04.uum0402" : e.record.data['uum0402'],  
  200.                         "ecwUum04.uum0403" : e.record.data['uum0403'],  
  201.                         "ecwUum04.uum0404" : e.record.data['uum0404'],  
  202.                         "ecwUum04.uum0405" : e.record.data['uum0405'],  
  203.                         "ecwUum04.uum0406" : e.record.data['uum0406']  
  204.                     },  
  205.                     success : function(response) {  
  206.                         var text = response.responseText;  
  207.                         alert(text);  
  208.                     }  
  209.                 });  
  210.         store.load();  
  211.     };  
  212.   
  213.     function delEcwuum04(id) {  
  214.         Ext.Ajax.request({  
  215.                     url : 'ecwuum04!delete.action',  
  216.                     params : {  
  217.                         "ecwUum04.uum0401" : id  
  218.                     },  
  219.                     success : function(response) {  
  220.                     }  
  221.                 });  
  222.         store.load();  
  223.         Ext.MessageBox.alert("信息""删除成功");  
  224.     }  
  225.   
  226. });  
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值