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

我做的方式很简单。

第一步是您必须禁用复选框的编辑器处理程序。在我的项目中它看起来像这样。我有一个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);
        }
    });

现在只需单击一下就可以更改复选框的值并保留它。

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）＆amp; 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将触发单击（我担心时间问题，但我无法在任何浏览器中生成任何内容）。

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

Slickgrid - 一键复选框？

6 个答案: