【问题标题】:Best way to use checkboxes inside a Extjs Pivot Grid在 Extjs Pivot Grid 中使用复选框的最佳方式
【发布时间】:2019-09-03 06:03:17
【问题描述】:

我有一个透视网格,显示用户是否具有“创建、读取、更新、删除”权限,用户以这种方式分组 部门 > 机构 > 部门 > 用户,我希望用户能够编辑此字段.

我已经尝试过使用渲染器:

aggregate: [{
    renderer: function(value, record, dataIndex, cell, column) {
        var id = Ext.id();
        Ext.defer(function() {
            Ext.widget('checkbox', {
                renderTo: id,
                checked: value,
                listeners: {
                    change: {
                        fn: function(event, target) {
                            //some function here
                        }
                    }
                }
            });
        }, 100);
        return Ext.String.format('<div id="{0}"></div>', id);
    },
    aggregator: 'aggCheckBoxR',
    dataIndex: 'Incluir',
    header: 'Incluir'
}]

并带有一个小部件列:

aggregate: [{
    aggregator: 'aggCheckBoxR',
    column: {
        xtype: 'widgetcolumn',
        widget: {
            xtype: 'checkbox',
            listeners: {
                change: function(cb) {
                        //some function here
                }
            }
        }
    },
    dataIndex: 'Incluir',
    header: 'Incluir'
}]

我的聚合器:

aggCheckBoxR: function(records, measure, matrix, rowGroupKey, colGroupKey) {
    if (records.length > 1) {
        let checkAllTrue = true;
        for (var i = 0; i < records.length; i++) {
            if (records[i].get('Incluir') === false || records[i].get('Incluir') === 0) {
                checkAllTrue = false;
            }
        }
        return checkAllTrue;
    } else {
        return records[0].get('Incluir');
    }
}

复选框出现在网格上,但我的问题是数据“不保留”,每当我在枢轴网格上展开或折叠左轴时,复选框的值都会返回到其原始值,我该如何保留这些数据?

已经尝试手动更新记录

change: function(cb) {
    var nomeCmp = cb.getWidgetRecord().data._compactview_;
    Ext.getStore('acesso.ColabStore').findRecord('Nome', nomeCmp).data.Incluir = true;
}

但还是不行。

编辑:必须将列对象事件侦听器更改为:

{
    xtype: 'widgetcolumn',
    widget: {
        xtype: 'checkbox',
        listeners: {
            afterrender: function(component, eOpts) {
                console.log('after,render');
                component.getEl().on('change', function(e, el) {
                    console.log('change func here');
                })
            }
        }
    }
}

有了这个,只有当用户选中复选框时才会触发更改事件,最后,我可以使用 norbeq's回答

【问题讨论】:

    标签: extjs extjs6 pivot-grid


    【解决方案1】:

    您可以使用以下方法手动更新记录:

    record.set('Incluir',true);

    如果您不想将更改发送到服务器:

    record.commit();

    【讨论】:

    • 这条记录,是来自透视网格存储,还是来自小部件记录?因为widgetrecord没有'Incluir'或其他值,只有'c1,c2,c3...'
    • 我几乎得到了想要的结果,但是复选框的更改事件被触发了两次,如何防止第二个被触发?
    • 所以也许你应该只在更改监听器中执行commit。你能附上小提琴中的代码吗?
    • 不知道该怎么做,只是展开和折叠左轴会触发复选框的更改事件,我想在用户选中复选框时向我的后端发出 POST 请求,似乎是它呈现复选框它触发更改事件,我需要一个点击事件或其他东西,所以它只会在用户点击复选框时被触发
    • 我不知道您如何与后端通信的附加代码。您可以在更改事件中使用Ext.Ajax 或store.sync。
    猜你喜欢
    • 1970-01-01
    • 2022-11-28
    • 1970-01-01
    • 1970-01-01
    • 2010-09-08
    • 1970-01-01
    • 2010-12-25
    • 2016-09-20
    • 2013-12-03
    相关资源
    最近更新 更多