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演⽰
<script>
$(function () {
$('#tree').treeview({
color: "#428bca",
data: getDept(), //Treeview的数据源返回json
levels: 4,
onNodeSelected: function (e, m) { //Treeview 被选中事件
var id=m.tags[0];
var ;
},
onNodeUnselected: function (e, m) { //Treeview 取消选中事件
}
})
});
</script>
/
/Treeview数据源⽅法
function getDept() {
var exc = "";
$.ajax({
type: "post",
url: "@Url.Action("getList", "Home")",
async: false,
datatype: "json",
isnull的用法success: function (data) {
if (!sult) {
alert("出现异常");
return;
}
exc = data.data;
}
});
return exc;
}
Controllers层:
public JsonResult getList()
{
////查询列表
IList<TreeView> List = TreeViewService.GetDeptList(-1);  //最⾼部门的⽗id是-1
var jSetting = new JsonSerializerSettings { NullValueHandling = NullValueHandling.Ignore }; //忽略空值string json = JsonConvert.SerializeObject(List, Formatting.Indented,jSetting);
return Json(new { result = true, data = json });
}
Dal层:
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; }
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。