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

здесь идентификатор, контроллер, SrNo1 являются идентификаторами colunm

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(), который даст вам количество строк, которые в настоящее время существуют в вашей сетке (которые мы будем использовать в качестве идентификатора для новой строки). Функция DataView addItem ожидает объект item. Таким образом, мы создаем пустой объект item и добавляем к нему id.

Во-вторых, при добавлении данных вы будете фокусировать только одну ячейку. После того, как вы ввели эти данные (путем размытия этой ячейки), DataView заметит, что вы не ввели данные для любой из оставшихся ячеек в строке (конечно) и по умолчанию будут иметь значения «undefined». Это не является желательным эффектом. Итак, что вы можете сделать, это цикл через столбцы, которые вы явно задали, и добавить их к нашему объекту item со значением «" (пустая строка).

В-третьих, мы не хотим, чтобы все ячейки были пустыми. Фактически, мы хотим, чтобы введенные данные исходной ячейки отображались. У нас есть эти данные, поэтому мы можем установить его последним, чтобы он перезаписал ранее установленное значение «» (пустая строка).

Наконец, мы хотим обновить сетку таким образом, чтобы она отображала все эти изменения.

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

Надеюсь, это поможет. Ура!