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 回答