slickgrid摺疊教程

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）摺疊所有組...然後打開第一組，然後你會看到:)

至於你的代碼示例，我用你的代碼替換了這個例子，它的工作原理就像這個例子......所以呢？