Question

我目前正在使用示例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>

Answer 1

我强烈建议您查看分组示例，它也是折叠但是用于分组，这是人们想要的90％，因为几个月也可以进行多列分组。你可以在这里看到SlickGrid Example Grouping然后点击这些按钮（1）50k行（2）按持续时间分组然后努力驱动（3）折叠所有组...然后打开第一组你会看到:)

至于你的代码示例，我用你的代码替换了这个例子，它就像示例那样工作......所以？

slickgrid折叠教程

1 个答案: