Dojo dgrid：在网格的不可见部分选择没有突出显示答案

【问题标题】：Dojo dgrid: no highlight on selection in invisible part of the gridDojo dgrid：在网格的不可见部分选择没有突出显示
【发布时间】：2017-07-10 15:33:32
【问题描述】：

我在 OnDemandGrid(dojo 1.12.1) 中的选择有问题，我需要一些帮助。我的网格的一部分在创建时被隐藏，这使得选择“单一”的工作很奇怪，选择仅在内容的可见部分上是活动的。当我滚动时，我的行 img1 上没有更多亮点。但是，如果我对列应用排序，则内容会刷新并且整行变得可选择。

此页面上的示例适用于 selectionMode 中的 EnhancedGrid：“单一”，加载后内容的隐藏部分没有错误。 https://dojotoolkit.org/reference-guide/1.10/dojox/grid/EnhancedGrid/plugins/Selector.html，有什么方法可以实现吗？

在创建 OnDemandGrid 以解决问题时我可以做些什么？我试过放一个css参数box-sizing:border-box，但对我没有帮助。

enchancedgrid 有一些类似的问题，但是解决方案对我不利，可能是因为我使用的是 OnDemandGrid ( dojo EnchancedGrid 项目不会在视图的不可见部分以编程方式选择）

require([
     ...
    'dojo/store/Memory',
    'dgrid/OnDemandGrid',
    'dgrid/Selection',
    'dgrid/extensions/ColumnResizer',
    'dgrid/extensions/DijitRegistry'

], function (Memory, OnDemandGrid, Selection, ColumnResizer, DijitRegistry ) {
     var columNs = {First_Name: {label: 'First Name'},
                    Last_Name: {label: 'Last Name'},
                    hello: {label: 'hello'},
                    age: {label: 'age'},
                    size: {label: 'size'},
                    name: {label: 'name'},
                    code: {label: 'code'},
                    id: {label: 'id'},
                    mdp: {label: 'mdp'},
                    username: {label: 'username'},
                    grid: {label: 'grid'}
                    };

   var store = new Memory({ data: createData() });  

   var CustomGrid = declare([OnDemandGrid, Selection, ColumnResizer, DijitRegistry]);

   var grid = new CustomGrid({
                        selectionMode: 'single',
                        cellNavigation: false, 
                        store: store, 
                        columns: columNs
                    }, 'grid');          
   grid.startup();



   function createData() {
        var data = [];
        var column;
        var i;
        var item;

        for (i = 0; i < 50; i++) {
            item = {};
            for (column in { First_Name: 1, Last_Name: 1, hello: 1, age: 1, size: 1, name: 1, code: 1, id: 1, mdp: 1, username: 1, grid: 1 }) {
                item.id = i;
                item[column] = column + '_' + (i + 1);
            }
            data.push(item);
        }

        return data;
    }
});

//css
.dgrid {
    height: 25em !important;
    width: 100%;
}
.dgrid .dgrid-scroller {
    margin-top: 24px !important; 
}
.dgrid-cell { 
    width: 70px !important;
}
.dgrid-column-set-scroller {
display: inline-block;
overflow-x: auto;
overflow-y: hidden;

}

【问题讨论】：

您好，欢迎来到 StackOverflow。请花一些时间阅读帮助页面，尤其是名为"What topics can I ask about here?" 和"What types of questions should I avoid asking?" 的部分。更重要的是，请阅读the Stack Overflow question checklist。您可能还想了解Minimal, Complete, and Verifiable Examples。

标签： dojo selection dgrid

【解决方案1】：

我无法重现您的问题。看小提琴here。

一个不同之处在于我用 dstore/Memory 替换了 dojo/store/Memory，这给了我一个错误（如果您没有收到此错误，可能您使用的 dgrid 版本比 0.4 旧？）。

然后小提琴正在使用 dojo 1.12.2（应该与 1.12.1 没有区别）和 dgrid / dstore 1.1.0（如果您使用的是旧版本，这可以解释差异）。它还使用 dijit 的 claro.css 和 dgrid 的 dgrid.css。请参阅下面（从 jsfiddle 中提取）我修改的源代码部分：

require({
    packages: [
        {
            name: 'dgrid',
            location: '//cdn.rawgit.com/SitePen/dgrid/v1.1.0'
        },
        {
            name: 'dstore',
            location: '//cdn.rawgit.com/SitePen/dstore/v1.1.0'
        }
    ]
},[
            "dojo/_base/declare",
            'dstore/Memory',
            'dgrid/OnDemandGrid',
            'dgrid/Selection',
            'dgrid/extensions/ColumnResizer',
            'dgrid/extensions/DijitRegistry'

], function (declare, Memory, OnDemandGrid, Selection, ColumnResizer, DijitRegistry ) {

【讨论】：