【问题标题】:Disabling a row in a DOJO / Gridx grid禁用 DOJO / Gridx 网格中的一行
【发布时间】:2014-03-17 17:27:32
【问题描述】:

我在 Gridx 中创建了一个网格,其中列出了一堆用户。单击网格中的 ROW(该行的任何部分)时,会弹出一个对话框并显示有关该用户的其他信息以及可以为该用户执行的操作(禁用用户、忽略用户等) - 当其中一个从弹出窗口中选择选项,我想禁用该行。获取行的逻辑等我可以处理,但我不知道如何使网格行实际“显示”禁用以及如何使该行不再可点击。

有没有简单的方法来做到这一点?如果您不熟悉 gridx,也可以使用适用于 EnhancedGrids 或其他 Dojo 网格的解决方案。

【问题讨论】:

  • 您如何阅读行点击次数?你在听 onRowClick 事件吗?你说的残疾是什么意思?
  • 是的,我正在监听 onRowClick 事件。当我说看起来被禁用时,我的意思是它应该“看起来”像它被禁用 - 就像它变灰或褪色,就像按钮看起来褪色一样,你不能点击它。

标签: grid dojo dojo.gridx


【解决方案1】:

好吧,既然我有更多信息,这里是一个解决方案:

在 Grid 小部件或其父代码中保留迄今为止已禁用的所有行的列表。然后在 onRowClick 监听器上我会写这样的代码:

on(grid, "onRowClick", function(e) {
    if(disabledRows[rowIndex]) {
        return;
    }

    // Do whatever pop up stuff you want and after
    // a user selects the value, you can "disable"
    // your row afterwards by adding it to the disabled
    // list so that it can no longer be clicked on.

    var rowIndex = e.rowIndex;
    disabledRows[rowIndex] = true;

    // This is just some random class I made up but
    // you can use css to stylize the row however you want
    var rowNode = e.rowNode;
    domClass.add(rowNode, "disabled");

});

请注意,domClass 是我命名的“dojo/dom-class”。希望这会有所帮助!

【讨论】:

    【解决方案2】:

    这可能不是您正在寻找的内容:

    如果您想通过自己的过滤器功能隐藏一行或多行,您可以在 DOM 中的这些行中添加您自己的类以不显示。在这里,我向您展示了一个函数,用于仅显示那些在您的过滤器列表中的可选字段/列中具有值的行。

    function hideRowFilter(gridId, fieldName, filterList)
    {
        var store = gridId.store;
        var rowId;
        store.query(function(object){
            rowId = gridId.row(object.id,true).node();
            if  (filterList.indexOf(object[fieldName]) == -1)
                domClass.add(rowId, "noDisplay"); // anzeigen
            else
                domClass.remove(rowId, "noDisplay"); // verstecken
        });
    }
    

    CSS:

    .noDisplay { display: none; }
    

    因此,例如,我可以通过此调用仅显示 myState 为 3 或 4 的条目:

    hideRowFilter(gridId, 'myState', [3, 4]);
    

    请注意,domClass 是我命名的“dojo/dom-class”

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2015-10-13
      • 1970-01-01
      • 2017-12-13
      • 1970-01-01
      相关资源
      最近更新 更多