JS组件系列——自己动手封装bootstrap-treegrid组件 - 懒得安分(2)_H5之家

5、上述封装里面递归查找子节点的时候，每一次都需要遍历所有的数据去找子节点，效率偏低，如果你使用了类似linq to js之类的组件去操作js的集合，可以优化那部分代码，适当提高递归的效率。当然，如果你的结果集本身数据量不太大，这么写影响也不太大。

3、封装后的组件使用

我们在界面上面引用需要的css和js文件

然后定义一个空的table标签

最后就是js初始化了

$(document).ready(function () { $('#tb').treegridData({ id: 'Id', parentColumn: 'ParentId', type: "GET", //请求数据的ajax类型 url: '/TestMVC/GetData', //请求数据的ajax的url ajaxParams: {}, //请求数据的ajax的data属性 expandColumn: null,//在哪一列上面显示展开按钮 striped: true, //是否各行渐变色 bordered: columns: [ { title: '机构名称', field: 'Name' }, { title: '机构描述', field: 'Desc' } ] }); });

当然啦，还得配上后台的取数据的方法

　　public class TestMVCController : Controller {public JsonResult GetData() { var result = new List<object>(); result.Add(, Desc = }); result.Add(, Desc = ,ParentId=1 }); result.Add(, Desc = , ParentId = 1 }); result.Add(, Desc = , ParentId = 2 }); result.Add(, Desc = , ParentId = 1 }); result.Add(, Desc = , ParentId = 1 }); result.Add(, Desc = , ParentId = 2 }); result.Add(, Desc = }); result.Add(, Desc = , ParentId = 6 }); result.Add(, Desc = , ParentId = 6 }); result.Add(, Desc = , ParentId = 6 }); result.Add(, Desc = , ParentId = 9 }); return Json(result, JsonRequestBehavior.AllowGet); } }