0
回答
怎样在AOS平台中实现这样的grid列头过滤功能?

@AHei 你好,想跟你请教个问题:我想动态给grid添加features:filters属性,该怎么加呢。因为我是用AOS的grid标签生成表格的,所以需要动态给grid添加过滤插件,我用的是Ext4.2中自带的FiltersFeature插件。

这是我自己另外写的静态配置features属性的小例子,我想知道怎么在AOS平台中实现这样的列头过滤功能?


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="ExtJS/resources/css/ext-all-debug.css">
    <script src="ExtJS/ext-all-dev.js" type="text/javascript"></script>
    <script src="ExtJS/locale/ext-lang-zh_CN.js" type="text/javascript"></script>
    <script>
        Ext.Loader.setConfig({ enabled: true });
        Ext.Loader.setPath('Ext.ux', 'ExtJS');
        Ext.require([
            '*',
            'Ext.toolbar.Paging',
            'Ext.ux.grid.FiltersFeature',//必不可少的
            'Scripts.*'
        ]);
    </script>
</head>
<body>
<div id="mygrid"></div>
<script type="text/javascript">
    Ext.onReady(function () {
        var filters = {
            alias: 'widget.filters',
            ftype: 'filters',
            local: true,
            encode: false, // json encode the filter query

            //指定要对哪些列进行过滤
            filters: [{
                type: 'list',
                dataIndex: 'cataObjectName'
            },{
                type: 'string',
                dataIndex: 'cataNo'
            },{
                type: 'date',
                dataIndex: 'cataEndDate'
            }]
        };

        var mydata = [
            {
                "rowNum": "1",
                "cataId": "852",
                "cataNo": "10000809",
                "cataTitle": "",
                "cataObject": "4",
                "cataObjectName": "华悦购物",
                "cataType": "1",
                "cataTypeName": "默认",
                "cataeditstatus": "2",
                "cataeditstatusName": "待提交",
                "cataPublishStatus": "2",
                "cataPublishName": "已发布",
                "cataRemark": "banner广告",
                "cataObjectType": "2",
                "apptypename": "销售",
                "cataEndDate": "2014-09-27",
                "holyCreateTime": "2013-11-24 16:02:04",
                "holyUpdateTime": "",
                "catapushtime": "",
                "holyCreateUser": "lhcs"
            },
            {
                "rowNum": "2",
                "cataId": "853",
                "cataNo": "10000810",
                "cataTitle": "",
                "cataObject": "5",
                "cataObjectName": "万达广场",
                "cataType": "1",
                "cataTypeName": "默认",
                "cataeditstatus": "2",
                "cataeditstatusName": "待提交",
                "cataPublishStatus": "2",
                "cataPublishName": "已发布",
                "cataRemark": "banner广告",
                "cataObjectType": "2",
                "apptypename": "销售",
                "cataEndDate": "2015-10-01",
                "holyCreateTime": "2014-12-13 09:03:05",
                "holyUpdateTime": "",
                "catapushtime": "",
                "holyCreateUser": "lhcs"
            },
            {
                "rowNum": "3",
                "cataId": "854",
                "cataNo": "10000811",
                "cataTitle": "",
                "cataObject": "5",
                "cataObjectName": "卓越广场",
                "cataType": "1",
                "cataTypeName": "默认",
                "cataeditstatus": "2",
                "cataeditstatusName": "待提交",
                "cataPublishStatus": "2",
                "cataPublishName": "已发布",
                "cataRemark": "banner广告",
                "cataObjectType": "2",
                "apptypename": "销售",
                "cataEndDate": "2015-12-01",
                "holyCreateTime": "2015-10-08 09:03:05",
                "holyUpdateTime": "",
                "catapushtime": "",
                "holyCreateUser": "lhcs"
            },
            {
                "rowNum": "4",
                "cataId": "855",
                "cataNo": "10000812",
                "cataTitle": "",
                "cataObject": "5",
                "cataObjectName": "丹尼斯广场",
                "cataType": "1",
                "cataTypeName": "默认",
                "cataeditstatus": "2",
                "cataeditstatusName": "待提交",
                "cataPublishStatus": "2",
                "cataPublishName": "已发布",
                "cataRemark": "banner广告",
                "cataObjectType": "2",
                "apptypename": "销售",
                "cataEndDate": "2016-02-15",
                "holyCreateTime": "2016-03-25 09:03:05",
                "holyUpdateTime": "",
                "catapushtime": "",
                "holyCreateUser": "lhcs"
            }
        ];

        var store = Ext.create('Ext.data.Store', {
            fields: ["cataId", "cataNo", "cataRemark", "cataTitle", "cataObjectName", "cataeditstatusName",
                "cataPublishName", "cataEndDate", "holyUpdateTime", "catapushtime"],
            pageSize: 20,  //页容量5条数据
            //是否在服务端排序 (true的话,在客户端就不能排序)
            remoteSort: false,
            remoteFilter: false,
            data: mydata,
            sorters: [{
                //排序字段。
                property: 'ordeId',
                //排序类型,默认为 ASC
                direction: 'desc'
            }],
            autoLoad: true  //即时加载数据
        });

        var filterGrid = Ext.create('Ext.grid.Panel', {
            id:'filterGrid',
            renderTo: Ext.getBody(),
            store: store,
            height: 400,
            width:800,
            selModel: { selType: 'checkboxmodel' },   //选择框
            columns: [
                { text: '型录ID', dataIndex: 'cataId', align: 'left', maxWidth: 80 },
                { text: '型录编号', dataIndex: 'cataNo',  maxWidth: 120 },
                { text: '助记标题', dataIndex: 'cataTitle', align: 'left', minWidth: 80 },
                { text: '应用对象', dataIndex: 'cataObjectName', maxWidth: 80, align: 'left' },
                { text: '发布状态', dataIndex: 'cataPublishName', maxWidth: 80 },
                { text: '活动截止日期', dataIndex: 'cataEndDate',xtype:'datecolumn',dateFormat :'Y-m-d H:i:s' },
                { text: '更新时间', dataIndex: 'holyUpdateTime',xtype:'datecolumn',dateFormat :'Y-m-d H:i:s'},
                { text: '发布时间', dataIndex: 'catapushtime',xtype:'datecolumn',dateFormat :'Y-m-d H:i:s'}
            ],
            features:[filters],  //给grid配置filters
            bbar: [{
                xtype: 'pagingtoolbar',
                store: store,
                displayMsg: '显示 {0} - {1} 条,共计 {2} 条',
                emptyMsg: "没有数据",
                beforePageText: "当前页",
                afterPageText: "共{0}页",
                displayInfo: true
            }],
            listeners: {
                'itemclick': function (view, record, item, index, e) {
                    Ext.MessageBox.alert("标题",record.data.cataId);
                }
            },
            tbar:[
                {text:'新增',iconCls:'a_add',handler:showAlert},"-",
                {text:'编辑',iconCls:'a_edit2',handler:showAlert},"-",
                {text:'停用/启用',iconCls:'a_lock'},"-",
                {text:'发布',iconCls:'a_upload',handler:showAlert},"-",
                {text:'组织型录',iconCls:'a_edit',handler:showAlert},"-",
                {text:'管理商品',iconCls:'a_edit',handler:showAlert},"-",
                "->",{ iconCls:"a_search",text:"搜索",handler:showAlert}]
        });

        function showAlert (){
            console.log("features:",filterGrid.features);
        }
    });
</script>
</body>
</html>




举报
sfgeeq1987
发帖于2年前 0回/210阅
顶部