Slickgrid - 一键式复选框？

Posted 2023-02-22

【中文标题】Slickgrid - 一键式复选框？

【英文标题】：Slickgrid - One-click checkboxes?

【发布时间】：2011-10-19 03:04:40

【问题描述】：

当我在 Slickgrid 中创建一个复选框列（通过使用格式化程序/编辑器）时，我注意到需要两次单击才能与之交互（一次聚焦单元格，一次与复选框交互）。 （这很有意义）

但是，我注意到我可以一键与复选框选择器插件（用于选择多行）进行交互。有什么办法可以让我的所有复选框都以这种方式运行？

【参考方案1】：

对于更多的读者，我通过在点击事件上修改网格数据本身来解决这个问题。将布尔值设置为相反，然后格式化程序将显示单击或未单击的复选框。

grid.onClick.subscribe (function (e, args)

    if ($(e.target).is(':checkbox') && options['editable'])
    
        var column = args.grid.getColumns()[args.cell];

        if (column['editable'] == false || column['autoEdit'] == false)
            return;

        data[args.row][column.field] = !data[args.row][column.field];
      
);

function CheckboxFormatter (row, cell, value, columnDef, dataContext)

    if (value)
        return '<input type="checkbox" name="" value="'+ value +'" checked />';
    else
        return '<input type="checkbox" name="" value="' + value + '" />';

希望对你有帮助。

【讨论】：

如果您使用的是 DataView，那么您应该使用 dataView.getItem(args.row)[column.field] = !dataView.getItem(args.row)[column.field] 而不是数据[args.row][column.field] = !data[args.row][column.field]

非常感谢@Ako。你节省了我的时间:)

【参考方案2】：

我的做法非常简单。

第一步是您必须为您的复选框禁用编辑器处理程序。 在我的项目中，它看起来像这样。我有一个 slickgridhelper.js 来注册插件并使用它们。

function attachPluginsToColumns(columns) 
    $.each(columns, function (index, column) 
        if (column.mandatory) 
            column.validator = requiredFieldValidator;
        
        if (column.editable) 
            if (column.type == "text" && column.autocomplete) 
                column.editor = Slick.Editors.Auto;
            
            else if (column.type == "checkbox") 
                //Editor has been diasbled.   
                //column.editor = Slick.Editors.Checkbox;
                column.formatter = Slick.Formatters.Checkmark;
            
        
    );    

下一步是在您正在开发的自定义 js 页面中注册一个 onClick 事件处理程序。

grid.onClick.subscribe(function (e, args) 

        var row = args.grid.getData().getItems()[args.row];
        var column = args.grid.getColumns()[args.cell];

        if (column.editable && column.type == "checkbox") 
            row[column.field] = !row[column.field];
            refreshGrid(grid);
        
    );

现在只需单击一下即可更改复选框的值并将其保留。

【参考方案3】：

为“onClick”事件注册一个处理程序，并对那里的数据进行更改。 见http://mleibman.github.com/SlickGrid/examples/example7-events.html

grid.onClick.subscribe(function(e, args) 
    var checkbox = $(e.target);
    // do stuff
);

【讨论】：

嗨锡。这个方法如何给我单选按钮上的点击事件？我通过编辑 handleClick(e, args) 解决了这个问题。我会发布我的方法。

【参考方案4】：

我发现解决它的唯一方法是编辑slick.checkboxselectcolumn.js 插件。我喜欢 subscribe 方法，但它没有给我任何单选按钮的监听器。

所以我所做的是编辑函数handleClick(e, args) & handleHeaderClick(e, args)。 我添加了函数调用，在我的 js 文件中我只是做了我想做的事。

function handleClick(e, args) 
    if (_grid.getColumns()[args.cell].id === _options.columnId && $(e.target).is(":checkbox")) 
        ......
        //my custom line
        callCustonCheckboxListener();
        ......
    

---

function handleHeaderClick(e, args) 
    if (args.column.id == _options.columnId && $(e.target).is(":checkbox")) 
        ...
        var isETargetChecked = $(e.target).is(":checked");
        if (isETargetChecked) 
            ...
            callCustonHeaderToggler(isETargetChecked);
         else 
            ...
            callCustonHeaderToggler(isETargetChecked);
        
        ...
    

代码

pastebin.com/22snHdrw

在 cmets 中搜索我的用户名

【讨论】：

有趣。但是，很难看出应该在哪里插入自定义行。您可以将修改后的slick.checkboxselectcolumn.js 或类似pastebin.com 的补丁上传给其他人重复使用吗？

【参考方案5】：

我使用onBeforeEditCell 事件为我的布尔字段“can_transmit”实现了这一目标

基本上捕获一个编辑单元格点击你想要的列，自己进行更改，然后返回false停止单元格编辑事件。

grid.onBeforeEditCell.subscribe(function(row, cell)                 
            if (grid.getColumns()[cell.cell].id == 'can_transmit') 
                if (data[cell.row].can_transmit) 
                   data[cell.row].can_transmit = false;
                
                else 
                    data[cell.row].can_transmit = true;
                
                grid.updateRow(cell.row);
                grid.invalidate();
                return false;
            

这对我有用。但是，如果您正在使用 DataView 功能（例如过滤），则需要额外的工作来使用此更改更新数据视图。 我还没想好怎么做……

【参考方案6】：

我通过调用

设法让单击编辑器与 DataView 一起工作得相当笨拙

setTimeout(function() $("theCheckBox").click(); ,0);

在我的 CheckBoxCellEditor 函数中，并调用 Slick.GlobalEditorLock.commitCurrentEdit();单击 CheckBoxCellEditor 创建的复选框时（通过该 setTimeout）。

问题是 CheckBoxCellFormatter 复选框被单击，然后该事件产生 CheckBoxCellEditor 代码，该代码将复选框替换为新复选框。如果您只是在该选择器上调用 jquery 的 .click() ，您将再次触发 CheckBoxCellEditor 事件，因为 slickgrid 并没有解除首先让您到达那里的处理程序。 setTimeout 在删除该处理程序后触发单击（我担心时间问题，但我无法在任何浏览器中生成任何内容）。

抱歉，我无法提供任何示例代码，我所拥有的代码是特定于实现的，可用作通用解决方案。