Javascript 滑动网格折叠教程

我目前正在使用示例5：以便在我自己的网格中实现崩溃。然而，我在做这件事时遇到了麻烦，我想知道是否有一些教程我可以看，或者是否有人做了这件事，可以给我一些建议。下面是一些测试代码，我一直在使用这些代码来实现它，但运气不好

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

var网格；
var数据=[]；
//这将执行缩进，并添加展开和折叠位-在为网格创建柱之前必须执行
var TaskNameFormatter=函数（行、单元格、值、列定义、数据上下文）{
值=值。替换（//&/g，“&；”）。替换（//g，“”）；
var=”；
var idx=dataView.getidxbyd（dataContext.id）；
if（数据[idx+1]&&data[idx+1].indent>data[idx].indent）{
如果（dataContext.\u已折叠）{
返回间隔符+“”+值；
}否则{
返回间隔符+“”+值；
}
}否则{
返回间隔符+“”+值；
}
};
变量列=[
{id:“title”，name:“title”，field:“title”，宽度：150，格式化程序：TaskNameFormatter}，
{id:“duration”，name:“duration”，field:“duration”}，
{id:“开始”，name:“开始”，field:“开始”}，
{id:“finish”，name:“finish”，field:“finish”}
];
变量选项={
enableColumnReorder:false
};
var searchString=“”；
函数myFilter（项目）{
if（searchString！=“”&&item[“title”].indexOf（searchString）=-1）{
返回false；
}
如果（item.parent！=null）{
var parent=数据[item.parent]；
while（家长）{
if（parent.| | |（searchString！=“”&parent[“title”].indexOf（searchString）=-1））{
返回false；
}
parent=数据[parent.parent]；
}
}
返回true；
}
$（函数（）{
var缩进=0；
var父项=[]；
对于（变量i=0；i<3；i++）{
变量d=（数据[i]={}）；
var父代；
d[“id”]=“id_u3;”+i；
如果（i==0）{
d[“标题”]=“附表1”；
}else如果（i==1）{
d[“标题”]=“附表1迟交”；
}否则{
d[“职务”]=“第一次计划早退”；
}
如果（i==0）{
parent=null；
}
如果（i==1）{
父项=父项[parents.length-1]；
缩进++；
}
如果（i==2）{
缩进++；
家长：推（1）；
}   
如果（parents.length>0）{
父项=父项[parents.length-1]；
}否则{
parent=null；
}
d[“缩进”]=缩进；
d[“家长”]=家长；
d[“持续时间”]=“5天”；
d[“开始”]=“2013年1月1日”；
d[“完成”]=“2013年1月1日”；
}
/**************为测试添加数据视图******************/
dataView=new Slick.Data.dataView（）；
dataView.setItems（数据）；
dataView.setFilter（myFilter）；//需要折叠筛选器
/********************数据视图代码结束*******************************************/
grid=new Slick.grid（“#myGrid”、数据视图、列、选项）；
//这将切换折叠和展开按钮
grid.onClick.subscribe（函数（e，args）{
if（$（e.target）.hasClass（“切换”））{
var item=dataView.getItem（args.row）；
如果（项目）{
如果（！item.\u已折叠）{
项目。_=真；
}否则{
项目.\u=false；
}
dataView.updateItem（item.id，item）；
}
e、 停止即时复制（）；
}
});
//折叠时需要这样做，以避免出现一些名称类似的bug
subscribe（函数（e，args）{
grid.invalidateRows（args.rows）；
grid.render（）；
});   
})

我强烈建议您研究分组示例，它也有折叠功能，但用于分组，这是人们想要的90%，因为几个月后也可以进行多列分组。您可以在这里看到，然后单击这些按钮（1）50k行（2）按持续时间分组，然后按努力驱动（3）折叠所有组…然后打开第一个组，您将看到：）

至于你的代码示例，我用你的代码替换了这个示例，它的工作原理与示例一样……那么