jquery - SlickGrid - 使用 grid.onAddNewRow 处理 DataView

Question

我正在使用 SlickGrid 生成数据网格。数据通过 jQuery AJAX 调用获取。根据https://stackoverflow.com/a/11611477/2294855的建议我能够处理响应数据并将其设置到 DataView。但是当我将网格选项设置为“enableAddRow:true”时，我的问题出现了。

在这里，当我尝试在新行中添加某些内容时，每当我在任何单元格中插入某些内容并切换到其他单元格时，数据都不在那里。例如:

我对网格的声明:

var categories, categoryList, subjectList, data, grid;
var url = "{{ url('get_data', {'_prefix': app.request.get('_prefix')}) }}";

var dataView = new Slick.Data.DataView();

var columns = [
    {id: "serial", name: "Ordnungsnummer", field: "serial", editor: Slick.Editors.Integer, validator: requiredFieldValidator, sortable: true},
    {id: "category", name: "Kategorie", field: "category", editor: Slick.Editors.categoryDropdown, formatter: Slick.Formatters.category, validator: requiredFieldValidator, sortable: true},
    {id: "subject", name: "Themenbereich", field: "subject", editor: Slick.Editors.subjectDropdown, formatter: Slick.Formatters.subject, validator: requiredFieldValidator, sortable: true},
    {id: "week", name: "Schulwoche", field: "week", editor: Slick.Editors.Integer, validator: requiredFieldValidator, sortable: true},
    {id: "note", name: "Anmerkung", field: "note", editor: Slick.Editors.LongText, validator: requiredFieldValidator}
];

var options = {
    editable: true,
    enableAddRow: true,
    enableCellNavigation: true,
    asyncEditorLoading: true,
    forceFitColumns: true,
    topPanelHeight: 25
};

grid = new Slick.Grid("#myGrid", dataView, columns, options);

// wire up model events to drive the grid
dataView.onRowCountChanged.subscribe(function (e, args) {
    grid.updateRowCount();
    grid.render();
});

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

grid.onAddNewRow.subscribe(function (e, args) {
    var item = args.item;
    var column = args.column;
    grid.invalidateRow(dataView.length);
    dataView.push(item);
    grid.updateRowCount();
    grid.render();
});

function fetchData() {

    $.ajax({
        type: "POST",
        url: url,
        dataType: "json",
        data: {schoolclass: {{ schoolclass }}},
        success: function( response ) {
            createGrid(response);
        }
    });
}

function requiredFieldValidator(value) {
    if (value == null || value == undefined || !value.length) {
        return {valid: false, msg: "This is a required field"};
    }
    else {
        return {valid: true, msg: null};
    }
}

function createGrid(response) {

    data = response.data;

    categories = response.categories;
    categoryList = generateCategoryList(categories);
    subjectList = generateSubjectList(categories);



    dataView.beginUpdate();
    dataView.setItems(data);
    console.log(data);
    dataView.endUpdate();
}

function generateCategoryList(categories) {
    var categoryList = {};

    $.each(categories, function(index, item) {
        categoryList[item.id] = item.name;
    });

    return categoryList;
}

function generateSubjectList(categories) {
    var subjectList = {};

    $.each(categories, function(index, category) {
        $.each(category.subjects, function(index, subjects) {
            subjectList[subjects.id] = subjects.name;
        });
    });

    return subjectList;
}

function sendData(data) {
    $.ajax({
        type: "POST",
        url: url,
        dataType: "json",
        data: data,
        success: function( response ) {
            createGrid(response);
            alert("data successfully saved");
        },
        error: function(textStatus, errorThrown) {
            alert("sorry could not save the data");
            console.log("text Status = "+ textStatus);
            console.log("Error Thrown = "+ errorThrown);
        }
    });
}

$(function () {

    fetchData();

    $("#save").click(function() {

        var newData = JSON.stringify(grid.getData());

        sendData(newData);
    });
})

非常感谢任何帮助。

Answer 1

为了解决当前的问题，数据不存在的原因是 onAddNewRow 处理程序中的 dataView.push(item);。 使用addItem数据 View 的功能。

我假设您的数据的每个项目都有一个 id 属性，否则数据将不会显示。因此，您还需要通过将新数据元素添加到处理程序中的 var item = args.item; 来解决需要唯一 id 的问题。

如果您的数据元素有一个现有字段，以 serial 为例，该字段在所有元素中都是唯一的，那么您可以将数据 View 配置为使用该字段作为所需的 id，方法是将其传递到setItems功能。届时，您无需手动分配 id。

此外，由于 grid.getData()，您在保存数据时会遇到问题。要从数据 View 中获取数据，请使用grid.getData().getItems()。