Bootstrap treeview 简单用法

最新推荐文章于 2024-08-09 07:14:39 发布

ztianming

最新推荐文章于 2024-08-09 07:14:39 发布

阅读量747

点赞数

分类专栏： Bootstrap

本文链接：https://blog.csdn.net/ztianming/article/details/113704994

版权

Bootstrap 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文展示了如何使用JavaScript和Bootstrap Treeview插件创建一个树形下拉框，支持多选功能。通过AJAX获取数据，并在节点选中或取消选中时更新输入框的值。点击确认按钮后，隐藏下拉框。代码详细且实用，适用于前端开发中的多级选择场景。

摘要由CSDN通过智能技术生成

1，需要展示个树形下拉框多选

<html>
<head></head>
<body>
    <input type="text" id="knowledgeText" name="knowledgeText" class="form-control history_content" value="" onclick="$('#hideDiv').show()" placeholder="请选择"/>
   <div id="hideDiv" style="display: none;">
       <div id="knowledgeTree"></div>
       <button class="btn btn-danger" type="button" id="confirm">
        <span class="glyphicon glyphicon-eye-open"></span> 确定
       </button>
   </div>
<link rel="stylesheet" href="css/bootstrap-treeview.min.css">
<script type="text/javascript" src="js/bootstrap-treeview.min.js"></script>
<script type="text/javascript">
  $(function(){
// 树形下拉菜单
    function getTree(strid) {
        var game_id = $.cookie("game_id");
        var tree = [
                    {text: '北京', id: 0, nodes: [
                         {text: '东城区',id: 1,nodes: []},
                         {text: '西城区',id: 2,nodes: []},
                       ]},
                     {text: '河北省', id: 3, nodes: [
                         {text: '石家庄',id: 4,nodes: []},
                       ]}
                   ];
        $.ajax({
            type: "POST",
            data: {game_id: game_id},
            url: "history_parent_title",// 请求url
            dataType: 'JSON',
            success: function (data) {
                if(data.code == 0){
                    $('#knowledgeTree').treeview({
                        color: "#428bca",
                        data: tree,
                        showCheckbox: true,
                        multiSelect: true,
                        levels: 0,
                        onNodeChecked: function (event, data) {
                            var str = $("#knowledgeText").val();
                            if (str.length > 0) {
                                $("#knowledgeText").val(str + data.text + ',');
                            } else {
                                $("#knowledgeText").val(data.text + ',');
                            }
                        },
                        onNodeUnchecked: function (event, data) {
                            var str = $("#knowledgeText").val();
                            $("#knowledgeText").val(str.replace(data.text + ",", ""));
                           
                        }
                    });
                }else{
                    toastr.error(data.message);
                }
            }
        });
    }

    // 确认按钮
    $("#confirm").on("click", function () {
        $("#hideDiv").hide();
    });
});
</script>
</body>
</html>

如有不足，请借鉴博主 https://blog.csdn.net/princeluan/article/details/78864222

简单完成