Slickgrid - 一键复选框？

Question

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

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

Answer 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 + '" />';
}

希望有帮助。

Answer 2

我的做法非常简单。

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

   函数attachPluginsToColumns(columns) {
       $.each(列, 函数 (索引, 列) {
           if (列.强制) {
               列.validator = requiredFieldValidator;
           }
           if (列.可编辑) {
               if (column.type == "text" && column.autocomplete) {
                   column.editor = Slick.Editors.Auto;
               }
               else if (column.type == "复选框") {
                   //编辑器已被禁用。   
                   //column.editor = Slick.Editors.Checkbox;
                   column.formatter = Slick.Formatters.Checkmark;
               }
           }
       });    
   

2. 下一步是在您正在开发的自定义 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);
        }
    });

现在，只需单击一次即可更改复选框的值并保留它。

Answer 3

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

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

Answer 4

我发现解决这个问题的唯一方法是编辑 slick.checkboxselectcolumn.js 插件。我喜欢订阅方法，但它没有为我附加任何单选按钮的侦听器。

所以我所做的就是编辑函数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

在评论中搜索我的用户名

Answer 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 功能（例如过滤），则需要执行额外的工作来通过此更改更新数据视图。 我还没想出如何做到这一点......

Answer 6

我设法让单击编辑器与 DataView 一起工作，相当黑客。

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

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

问题是，单击 CheckBoxCellFormatter 复选框，然后该事件会生成 CheckBoxCellEditor 代码，该代码会用新的复选框替换该复选框。如果您只是在该选择器上调用 jquery 的 .click() ，您将再次触发 CheckBoxCellEditor 事件，因为 slickgrid 尚未取消绑定最初​​让您到达那里的处理程序。 setTimeout 在删除该处理程序后触发单击（我担心计时问题，但我无法在任何浏览器中生成任何问题）。

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