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

Posted 2023-02-16

【中文标题】根据行内容显示或隐藏 DGrid 选择器

【英文标题】：Make DGrid selector shown or hidden based on row content

【发布时间】：2015-04-23 00:52:33

【问题描述】：

我将 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”参数隐藏复选框，但是选择器插件只有“禁用”参数，根本没有隐藏字段。

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

【参考方案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;