Slickgrid 按需添加新行答案

【问题标题】：Slickgrid add new row on demandSlickgrid 按需添加新行
【发布时间】：2012-05-02 15:28:52
【问题描述】：

有没有办法按需向 slickgrid 添加新行？例如，在页面上有一个按钮，点击后会显示新行。

【问题讨论】：

【解决方案1】：

使用 dataView.addItem(params) 可以轻松完成，只需将 params 替换为您的参数..

function addNewRow(){
   var item = { "id": "new_" + (Math.round(Math.random() * 10000)), "Controller": tempcont, "SrNo1": tempsrno };             
   dataView.addItem(item);
}

这里id、Controller、SrNo1是columm的id

【讨论】：

【解决方案2】：

您可以通过将“onAddNewRow”侦听器订阅到您的网格对象来动态添加行，例如单击按钮。正如许多人建议的那样，最好使用dataView plugin 与您的数据交互。请注意，您需要将“enableAddRow”选项设置为“true”。

首先，DataView 要求在添加新行时设置唯一的行“id”。计算这一点的最佳方法是使用 dataView.getLength() ，它将为您提供网格中当前存在的行数（我们将用作新行的 id）。 DataView addItem 函数需要一个项目对象。所以我们创建了一个空的 item 对象并将 id 附加到它上面。

其次，当您添加数据时，您将只关注一个单元格。输入该数据后（通过模糊该单元格），DataView 会注意到您没有为该行中的任何剩余单元格输入数据（当然），并将其默认值设置为“未定义”。这并不是真正想要的效果。所以你可以做的是遍历你明确设置的列，并将它们附加到我们的项目对象中，值为“”（空字符串）。

第三，我们不希望所有单元格都是空白的。实际上，我们希望显示原始单元格输入的数据。我们有这些数据，所以我们可以最后设置它，这样它就会覆盖我们之前设置的“”（空字符串）值。

最后，我们要更新网格，使其显示所有这些更改。

grid.onAddNewRow.subscribe(function (e, args) {
            var input = args.item;
            var col = Object.keys(input)[0]
            var cellVal = input[Object.keys(input)[0]]

            // firstly
            var item = {}; 
            item.id = dataView.getLength();

            // secondly
            $.each(columns, function(count, value) {
                colName = value.name
                console.log(colName)
                item[colName] = ""
            })

            // thirdly
            item[col] = cellVal
            dataView.addItem(item);

            // lastly
            grid.invalidateRows(args.rows);
            grid.updateRowCount();
            grid.render();
            grid.resizeCanvas();
        });

我希望这会有所帮助。干杯！

【讨论】：

【解决方案3】：

您可以随时向网格中添加新行。您需要做的就是将该行的数据对象添加到您的网格数据中。

假设您从数据源创建网格 - myGridData（这是一个对象数组）。只需将新行对象推送到此数组即可。在网格上调用invalidate 方法。

完成:)

【讨论】：

感谢您的回复。在我的示例中，我想向用户展示用于输入的空白单元格。我可以创建一个具有空白属性并使其无效的新数据对象，但我也希望能够仅在单击“添加新行”按钮时显示空白行。据我了解，当网格选项设置为 enableAddRow 时，空白行始终可见。是否就像在“添加新行”按钮的点击事件期间更新网格选项一样简单？

【解决方案4】：

除了创建新行之外，我还需要显示它，以便用户可以开始在其上书写。我正在使用分页，所以这就是我所做的：

//get pagination info
var pageInfo = dataView.getPagingInfo();

//add new row
dataView.addItem({id: pageInfo.totalRows});

//got to last page
dataView.setPagingOptions({pageNum: pageInfo.totalPages});

//got to first cell of new row
var aux = totalRows/ pageInfo.pageSize;
var row = Math.round((aux - Math.floor(aux)) * pageInfo.pageSize, 0);
grid.gotoCell(row, 0 ,true);

在我使用分页之前，我只需要这个：

var newId = dataView.getLength();
dataView.addItem({id: newId});
grid.gotoCell(newId, 0 ,true);

【讨论】：

【解决方案5】：

var newRow = {col1: "col1", col2: "col2"};
var rowData = grid.getData();
rowData.splice(0, 0, newRow);
grid.setData(rowData);
grid.render();
grid.scrollRowIntoView(0, false);

对我来说工作得很好。

【讨论】：