【问题标题】:How to get the list of selected rows in Dgrid selection mixin如何在Dgrid selection mixin中获取选定行的列表
【发布时间】:2013-09-11 10:27:39
【问题描述】:

我在 Dgrid ondemandgrid 中使用 Selector 和 Selection Mixin。我使用复选框作为选择器。以下是我的问题。

  1. 如何在 html 按钮单击时获取 javascript 中选中行的列表?我知道有一个 dgrid-select 和取消选择事件,但我想要按钮单击事件中所有选定行的列表。李>
  2. 目前,如果我点击任意位置的一行,复选框就会被选中。但我只想在点击复选框时选择该行。如何实现这一点?

这是我的代码

             require([
        "dgrid/OnDemandGrid",
        "dojo/store/JsonRest",
        "dojo/dom",
        "dojo/dom-style",
        "dojo/_base/declare",
        "dgrid/extensions/ColumnResizer",
        "dgrid/Selection", 
        "dgrid/selector"
    ], function (OnDemandGrid,JsonRest,dom,domStyle,declare,ColumnResizer,Selection, selector) {
            var Layout = [
                 selector({ label: selector({}), selectorType: "checkbox" }),
                 {field: 'srno',label: 'Sr No'},
                 {field: "Name",label: "name"}
            ];
            jsonstore = new JsonRest({target: url,idProperty: "srno"});
            grid = new(declare([OnDemandGrid,ColumnResizer,Selection]))({
                store: jsonstore,
                columns: Layout,
                minRowsPerPage : 40,
                maxRowsPerPage : 40,
                keepScrollPosition : true,
                allowSelectAll: true,
                loadingMessage: "Loading data...",
                noDataMessage: "No results found."
            }, "grid");
            domStyle.set(dom.byId("grid"),"height","210px");                
            grid.startup();
            grid.on("dgrid-select", function(event){
                    //
            });
            grid.on("dgrid-deselect", function(event){
                    //
            });

        });

【问题讨论】:

    标签: dojo grid dgrid


    【解决方案1】:

    以下是您问题的解决方案:

        var Layout = [
                 selector({ label: '', sortable: false}),
                 {field: 'srno',label: 'Sr No'},
                 {field: "Name",label: "name"}
            ];
            jsonstore = new JsonRest({target: url,idProperty: "srno"});
            grid = new(declare([OnDemandGrid,ColumnResizer,Selection]))({
                store: jsonstore,
                columns: Layout,
                minRowsPerPage : 40,
                maxRowsPerPage : 40,
                selectionMode: "none",
                deselectOnRefresh: false,
                keepScrollPosition : true,
                allowSelectAll: true,
                loadingMessage: "Loading data...",
                noDataMessage: "No results found."
            }, "grid");
    
    
    
        new Button({
            label: "Ok",
            onClick: function () {
    
                 // here you can use grid.selection to get the list of selected rows.
                 // it is an object with { 'rowid': true} format  for example, like below 
                array.forEach(grid.store.data, function (item) {
                    if (grid.selection[item.id]) {
                        //your code to handle this selected item
                    }
                });
            })
        }, 'button');
    

    【讨论】:

    • 这不适用于 json rest store,因为它没有属性“.data”。 json rest store 不一定会从服务器下载所有数据。
    【解决方案2】:

    对于 1:声明一个 var selection = []; 那么,

       grid.on("dgrid-select", function(event){
                var selected = grid.selection;
            if (selected) {
                for (row in selected) {
                    selection.push(row);
                }
            }
        });
    

    并在 dgrid-deselect 上拼接 然后在单击按钮时访问数组。

    对于 2:用selectionMode: "none", 定义网格 来自文档:https://github.com/SitePen/dgrid/wiki/Selection

    【讨论】:

    • 需要仔细测试是否存在于 grid.selection 数组(选中的行)中,一个项目可以在选择数组中,值为 false 表示该项目未被选中。
    • 还需要注意大型数据集,其中网格中的当前视觉呈现可能不包含存储中的所有数据。此网格不是自动高度的,因此它将使用虚拟滚动并仅在“视口”内呈现数据的子集。 'grid.selected' 数组仅包含已呈现行的选择状态(true 表示选中,false 表示未选中)。应该使用 grid.isSelected(item) 方法来测试一个项目是否被选中,该方法还考虑了列标题中的主复选框,用于尚未呈现的项目。
    【解决方案3】:
    this.grid.on(".dgrid-row:dblclick", function(vet) {
        // your selected row
        var row = self.grid.row(vet);
    });
    

    【讨论】:

    • 用代码回答应该解释代码的位置/目的(你改变了什么,如何使用它,等等)。
    【解决方案4】:

    您可以在此处理程序中获取选定的行。 selectedRows 变量为您提供网格中的任何选定项目

       window.grid = new (declare([Grid, ColumnResizer, Selection]))({
                    store: jsonstore,
                    columns: Layout,
                    minRowsPerPage: 40,
                    maxRowsPerPage: 40,
                    keepScrollPosition: true,
                    allowSelectAll: true,
                    loadingMessage: "Loading data...",
                    noDataMessage: "No results found."
                }, "grid");
    
                window.grid.on("dgrid-select", function (event) {
    
    
                    var selectedRows = event.rows;
    
                });
    

    【讨论】:

    • 对于取消选择的行 === window.grid.on("dgrid-deselect",
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2023-03-11
    • 2017-01-07
    • 1970-01-01
    • 2019-03-08
    • 1970-01-01
    • 2017-08-14
    相关资源
    最近更新 更多