根据行内容显示或隐藏 DGrid 选择器

Question

我将 Dgrid 选择网格用于使用复选框来选择内容的网格。但是，只有树的子节点应该显示复选框，因为父节点只是类别，不能被选中。以前我为此使用了编辑器插件，但它在清除选择方面造成了困难（具体来说，网格的 "clearSelection" 方法什么也没做）。我切换到选择器插件，所以现在选择和取消选择行工作正常，但现在我似乎无法找到一种方法来隐藏某些行而不是其他行的复选框。

原码

var columns = [
    editor({
        label: " ",
        field: "itemSelected",
        sortable: false,
        width: 33,
        canEdit: function(object) {
            // only add checkboxes for child objects
            return object.type === "child";
        }
    }, "checkbox"),
    tree({
        label: "Item",
        field: "shortItemId",
        width: 150, 
        shouldExpand: function() {
            return 1;
        }
    }),
    {
        label: "Grouping Name",
        field: "groupingName"
    }
];

var itemGrid = new SelectionGrid({
    store: itemStore,
    style: {
        width: '99%',
        height: '99%'
    },
    columns: columns,
    sort: [{attribute: "shortItemId", descending: false}]
});

我用编辑器的"editOn"参数隐藏了复选框，但是selector插件只有"disabled"参数，根本没有隐藏字段

有没有办法让我像使用编辑器一样使用选择器隐藏复选框？

Answer 1

查看 dgrid/selector 源代码，似乎输入总是被创建并添加到 DOM，无论它是否被禁用。据推测，这是为了让它足够灵活，可以动态启用和禁用复选框，而无需不断地重新创建 DOM 节点。虽然无法阻止这些节点被渲染，但可以使用 CSS 隐藏它们，因为单元格节点被赋予 class 格式 field-{fieldName} （或在此特殊情况，field-itemSelected):

// JavaScript
var columns = [
    selector({
        label: " ",
        field: "itemSelected",
        sortable: false,
        width: 33,
        // Disable any checkbox that is not of type "child"
        disabled: function (item) {
            return item.type !== 'child';
        }
    }),
    ...
];

/* CSS */
.field-itemSelected input[disabled] {
    display: none;
}

根据行内容显示或隐藏 DGrid 选择器

Make DGrid selector shown or hidden based on row content

dojo

grid

selection

selector

dgrid