스타일 트리 플러그인 bootstrap-treeview를 사용하는 방법에 대한 간략한 설명

관련 권장 사항: "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 중국어 웹사이트의 기타 관련 기사를 참조하세요!