관련 권장 사항: "bootstrap 기본 튜토리얼"
bootstrap-treeview는 부트스트랩을 기반으로 하는 매우 멋진 jQuery 다중 레벨 목록 트리 플러그인입니다. jQuery 플러그인은 Twitter Bootstrap을 기반으로 합니다. 이 글을 쓰는 목적은 나중에 참고할 수 있도록 사용법을 기록하는 것입니다.
1. 플러그인 공식 웹사이트: https://jquery-plugins.net/bootstrap-tree-view
2. 데모 예시: http://jonmiles.github.io/bootstrap-treeview/
3 , 종속성:
Bootstrap v3.3.4 (>= 3.0.0) jQuery v2.1.3 (>= 1.9.0)
4. 사용 방법:
1.html 파일에 종속성 추가:
<link rel="stylesheet" href="css/bootstrap.min.css" /> <link rel="stylesheet" href="css/bootstrap-treeview.min.css" /> <script type="text/javascript" src="js/jquery-3.2.1.js"></script> <script type="text/javascript" src="js/bootstrap.min.js" ></script> <script type="text/javascript" src="js/bootstrap-treeview.min.js" ></script>
2 트리 데이터를 수신하도록 DOM 요소 설정:
<div id="tree"></div>
3.
4 .사용 예(js가 배경 데이터를 동적으로 가져오고 트리 구조를 렌더링함):$('#tree').treeview(options); //其中options选项允许用户定制treeview的默认外观和行为。它们在初始化时作为一个对象被传递给插件。
5. 기타 지침:
1. 매개변수에 대한 자세한 설명(사용 가능한 매개변수):$(function() { $('#tree').treeview({ data: getTree()//节点数据 }); }) function getTree() { //节点上的数据遵循如下的格式: var tree = [{ text: "Node 1", //节点显示的文本值 string icon: "glyphicon glyphicon-play-circle", //节点上显示的图标,支持bootstrap的图标 string selectedIcon: "glyphicon glyphicon-ok", //节点被选中时显示的图标 string color: "#ff0000", //节点的前景色 string backColor: "#1606ec", //节点的背景色 string href: "#http://www.baidu.com", //节点上的超链接 selectable: true, //标记节点是否可以选择。false表示节点应该作为扩展标题,不会触发选择事件。 string state: { //描述节点的初始状态 Object checked: true, //是否选中节点 /*disabled: true,*/ //是否禁用节点 expanded: true, //是否展开节点 selected: true //是否选中节点 }, tags: ['标签信息1', '标签信息2'], //向节点的右侧添加附加信息(类似与boostrap的徽章) Array of Strings nodes: [{ text: "Child 1", nodes: [{ text: "Grandchild 1" }, { text: "Grandchild 2" }] }, { text: "Child 2" }] }, { text: "Parent 2", nodes: [{ text: "Child 2", nodes: [{ text: "Grandchild 3" }, { text: "Grandchild 4" }] }, { text: "Child 2" }] }, { text: "Parent 3" }, { text: "Parent 4" }, { text: "Parent 5" }]; return tree; }2. (사용 가능한 방법 목록):
var options = { data: data, //data属性是必须的,是一个对象数组 Array of Objects. color: "", //所有节点使用的默认前景色,这个颜色会被节点数据上的backColor属性覆盖. String backColor: "#000000", //所有节点使用的默认背景色,这个颜色会被节点数据上的backColor属性覆盖. String borderColor: "#000000", //边框颜色。如果不想要可见的边框,则可以设置showBorder为false。 String nodeIcon: "glyphicon glyphicon-stop", //所有节点的默认图标 checkedIcon: "glyphicon glyphicon-check", //节点被选中时显示的图标 String collapseIcon: "glyphicon glyphicon-minus", //节点被折叠时显示的图标 String expandIcon: "glyphicon glyphicon-plus", //节点展开时显示的图标 String emptyIcon: "glyphicon", //当节点没有子节点的时候显示的图标 String enableLinks: false, //是否将节点文本呈现为超链接。前提是在每个节点基础上,必须在数据结构中提供href值。 Boolean highlightSearchResults: true, //是否高亮显示被选中的节点 Boolean levels: 2, //设置整棵树的层级数 Integer multiSelect: false, //是否可以同时选择多个节点 Boolean onhoverColor: "#F5F5F5", //光标停在节点上激活的默认背景色 String selectedIcon: "glyphicon glyphicon-stop", //节点被选中时显示的图标 String searchResultBackColor: "", //当节点被选中时的背景色 searchResultColor: "", //当节点被选中时的前景色 selectedBackColor: "", //当节点被选中时的背景色 selectedColor: "#FFFFFF", //当节点被选中时的前景色 showBorder: true, //是否在节点周围显示边框 showCheckbox: false, //是否在节点上显示复选框 showIcon: true, //是否显示节点图标 showTags: false, //是否显示每个节点右侧的标记。前提是这个标记必须在每个节点基础上提供数据结构中的值。 uncheckedIcon: "glyphicon glyphicon-unchecked", //未选中的复选框时显示的图标,可以与showCheckbox一起使用 }3. 이벤트 세부 정보 (사용 가능한 이벤트 목록):
1. checkAll(options);//选中所有树节点 2. checkNode(node | nodeId, options); //选中一个给定nodeId的树节点 3. clearSearch();//清除查询结果 4. collapseAll(options);//折叠所有树节点 5. collapseNode(node | nodeId, options);//折叠一个给定nodeId的树节点和它的子节点 6. disableAll(options);//禁用所有树节点 7. disableNode(node | nodeId, options);//禁用一个给定nodeId的树节点 8. enableAll(options);//激活所有树节点 9. enableNode(node | nodeId, options);//激活给定nodeId的树节点 10. expandAll(options);//展开所有节点 11. expandNode(node | nodeId, options);//展开给定nodeId的树节点 12. getCollapsed();//返回被折叠的树节点数组 13. getDisabled();//返回被禁用的树节点数组 14. getEnabled();//返回被激活的树节点数组 15. getExpanded();//返回被展开的树节点数组 16. getNode(nodeId);//返回与给定节点id相匹配的单个节点对象。 17. getParent(node | nodeId);//返回给定节点id的父节点 18. getSelected();//返回被选定节点的数组。 19. getSiblings(node | nodeId);//返回给定节点的兄弟节点数组 20. getUnselected();//返回未选择节点的数组 21. remove();//删除the tree view component.删除绑定的事件,内部附加的对象,并添加HTML元素。 22. revealNode(node | nodeId, options);//显示给定的树节点,将树从节点扩展到根。 23. search(pattern, options);//在树视图中搜索匹配给定字符串的节点,并在树中突出显示它们。返回匹配节点的数组。 24. selectNode(node | nodeId, options);//选择一个给定的树节点 25. toggleNodeChecked(node | nodeId, options);//Toggles a nodes checked state; checking if unchecked, unchecking if checked. 26. toggleNodeDisabled(node | nodeId, options);//切换节点的禁用状态; 27. toggleNodeExpanded(node | nodeId, options);//切换节点的展开与折叠状态 28. toggleNodeSelected(node | nodeId, options);//切换节点的选择状态 29. uncheckAll(options);//不选所有节点 30. uncheckNode(node | nodeId, options);//不选给定nodeId的节点 31. unselectNode(node | nodeId, options);//不选给定nodeId的节点 说明:可以通过两种方式来调用方法: 1、插件包装器:插件的包装器可以作为访问底层方法的代理。 $('#tree').treeview('methodName', args); 其中,多个参数必须使用数组对象来传入。 2、直接使用treeview:你可以通过下面两种方法中的一种来获取treeview对象实例: //该方法返回一个treeview的对象实例 $('#tree').treeview(true).methodName(args); //对象实例也保存在DOM元素的data中, 可以使用'treeview'的id来访问它。 $('#tree').data('treeview').methodName(args);
6. 전체 데모 다운로드
https://download.csdn.net/download/security_2015/10281802추가 프로그래밍 관련 지식을 얻으려면프로그래밍 배우기를 방문하세요! !
위 내용은 스타일 트리 플러그인 bootstrap-treeview를 사용하는 방법에 대한 간략한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!