0

私は現在、例 5: http://mleibman.github.io/SlickGrid/examples/example5-collapsing.htmlを使用して、自分の slickgrid で折りたたみを実装できるようにしています。しかし、私はこれを行うのに問題があり、私が見ることができるチュートリアルがあるかどうか、または誰かがこれを行って私にいくつかの指針を与えることができるかどうか疑問に思っていました. 以下は、これを機能させるために私が取り組んできたテストコードです。

<script>

  var grid;
  var data = [];
//this does the indenting, and adds the expanding and collapsing bit - has to go before creating colums for the grid
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);
  if (data[idx + 1] && data[idx + 1].indent > data[idx].indent) {
    if (dataContext._collapsed) {
      return spacer + " <span class='toggle expand'></span>&nbsp;" + value;
    } else {
      return spacer + " <span class='toggle collapse'></span>&nbsp;" + value;
    }
  } else {
    return spacer + " <span class='toggle'></span>&nbsp;" + value;
  }
};


  var columns = [
    {id: "title", name: "title", field: "title", width: 150, formatter: TaskNameFormatter},
    {id: "duration", name: "Duration", field: "duration"},
    {id: "start", name: "Start", field: "start"},
    {id: "finish", name: "Finish", field: "finish"}
  ];

  var options = {
    enableColumnReorder: false
  };


    var searchString = "";

    function myFilter(item) {
      if (searchString != "" && item["title"].indexOf(searchString) == -1) {
        return false;
      }
      if (item.parent != null) {
        var parent = data[item.parent];

        while (parent) {
          if (parent._collapsed || (searchString != "" && parent["title"].indexOf(searchString) == -1)) {
            return false;
          }
          parent = data[parent.parent];
        }
      }
      return true;
    }

  $(function () {
     var indent = 0;
    var parents = [];
    for (var i = 0; i < 3; i++) {
        var d = (data[i] = {});
        var parent;     

        d["id"] = "id_" + i;
        if (i===0){
            d["title"] = "1st Schedule";
        }else if(i===1){
            d["title"] = "1st Schedule Late";
        }else {
            d["title"] = "1st Schedule Early Leave";
        }

        if (i===0){
        parent =null;    
     }

     if (i===1){

        parent = parents[parents.length - 1];
        indent++; 
     }

     if (i===2){

        indent++;
      parents.push(1);   
     }   


         if (parents.length > 0) {
      parent = parents[parents.length - 1];
    } else {
      parent = null;
    }


        d["indent"] = indent;
        d["parent"] = parent;
        d["duration"] = "5 days";
        d["start"] = "01/01/2013"; 
        d["finish"] = "01/01/2013"; 

    }

    /* **************Adding DataView for testing ******************/
        dataView = new Slick.Data.DataView();           
        dataView.setItems(data);
        dataView.setFilter(myFilter); //filter is needed to collapse 
    /* ************** DataView code end ************************* */

    grid = new Slick.Grid("#myGrid", dataView, columns, options);


 //this toggles the collapse and expand buttons
  grid.onClick.subscribe(function (e, args) {
    if ($(e.target).hasClass("toggle")) {
      var item = dataView.getItem(args.row);
      if (item) {
        if (!item._collapsed) {
          item._collapsed = true;
        } else {
          item._collapsed = false;
        }

        dataView.updateItem(item.id, item);
      }
      e.stopImmediatePropagation();
    }
  });

//this is needed for collapsing to avoid some bugs of similar names
  dataView.onRowsChanged.subscribe(function (e, args) { 
    grid.invalidateRows(args.rows);
    grid.render();
  });   

  })
</script>
4

1 に答える 1

0

代わりにグループ化の例を調べることを強くお勧めします。これも折りたたみを使用していますが、グループ化用に作成されています。これは、人々が望むものの 90% であり、数か月で複数列のグループ化も実行できるためです。ここでSlickGrid の例のグループ化を確認してから、これらのボタンをクリックします (1)50k 行 (2)期間ごとにグループ化し、次に労力主導 (3)すべてのグループを折りたたむ...次に最初のグループを開くと、次のように表示されます :)

コードサンプルについては、例をあなたのコードに置き換えましたが、例と同じように機能します...そうですか？

于 2013-07-27T04:15:35.127 に答える