Question

我使用Dgrid选择网格作为使用复选框选择内容的网格。但是，只有树的子节点应显示复选框，因为父项只是类别而无法选择。之前我使用了编辑器插件，但是它在清除选择时遇到了困难（具体来说，＆＃34; clearSelection＆＃34;网格方法什么都没做）。我切换到选择器插件，所以现在选择和取消选择行工作正常，但现在我似乎找不到隐藏某些行而不是其他行的复选框的方法。

原始代码

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}]
});

我使用＆＃34; editOn＆＃34;编辑器的参数隐藏复选框，但选择器插件只有＆＃34;禁用＆＃34;参数，根本不隐藏该字段。

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

Answer 1

查看dgrid/selector源代码，无论是否已禁用，似乎始终会创建输入并将其添加到DOM。据推测，这是为了使其足够灵活，可以动态启用和禁用复选框，而无需不断重新创建DOM节点。虽然无法阻止渲染这些节点，但可以使用CSS隐藏它们，因为单元节点被赋予格式为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选择器

1 个答案: