Question

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

Answer 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是colunm的ids

Answer 2

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

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

完成：）

Answer 3

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

//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);

Answer 4

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

对我来说很好。

Answer 5

您可以通过订阅＆＃34; onAddNewRow＆＃34;动态添加行，例如点击按钮。监听你的网格对象。正如许多人所建议的那样，最好使用dataView plugin与您的数据进行交互。请注意，您需要＆＃34; enableAddRow＆＃34;选项设置为＆＃34; true＆＃34;。

首先，DataView需要一个唯一的行＆＃34; id＆＃34;添加新行时设置。计算这个的最好方法是使用dataView.getLength（），它将为您提供当前存在于您的网格中的行数（我们将其用作新行的ID）。 DataView addItem函数需要一个item对象。所以我们创建一个空项目对象并将id附加到它。

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

第三，我们不希望所有细胞都是空白的。实际上，我们希望原始单元格的输入数据出现。我们有这些数据，所以我们可以将它设置为最后一个，以便它将覆盖＆＃34;＆＃34;我们之前设置的（空字符串）值。

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

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();
        });

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

Slickgrid按需添加新行

5 个答案: