1. 程式人生 > >bootstrap treeview 下拉樹

bootstrap treeview 下拉樹

說明:資料一次性載入,適合資料量不是很大的場景

引用檔案: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>