0

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

4

5 回答 5

3

使用 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 是列的 id

于 2012-07-12T06:32:36.250 回答
1

您可以通过将“onAddNewRow”侦听器订阅到网格对象来动态添加行，例如单击按钮。正如许多人建议的那样，最好使用dataView 插件与您的数据交互。请注意，您需要将“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();
        });

我希望这有帮助。干杯!

于 2015-04-21T18:54:25.507 回答
0 
var newRow = {col1: "col1", col2: "col2"};
var rowData = grid.getData();
rowData.splice(0, 0, newRow);
grid.setData(rowData);
grid.render();
grid.scrollRowIntoView(0, false);

对我来说工作得很好。

于 2014-05-20T06:23:28.187 回答
0

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

//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);
于 2013-02-21T15:38:18.450 回答
0

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

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

完毕 ：）

于 2012-04-23T10:11:47.663 回答