Question

我正在制作带有复选框的网格，并使用GitHub上的SlickGrid示例进行过滤。

Checkbox插件工作正常但我的标题行有问题。我既不能用光标也不能用制表来选择创建的输入。似乎CSS中没有任何东西可以阻止它。网格代码：

function CreateTestsGrid() {
var testGrid;
var dataView = new Slick.Data.DataView();

var checkboxSelector = new Slick.CheckboxSelectColumn({
    cssClass: "slick-cell-checkboxsel"
});

var columns = [];

var options = {
    enableCellNavigation: true,
    enableColumnReorder: false,
    multiSelect: true,
    showHeaderRow: true,
    headerRowHeight: 50,
    explicitInitialization: true

};

var defaultFormatter = function (row, cell, value, columnDef, dataContext) {
    return value;
}

var columnFilters = {};

function filter(item) {
    for (var columnId in columnFilters) {
        if (columnId !== undefined && columnFilters[columnId] !== "") {
            var c = testGrid.getColumns()[testGrid.getColumnIndex(columnId)];
            if (item[c.field] != columnFilters[columnId]) {
                return false;
            }
        }
    }
    return true;
}



return {
    init: function (parent) {

        columns.push(checkboxSelector.getColumnDefinition());
        //columns.push({ id: "id", name: "id", field: "Id", width: 120, sortable: true });
        columns.push({
            id: 'Name',
            name: 'Name',
            field: 'Name',
            width: 120
        });
        columns.push({
            id: 'Code',
            name: 'Code',
            field: 'Code',
            width: 120
        });
        columns.push({
            id: 'Mnemonics',
            name: 'Mnemonics',
            field: 'Mnemonics',
            width: 120
        });

        for (var i in columns) {
            var col = columns[i];
            if (col.formatter == undefined)
                col.formatter = defaultFormatter;
        }


        testGrid = new Slick.Grid(parent, dataView, columns, options);


        dataView.onRowsChanged.subscribe(function (e, args) {
            grid.invalidateRows(args.rows);
            grid.render();
        });

        $(testGrid.getHeaderRow()).delegate(":input", "change keyup", function (e) {
            var columnId = $(this).data("columnId");
            if (columnId != null) {
                columnFilters[columnId] = $.trim($(this).val());
                dataView.refresh();
            }
        });


        testGrid.onHeaderRowCellRendered.subscribe(function (e, args) {
            $(args.node).empty();
            if (args.column.id != '_checkbox_selector') {
                $('<input type="text">')
                    .data("columnId", args.column.id)
                    .val(columnFilters[args.column.id])
                    .appendTo(args.node)
            }
        });
        testGrid.init();

        testGrid.setSelectionModel(new Slick.RowSelectionModel({ selectActiveRow: true }));

        dataView.syncGridSelection(testGrid, true);
        testGrid.registerPlugin(checkboxSelector);

    },
    render: function (objects) {
        if (objects === null)
            return;

        dataView.beginUpdate();
        dataView.setItems(objects, "Id");
        dataView.setFilter(filter);
        dataView.endUpdate();

        var items = dataView.getItems();
        testGrid.invalidate();
    },
    selectedIds: function () {
        return dataView.mapRowsToIds(testGrid.getSelectedRows());
    }
}

}

网格创建： testsGrid = CreateTestsGrid(); testsGrid.init('#work-list-dialog'); testsGrid.render(tests);

我做错了什么？求你帮帮我。

更新：哦，是的，我开始明白了。如果我创建两个相等的网格，其中一个在JQuery.Dialog中创建，那么第一个（在对话框中）有这个问题，第二个是正确的。

更新2：Premshankar Tiwari绝对是对的。问题出在z-index中，我只是说错了。我在Google网上论坛主题中找到了这个解决方案（由于我在SO中的声誉很低，我在评论中发布了帖子链接），而且这个问题还有很多。问题解决了。

SlickGrid的过滤器输入无法聚焦

0 个答案: