Slickgrid按需添加新行

Question

有沒有方法可以根據需要向slickgrid添加新行？例如，在頁面上單擊時顯示新行的按鈕。

Answer 1

您可以隨時在網格中添加新行。您所需要做的就是將該行的數據對象添加到網格數據中。

假設您從數據源創建網格 - myGridData（這是一個對象數組）。 只需將新行對象推送到此數組。在網格上調用invalidate方法。

完成:)

Answer 2

它可以很容易地使用dataView.addItem（PARAMS），只需用參數替換PARAMS做..

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

這裏ID，控制器，SrNo1是colunm

的IDS

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

通過將「onAddNewRow」偵聽器訂閱到您的網格對象，您可以動態地添加一行，如點擊按鈕。正如許多人所建議的那樣，最好使用dataView plugin來與您的數據進行交互。請注意，您需要將「enableAddRow」選項設置爲「true」。

首先，DataView要求在添加新行時設置唯一的行「id」。計算這個值的最好方法是使用dataView.getLength（），它會給你當前網格中存在的行數（我們將用它作爲新行的id）。 DataView addItem函數需要一個item對象。所以我們創建一個空的項目對象並將其附加到它。其次，當你添加數據時，你將只關注單個單元格。輸入數據後（通過模糊該單元格），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(); 
     }); 

我希望這有助於。乾杯!