JSTree

喜欢ヅ旅行 2022-08-22 00:26 183阅读 0赞

[jsTree][] is jquery plugin, that provides interactive trees. It is absolutely free, opensource and distributed under the MIT license. jsTree is easily extendable,themable and configurable, it supports HTML & JSON data sources and AJAXloading.

jsTreefunctions properly in either box-model (content-box or border-box), can beloaded as an AMD module, and has a built in mobile theme for responsive design,that can easily be customized. It uses jQuery's event system, so bindingcallbacks on various events in the tree is familiar and easy.

Justa few of the features worth noting:

Ø  drag& drop support

Ø  keyboardnavigation inline edit,

Ø  createand delete

Ø  tri-state

Ø  checkboxesfuzzy searching

Ø  customizablenode types

JSTree是一个JQuery插件，当前最新版本v3.3.1（2016-05-05MIT），使用JSTree可以很方便的通过简单的配置快速实现复杂的树形结构，支持模糊查询、动态加载。

1、输入框模糊搜索，注意Core中配置Plugins

plugins: ["checkbox", "sort", "types", "wholerow", "search", "unique"]

2、动态加载，支持HTML或者JSON数据，可根据官网说明根据当前节点依据实际业务场景自动计算子节点。注意URL是需要请求的地址，在实际操作会根据你当前选择，将当前节点的ID传入请求的地址。

Inaddition to the standard jQuery ajax options here you can supply functions fordata and url,the functions will be run in the current instance's scope and a param will bepassed indicating which node is being loaded, the return value of thosefunctions will be used as URL and data respectively.

$('#treeArea').jstree({ 
                                            plugins: ["checkbox", "sort", "types", "wholerow", "search", "unique"], 
                                            'core': { 
                                                'multiple': false, 
                                                'data': { 
                                                    "url": "AreaHandler.ashx", 
                                                    "data": function (node) { return { "id": node.id }; } 
                                                } 
                                            } 
                                        })

3、通过指定class可以确认叶子节点与非叶子节点的图标，比如：Class=”jstree-isLeaf”表示叶子节点。core中的multiple:false表示单选。

<div id="treeArea" class="jstree" style="overflow: auto; width: 268px; height: 350px; 
                                border: solid 0px #b9cee9; display: none; position: absolute; background: white;"> 
                                <script type="text/javascript"> 
                                    $(function () { 
                                        var to = false; 
                                        $("#txtIndustryArea").keyup(function () { 
                                            if (to) { clearTimeout(to); } 
                                            to = setTimeout(function () { 
                                                var v = $("#txtIndustryArea").val(); 
                                                var temp = $("#treeArea").is(":hidden"); 
                                                if (temp == true) { 
                                                    $("#treeArea").show(); 
                                                } 
                                                $("#treeArea").jstree(true).search(v); 
                                            }, 250); 
                                        }); 
    
                                        $('#treeArea').jstree({ 
                                            plugins: ["checkbox", "sort", "types", "wholerow", "search", "unique"], 
                                            'core': { 
                                                'multiple': false, 
                                                'data': { 
                                                    "url": "AreaHandler.ashx", 
                                                    "data": function (node) { return { "id": node.id }; } 
                                                } 
                                            } 
                                        }) 
                                                     .bind("select_node.jstree", function (e, data) { 
                                                         var tempid = data.node.id; 
                                                         $("#txtIndustryArea").val(data.node.text); 
                                                         $("#txtIndustryAreaID").val(data.node.id); 
                                                         $("#treeArea").css("display", "none"); 
                                                     }); 
    
    
                                        $("#treeArea").hover(function () { }, function () { 
                                            $("#treeArea").hide(); 
                                        }); 
    
                                    }); 
    
                                </script> 
                            </div>

效果图：

![Center][]

[jsTree]: http://jstree.com
[Center]: /images/20220724/eb222cb96e9c4e8aaef8db485a02af39.png