bootstrap treeview 下拉树

来源：互联网发布：网上卖的淘宝教程没用编辑：程序博客网时间：2024/06/07 08:53

说明：数据一次性加载，适合数据量不是很大的场景

引用文件：bootstrap treeview及其css，推荐下载地址：http://blog.csdn.net/qq812858143/article/details/68945157

<script type="text/javascript" src="<%=path%>/bootstrap/treeView/bootstrap-treeview.js"></script><link rel="stylesheet" href="<%=path%>/bootstrap/treeView/bootstrap-treeview.min.css" type="text/css"/>

JS：    $(function () {        getTree('1');    })    function buildTree(parentNode, datas) {        for (var key in datas) {            var data = datas[key];            if (data.parentid == parentNode.id) {                var node = {text: data.knowledgeText, id: data.id, nodes: [], selectable: true};                parentNode.nodes.push(node);                buildTree(node, datas);            }        }        if (parentNode.nodes.length == 0) {            delete parentNode.nodes;        }    }    function getTree(strid) {        var params = {};        params.id = 'a696ee80-5b26-4a99-b013-ba22bec4d3bb';        $.ajax({            url: "/knowledge/getTree", // 请求的URL            dataType: 'json',            type: "get",            data: params,            success: function (data) {                var tree = {text: '复读语文', id: 'a696ee80-5b26-4a99-b013-ba22bec4d3bb', nodes: []};                buildTree(tree, data.data);                $('#knowledgeTree').treeview({                    color: "#428bca",                    data: [tree],//                    showCheckbox: true                    onNodeSelected: function (event, mdata) {                        $("#knowledgeText").val(mdata.text);                        $("#hideDiv").hide();                    }                });            }        });    }

<body><input type="text" id="knowledgeText" name="knowledgeText" class="form-control" value=""       onclick="$('#hideDiv').show()" placeholder="分类名称"/><div id="hideDiv" style="display: none;">    <div id="knowledgeTree"></div>    <button class="btn btn-danger" type="button" onclick="">        <span class="glyphicon glyphicon-eye-open"></span> 确定    </button></div></body>

阅读全文

0 0