slickgrid ( nsunleo-slickgrid ) 5 增長子件

slickgrid ( nsunleo-slickgrid ) 5 增長子件

　　上次把單元格切換的問題解決了，此次要最作的事情就是給slickgrid的treegird增長子件，咱們先選中某一條記錄，而後經過點擊事件，給當前的記錄增長一個子。

　　在作以前，忽然之間發現樹的展開和收縮不可用了，因而排查了一下，是比較登記的地方以前修改錯誤了，判斷顯示隱藏的條件是經過層級來控制的，修正後的結果以下：

　　

var TaskNameFormatter = function (row, cell, value, columnDef, dataContext) {
      value = value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
      var spacer = "<span style='display:inline-block;height:1px;width:" + (15 * dataContext["indent"]) + "px'></span> ";
      var idx = dataView.getIdxById(dataContext.id);
      var levelNum = doLevelNum(dataContext["indent"]);
      var item = data[idx + 1]; if (item && item.indent > data[idx].indent) {
        
    };

　　

　　增長子件的邏輯，首先須要定位到選中的記錄：

var rows = grid.getSelectedRows();

　　而後找到treeGrid的增長子件方法，經過查看API，發現有addItem 和 insertItem 兩個，addItem是插入到最尾端，不是想要的，而insertItem是插入到給定記錄以前的，也不是想要的，可是能夠變通一下，既然是插入到以前，那麼將當前的值+1，則至關於插入選擇值以後了。

 

      var nRow = nItem(data.length + 1, row, rowData.getItem(row).indent + 1);
      rowData.insertItem(row + 1, nRow);

　　樹的組成關鍵的信息是父子，還有顯示的層級，父比較容易了，即當前的行記錄，而層級爲當前層級+1便可，這樣就能夠動態的增長子件了。

 

  // add new row command
      $("#addRow").bind("click", function (e) {
        var rows = grid.getSelectedRows();
        addRow(rows[0]);
      })

  // new row 
    function addRow(row) {
      var current = 5;
      var newRow = { title: "new Title", duration: "1 day" };
      var rowData = grid.getData();
      var nRow = nItem(data.length + 1, row, rowData.getItem(row).indent + 1);
      rowData.insertItem(row + 1, nRow);
      //data.push(nRow);
      grid.setData(rowData);
      grid.render();
      grid.scrollRowIntoView(current, false);
    }

    function nItem(i, parent, indent) {
      var d = {};
      d["id"] = "id_" + i;
      d["indent"] = indent;
      d["parent"] = parent;
      d["operator"] = "增長 " + i;
      d["f2000"] = "EYA001" + i % 7 + "_" + i;
      d["f1000"] = "EYA001" + i % 7;
      d["f2136"] = "keep your mind!";
      d["qty"] = i % 7;
      d["createTime"] = '2021-02-24';
      d["mp"] = "M";
      d["state"] = i % 2 == 0;
      return d;
    }

　　增長子件效果演示：