BootStrap Treeview의 간단한 사용에 대한 간략한 분석

bootstrap-treeview.js1은 강력한 트리 메뉴 플러그인입니다. 이 글에서는 부트스트랩 트리뷰의 간단한 사용법을 소개합니다.

더 이상 고민하지 말고 곧바로 실용적인 내용으로 넘어가겠습니다.

1. bootstrap-treeview Github URL:

https://github.com/jonmiles/bootstrap-treeview

2. 사용 요구사항:

<!-- 样式表 -->
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/bootstrap-treeview.css" rel="stylesheet" />
<!-- JS文件 -->
<script src="jquery.js"></script>
<script src="bootstrap-treeview.js"></script>

3. 데이터 형식: (사용 중에 트리의 데이터 형식은 Json 형식이거나 하드 코딩될 수 있습니다. 물론 하드 코딩된 코드는 반드시 유연하지 않습니다. Json 형식의 필드 이름은 트리의 필드 요구 사항, 즉 텍스트 형식 텍스트, 하위 노드 이름 노드 등을 따라야 합니다.

var tree = [
{
text: "Parent 1",
nodes: [
{
text: "Child 1",
nodes: [
{
text: "Grandchild 1"
},
{
text: "Grandchild 2"
}
]
},
{
text: "Child 2"
}
]
},
{
text: "Parent 2"
},
{
text: "Parent 3"
},
{
text: "Parent 4"
},
{
text: "Parent 5"
}
];

4. >

4.1 컨테이너 추가:

<div id="tree"></div>

4.2 트리 구조 정의: (데이터는 Json 형식이며 여기에서는 ajax가 사용되며 배경 코드는 다음과 같습니다)

<script>
$(function () {
$.ajax({
type: "Post",
url: "/Home/GetTreeJson",
dataType: "json",
success: function (result) {
$(&#39;#tree&#39;).treeview({
data: result, // 数据源
showCheckbox: true, //是否显示复选框
highlightSelected: true, //是否高亮选中
//nodeIcon: &#39;glyphicon glyphicon-user&#39;, //节点上的图标
nodeIcon: &#39;glyphicon glyphicon-globe&#39;,
emptyIcon: &#39;&#39;, //没有子节点的节点图标
multiSelect: false, //多选
onNodeChecked: function (event,data) {
alert(data.nodeId);
},
onNodeSelected: function (event, data) {
alert(data.nodeId);
}
});
},
error: function () {
alert("树形结构加载失败！")
}
});
})
</script>

참고: onNodeChecked 및 onNodeSelected 메서드는 문서에서 기본 메서드입니다. 직접 문서를 작성하거나 압축되지 않은 bootstrap-treeview.js 파일을 확인하세요. js 파일의 내용은 매우 자세하고 이해하기 쉽습니다.

4.3 Json 형식 데이터 소스: (.net MVC 프레임워크 사용, 간단한 제어 코드 나열)

/// <summary>
/// 返回Json格式数据
/// </summary>
/// <returns></returns>
[HttpPost]
public JsonResult GetTreeJson()
{
var nodeA = new List<Node>();
nodeA.Add(new Node(4, "A01", null));
nodeA.Add(new Node(5, "A02", null));
nodeA.Add(new Node(6, "A03", null));
 
var nodeB = new List<Node>();
nodeB.Add(new Node(7, "B07", null));
nodeB.Add(new Node(8, "B08", null));
nodeB.Add(new Node(9, "B09", null));
 
var nodes = new List<Node>();
nodes.Add(new Node(1, "A01", nodeA));
nodes.Add(new Node(2, "B02", nodeB));
nodes.Add(new Node(3, "A03", null));
return Json(nodes, JsonRequestBehavior.AllowGet);
}
/// <summary>
/// Tree类
/// </summary>
public class Node
{
public Node() { }
public Node(int id, string str, List<Node> node)
{
nodeId = id;
text = str;
nodes = node;
}
public int nodeId; //树的节点Id，区别于数据库中保存的数据Id。若要存储数据库数据的Id，添加新的Id属性；若想为节点设置路径，类中添加Path属性
public string text; //节点名称
public List<Node> nodes; //子节点，可以用递归的方法读取，方法在下一章会总结
}

5. 🎜>

트리는 단순히 생성됩니다. 복잡한 기능과 논리적 판단에는 추가 설계가 필요합니다. bootstrap-treeview.js를 직접 읽는 것은 여전히 ​​매우 고무적이고 발견 가능합니다.

보충사항:

위는 편집자가 소개한 부트스트랩 트리뷰의 간단한 사용법입니다. 질문 질문이 있으신 경우 메시지를 남겨주시면 시간 내에 답변해 드리겠습니다. 또한 PHP 중국어 웹사이트를 지원해 주신 모든 분들께 감사드립니다!

BootStrap Treeview의 간단한 사용법에 대한 더 많은 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!