0

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

过滤器示例

复选框示例

复选框插件工作正常，但标题行有问题。我既不能用光标也不能用制表选择创建的输入。似乎 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 Groups Theme 中找到了解决方案（由于我在 SO 中的声誉较低，我会在评论中发布链接），关于这个问题有很多。问题解决了。

4

0 回答 0