bootstrap-treeView 勾选框级联效果及模拟ajax提交和回填

插件要2.1版本的，这个github上有。bootstrap-treeview.js v2.1.0

---

1.html部分

<div id="treeview"></div>

---

2.js部分

//数据源    

var defaultData = [
        {
            id: 1,
            text: 'Parent 1',
            nodes: [{ id: 6, text: 'Child 1' },{ id: 7, text: 'Child 2' }]

        }, 
        {
            id: 2,
            text: 'Parent 2',
            nodes: [{id: 8,text: 'Child 1'},{id: 9,text: 'Child 2'}]

        },
        {

            id: 3,
            text: 'Parent 3',

        },
        {
            id: 4,
            text: 'Parent 4'
        },
        {
            id: 5,
            text: 'Parent 5'
        }
    ];

//初始化  

$('#treeview').treeview({
        showCheckbox: true,
        data: defaultData,
        hierarchicalCheck: true, //级联勾选
        propagateCheckEvent: true,
        state: {
            checked: true,
            // disabled: true,
            expanded: true,
            // selected: true
        },
        onNodeChecked: function (event, node) {
          //  $('#checkable-output').prepend('<p>' + node.text + ' was checked</p>');
        },
        onNodeUnchecked: function (event, node) {
         //   $('#checkable-output').prepend('<p>' + node.text + ' was unchecked</p>');
        }
    });

  // 模拟ajax add/update   

 $("#treeViewBtn").click(function () {
        var checkedNodes = $('#treeview').treeview('getChecked')
        console.log(checkedNodes)
        var nodeIds = [];
        $.each(checkedNodes, function (i, n) {
            nodeIds.push(n.id)
        })
        console.log(nodeIds)
        //[1, 6, 7, 2, 8, 4]
    })

    // 模拟ajax query   

 function queryTree() {
        $('#treeview').treeview('uncheckAll', {
            silent: true
        })
        var data = ["1", "4", "6", "7", "2", "8"];
   $.each(data,function(i,n){
            var findCheckableNodess = function () {
                return $('#treeview').treeview('findNodes', [n, 'id']);
            };
            var checkableNodes = findCheckableNodess();
            $('#treeview').treeview('checkNode', [checkableNodes, {
                silent: true
            }]);

        })

    }

queryTree()

---

3.若节点点击不能折叠，加上这串css

 .node-hidden{
    display: none;
}

最终效果

---