• 通过下拉菜单筛选GridPanel的数据【转】


    这里实现的是一个GridPanle页面,初始显示为全部的数据,在tbar里有一个下拉菜单,菜单里的选项可以对全部的数据进行筛选显示。

    代码(页面引用EXTJS代码和JS文件头部Ext.onReady(function(){xx}))代码就不写了,XX如下:

        var reader = new Ext.data.JsonReader({}, [  
               {name: 'HBR'},  
               {name: 'LRSJ', type: 'date'},  
               {name: 'JDMC'},  
               {name: 'HBNR'}  
            ]);  
            var expander = new Ext.ux.grid.RowExpander({  
                tpl : new Ext.Template(  
                    '<p style="height:auto"><b>汇报内容:</b><br>  {HBNR}</p>'  
                )  
            });  
          
            var grid1 = new Ext.grid.GridPanel({  
                //数据源  
                store: new Ext.data.JsonStore({  
                    url: 'xxxx.aspx',  
                    baseParams :{action:'getData'},  
                    root: 'data',  
                    autoLoad:true,  
                    fields: ['HBR','LRSJ','HBNR','JDMC'],  
                    reader: reader  
                }),  
                cm: new Ext.grid.ColumnModel({  
                    columns: [  
                        expander,  
                        {header: "汇报人",  80, dataIndex: 'HBR'},  
                        {header: "汇报时间",  100, dataIndex: 'HBSJ'},  
                        {header: "汇报阶段",  150, dataIndex: 'JDMC'}  
                    ]  
                }),  
                viewConfig: {  
                    forceFit:true  
                },   
                columnLines: true,         
                 500,  
                height: 565,  
                plugins: expander,  
                collapsible: false,//列表能否收缩  
                 animCollapse: false,  
                iconCls: 'icon-grid',  
                renderTo: document.body,  
               //tbar工具栏   
                tbar:new Ext.Toolbar({  
                    enableOverflow: true,  
                    buttons: [  
                     {  
                        xtype:'combo',  
                        fieldLabel: '阶段名称',  
                        id:'JD',  
                        130,  
                        typeAhead: true,  
                        triggerAction: 'all',  
                        editable:false,  
                        lazyRender:true,  
                        mode: 'local',  
                        emptyText: '请选择阶段名称...',   
                        //通过后台获得所需要参数的值  
                        store: new Ext.data.JsonStore({  
                            url: 'xxx.aspx?action=getJDMC,  
                            root: 'data',  
                            autoLoad:true,  
                            fields: ['JDMC'],  
                        //向数据源中添加一项全部显示  
                            listeners:{  
                                'load':function(st,records){  
                                    st.insert(0,[new Ext.data.Record({JDMC:"全部"})]);  
                                }  
                            }  
                        }),  
                        //为下拉菜单添加事件,启动时重新加载数据  
                        listeners : {  
                           'select':function(BMList,record){  
                            var myStore= grid1.getStore();  
                            myStore.setBaseParam('JDMC', record.get('JDMC'));  
                            myStore.reload();  
                            }  
                              
                        },  
                        valueField: 'JDMC',  
                        displayField: 'JDMC'  
                     }  
                    ]  
                })  
  • 相关阅读:
    前后端分离项目采用Prerender的SEO优化流程
    spring多数据源分布式事务的分析与解决方案
    Windows上MyEclipse2017 CI7 安装、破解以及配置
    WINDOWS上JDK安装与环境变量设置
    Abp Vnext Vue3 的版本实现
    你好,年轻人
    数据结构·堆
    数据结构·优先队列
    算法笔记·并查集
    JAVA问题解决——Jar包中资源调用
  • 原文地址:https://www.cnblogs.com/lxiang/p/2487103.html
Copyright © 2020-2023  润新知