ext中带单选框的grid在初始化的时候自动选中某些行

最新推荐文章于 2023-04-13 16:58:26 发布

原创最新推荐文章于 2023-04-13 16:58:26 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

Ext.js 专栏收录该内容

32 篇文章

订阅专栏

本文介绍如何使用ExtJS实现网格数据加载时自动选中特定行，并展示了一个包含姓名、价格等字段的示例表格。通过监听beforerender事件和store的load事件来实现选中指定的行。

1，返回的n条数据中的m条数据设置了被选中，想在初始化的时候让这一行数据被选中；

2，效果图如下

3，测试数据

[
  {
    'name':'张三',
    price:'100块',
    change:'no',
    code:'1'
  },
  {
    'name':'李四',
    price:'1000块',
    change:'yes',
    code:'1'
  },
  {
    'name':'王五',
    price:'10000块',
    change:'yes',
    code:'0'
  }
]

4，主要代码

Ext.define('app.view.common.RowChangeBgColor', {
    extend: 'Ext.grid.Panel',
    xtype: 'row-change-bg-grid',
    reference: 'RowChangeBgColor',
    id: 'RowChangeBgColor',
    title: 'change Grid',
    viewModel: {
        data: {
            code: []
        }
    },
    buttons: [
        {
            text: '选中',
            handler: function () {
                this.up('grid').getSelectionModel().select(0, true)
            }
        }
    ],
    selModel: {
        type: 'checkboxmodel',
        checkOnly: true
    },
    viewConfig: {

        stripeRows: true,
        forceFit: true,
        scrollOffset: 0,
        enableTextSelection: true,
        expandOnly: true,
        listeners: {
            beforerender: function (grid, eOpts) {
                grid.ownerGrid.store.on("load", function () {
                    var codearr = grid.ownerGrid.viewModel.get('code');
                    if (codearr.length) {
                        for (var i = 0, len = codearr.length; i < len; i++) {
                            var index = parseInt(codearr[i]);
                            if (index >= 0) {
                                grid.ownerGrid.getSelectionModel().select(index, true);
                            }
                        }
                    }
                    codearr = [];
                });
                grid.ownerGrid.getStore().load();

            },
            selectionchange: function (grid, record, eOpts) {
            }
        },
        getRowClass: function (record, rowindex, rowParams, store) {
            var grid = this.ownerGrid;
            if (record.data.code == 1) {
                grid.viewModel.data.code.push(rowindex);
            }
            var eCode = record.data.change;//标识出状态的那一列
            if (eCode == 'yes') {
                record.data.asd = '应付';
                return 'x-grid-record-warning';
            }
        }
    },

    store: Ext.create("Ext.data.Store",
        {
            deferRowRender: false,//不执行默认的render代码
            proxy: {
                type: 'ajax',
                url: 'resources/data/gridchange.json'
            },
            root: {
                text: 'All',
                id: 'all',
                expanded: true
            }
        }),

    columns: [{
        text: 'name',
        flex: 1,
        dataIndex: 'name'
    }, {
        text: 'price',
        flex: 1,
        dataIndex: 'price'
    }, {
        text: '是否作废',
        flex: 1,
        dataIndex: 'change'
    }, {
        text: '废',
        flex: 1,
        dataIndex: 'asd'
    }, {
        text: '废',
        flex: 1,
        dataIndex: 'code'
    }
    ]
});