bootstrap的treeview使用方法

首先引入文件:

<link href="./css/bootstrap.css" rel="stylesheet"><script src="./js/jquery.js"></script><script src="./js/bootstrap-treeview.js"></script>  

HTML 结构:

<div id="tree"></div> //不一定是div元素  其他也可以。在这我用的div演示 

调用插件Treeview方法:

<script>
 $(function () {
$('#tree').treeview({
color: "#428bca",
data: getDept(), //Treeview的数据源 返回json
levels: 4,
onNodeSelected: function (e, m) { //Treeview 被选中事件
var id=m.tags[0]; 
var remark=m.text; 
},
onNodeUnselected: function (e, m) { //Treeview 取消选中事件
}
})
});

</script>

//Treeview数据源方法
function getDept() {

var exc = "";
$.ajax({
type: "post",
url: "@Url.Action("getList", "Home")",
async: false,
datatype: "json",
success: function (data) {
if (!data.result) {

 alert("出现异常");
retu;
}
exc = data.data;
}
});
retu exc;
}

Controllers层:

  public JsonResult getList(){////查询列表  IList<TreeView> List = TreeViewService.GetDeptList(-1);  //最高部门的父id是-1var jSetting = new JsonSerializerSettings { NullValueHandling = NullValueHandling.Ignore }; //忽略空值string json = JsonConvert.SerializeObject(List, Formatting.Indented,jSetting);retu Json(new { result = true, data = json });}

Dal层:

 public static IList<TreeView> GetDeptList(int SuperiorID = 0){DataTable dt = SqlHelper.FillSqlDataTable("SELECT DeptName AS text,CONVERT(VARCHAR(10),ID)+','+DeptCode+','+ISNULL(Remark,'') AS tags,'' AS href FROM  dbo.Sys_Dept WHERE State=0 and  SuperiorID=" + SuperiorID);retu GetListByTable(dt);}
//将Datable转成listprivate static IList<TreeView> GetListByTable(DataTable dt, int kind = 0){IList<TreeView> list = new List<TreeView>();if (dt != null && dt.Rows.Count > 0){foreach (DataRow row in dt.Rows){TreeView model = new TreeView();if (row["tags"] != null){model.tags = row["tags"].ToString().Split(',');}if (row["text"] != null){model.text = row["text"].ToString();}if (dt.Columns.Contains("href") && row["href"].ToString().Trim() != null){model.href = row["href"].ToString();}if (kind == 0){//部门的Treeviewmodel.nodes = GetDeptList(int.Parse(model.tags[0]));}if (kind == 1){//菜单的Treeviewmodel.nodes = GetMenusList(int.Parse(model.tags[0]));}list.Add(model);}retu list;}retu null;}

Model 层:

 
//bootstrap的treeview插件返回数据源json格式必须是下面这样的，所以在写sql语句时就要用 as 重命名字段，往上翻看我的sql语句就会明白。
public class TreeView{public string icon { get; set; }public string text { get; set; }public string[] tags { get; set; }public string href { get; set; }public IList<TreeView> nodes { get; set; }}