精华内容
下载资源
问答
  • JSTree

    万次阅读 2016-05-09 17:45:12
    JSTree是一个JQuery插件,当前最新版本v3.3.1(2016-05-05MIT),使用JSTree可以很方便的通过简单的配置快速实现复杂的树形结构,支持模糊查询、动态加载。

    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"]


                                        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); 
                                        }); 

    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> 

    效果图:





    展开全文
  • jstree

    2019-07-30 01:43:04
    NULL 博文链接:https://xvshell.iteye.com/blog/783301
  • tree.jstree.jstree.js

    2009-11-11 22:48:25
    tree.jstree.jstree.jstree.jstree.jstree.jstree.jstree.jstree.js
  • jsTree实例,jsTree实例

    热门讨论 2010-09-06 15:11:45
    jsTree实例,jsTree实例,jsTree实例
  • jstree重新包装为流星 是jquery插件,提供交互式树。 有关流星的演示,, jsTree版本:3.2.1 ###安装 $ meteor add sujith3g:jstree 有关文档和演示:。 对于原始来源:。
  • jsTree操作 jsTree插件简介 Web开发使用jsTree实例
  • jsTree-directive, jsTree的Angular 指令 文档 jstree指令jsTree的Angular 指令文档文档使用 bower 安装$ bower i jstree-directive教程使用 jsTree,Angularjs和Expressjs语言构建一个基于We
  • Yii2 jsTree 组件 jsTree 是 jquery 插件,提供交互式树。 它是完全免费的、开源的,并在 MIT 许可下分发。 jsTree 易于扩展、主题化和可配置,它支持 HTML 和 JSON 数据源以及 AJAX 加载。 这个包允许你在几分钟内...
  • Yii2 的 JsTreeJsTree。 在制品... 安装 安装此帮助程序的首选方法是通过 。 要么跑 php composer.phar require "iutbay/yii2-jstree" "*" 或添加 " iutbay/yii2-jstree " : " * " 到应用程序的composer....
  • ember-cli-jstree 将功能引入您的Ember应用程序。 演示: : 安装 可以通过ember install Ember CLI插件 ember install ember-cli-jstree 用法 开箱即用,模板上需要的最低要求是data 。 通过使用actionReceiver...
  • jsTree-Angular 是一种将 jQuery jsTree 与 Angular 一起使用并享受 jsTree 提供的所有功能的方法。 有关 jsTree - jQuery 插件的更多信息,请参阅 。 jQuery jsTree 是 jquery 插件,提供交互式树。 它是完全...
  • 我建议改为从rails-assets.org安装jsTreejsTree-Rails 使在Rails 3.1中包括jsTree的项目变得轻而易举。 安装 将以下行添加到您的Gemfile中: gem 'jstree-rails', :git => 'git://github....
  • jstree提供了一些默认选中的api,但是能起作用的很少,这里介绍一种手动选中节点的方法。` var selectByDefault = function(){ //给jstree添加ready事件,必须在jstree准备好之后再去修改,否则无法成功 //$("#js...

    jstree提供了一些默认选中的api,但是能起作用的很少,这里介绍一种手动选中节点的方法。`

    var selectByDefault = function(){
    	//给jstree添加ready事件,必须在jstree准备好之后再去修改,否则无法成功
    	//$("#jstree")是jstree容器,即我们初始化jstree的jQuery选择器
        $("#jstree").on("ready.jstree",function(){
            if(currentBoardId==""||currentBoardId==null){
                return;
            }
            var boardId = currentBoardId.split("'")[1];
            //在该node的li包装层修改其属性值。
            $("#"+boardId).attr('aria-selected',true);
            //在该node的a标签处加入class修改其样式
            $("#"+boardId+" a").addClass("jstree-clicked");
            //手动向jstree维护的select数组添加值,以便于可以使用get_selected取到所选node
            //如果没有这一句,是无法用jstree的api取到当前选中node,前面所做的就没有意义了
            $("#jstree").jstree()._data.core.selected.push(boardId);
        });
    };`
    
    展开全文
  • jstree的简单实例

    2020-11-26 10:16:17
    最近使用到了jstree,感觉是一款灵活的、可多项定制的tree插件; 我这边使用过程记录下; 参考的jstree api网站,以及demo介绍: https://www.jstree.com/api/#/ jstree api github: ... <... ”treeview1″ class=”...
  • jstree源码

    2011-09-14 14:14:38
    包含多种jstree,包含多种jstree,包含多种jstree,包含多种jstree,包含多种jstree,包含多种jstree
  • jsTree API

    2014-03-17 23:15:13
    jsTree API
  • Js Tree Demo

    2015-10-23 15:09:40
    Js Tree Demo, 资源以及Demo示例
  • jsTree中文api

    2017-10-18 18:04:51
    jsTree中文api文档,js操作树可移动节点 增加修改删除节点.jsTree中文api文档,js操作树可移动节点 增加修改删除节点.
  • jstree代码

    2015-07-16 09:13:31
    一个简单的jstree实现功能.
  • 在初次使用jstree插件,引入了jstree相关文件后,打开浏览器报错$(...).jstree() is not function 在网上找了一圈后,还是没能解决,最后想到是不是自己引入的其他插件和jstree有覆盖,把‘jstree.min.js’这个文件...

    在初次使用jstree插件,引入了jstree相关文件后,打开浏览器报错$(...).jstree() is not function

    在网上找了一圈后,还是没能解决,最后想到是不是自己引入的其他插件和jstree有覆盖,把‘jstree.min.js’这个文件放在所有外部文件之后引入。成功解决浏览器报$(...).jstree() is not function的错(>_<)

    展开全文
  • Jquery jstree SDK

    2016-03-25 11:53:06
    jstree SDK
  • JSTree使用

    千次阅读 2019-05-08 10:58:56
    JSTree使用 1、jstree.js 下载地址:https://www.jstree.com/ 2、当然,jstree.js的使用肯定是离不开jquery.js的。不过下载好的包里是包含了jquery.js的。 3、一些相关的插件,简单说下几个常用的: Checkbox:复选框 ...

    JSTree使用

    1、jstree.js 下载地址:https://www.jstree.com/

    2、当然,jstree.js的使用肯定是离不开jquery.js的。不过下载好的包里是包含了jquery.js的。

    3、一些相关的插件,简单说下几个常用的:

    Checkbox:复选框

    Dnd:可拖拽功能

    Contextmenu:菜单功能

    4、由于要求做一个支持菜单功能、可拖拽、增删改节点功能的属性菜单,所以本次值用到了Checkbox、Dnd、Contextmenu这三个,当然由于期间还用到弹出框功能,就使用jqueryUI的dialog所以还需要引入jquery-ui.js。

    5、下面就是代码了:

    		    <head>
    		    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    		    <link rel="stylesheet" href="./resources/css/style.min.css" />
    		    <link rel="stylesheet" href="./resources/css/jquery-ui.css" />
    		    <script type="text/javascript" src="./resources/js/jQuery-1.12.4.js"></script>
    		    <script type="text/javascript" src="./resources/js/jquery-ui.js"></script>
    		    <script type="text/javascript" src="./resources/js/jstree.js"></script>
    		    <script type="text/javascript"
    		        src="./resources/js/jstree.contextmenu.js"></script>
    		    <script type="text/javascript" src="./resources/js/jstree.checkbox.js"></script>
    		    <script type="text/javascript" src="./resources/js/jstree.dnd.js"></script>
    		    <script type="text/javascript" src="./resources/js/jstree.state.js"></script>
    		    <script type="text/javascript" src="./resources/js/jstree.types.js"></script>
    		    <title>Insert title here</title>
    		    </head>
    		    <body>
    		        <div id="demoTree"></div>
    		    
    		        <div id="addNode" style="display: none;" title="Add/Update Node">
    		            <table>
    		                <tr>
    		                    <td><input type="hidden" name="parent" id="parent" /> <input
    		                        type="hidden" name="nodeId" id="nodeId" /> Name:<input type="text"
    		                        name="nodeName" id="nodeName" /></td>
    		                </tr>
    		            </table>
    		        </div>
    		    
    		        <div id="message" style="display: none;" title="Delete Node">
    		            <h1>Sure to Delete ?</h1>
    		        </div>
    		        
    		        <div id="move" style="display: none;" title="Move Node">
    		            <h1>Sure to Move ?</h1>
    		        </div>
    		    </body>
    		    </html>
    

    这里主要就是页面html块,主要的树的节点所在呢,就是ID为demoTree的DIV了;然后后面的ID为addNode、message、move的三个DIV主要是用来弹出框的,分别是增加和修改节点功能、确定删除、确定移动。

    6、以下是JavaScript块:

    			$("#demoTree").on('move_node.jstree', function(e,data){
                    console.info(data);
                    moveNode(data);
                }).jstree({
                    'core':{
                        'check_callback' : true,
                        'data': {
                            "url" : "./getNodeListJson.htm",
                            "dataType" : "json"
                        }
                    },
                    'plugins' : ['themes','json_data','checkbox','ui','contextmenu','dnd', 'state', 'types'],
                    'contextmenu' : {
                        'select_node' : false,
                        'show_at_node' : true,
                        'items':{
                             "create":{
                                 'separator_before'    : false,
                                'separator_after'    : true,
                                '_disabled'            : false,
                                'label':'Add',
                                'action':function(data){
                                    $("#nodeId").val("");
                                    $("#parent").val("");
                                    $("#nodeName").val("");
                                     var inst = $.jstree.reference(data.reference),
                                    obj = inst.get_node(data.reference);//获得当前节点,可以拿到当前节点所有属性
                                    $("#parent").val(obj.id);
                                    $("#addNode").dialog("open");
                                }
                            },
                            'remove':{
                                'separator_before'    : false,
                                'separator_after'    : true,
                                '_disabled'            : false,
                                'label' : 'Delete',
                                'action':function(data){
                                     var inst = $.jstree.reference(data.reference),
                                    obj = inst.get_node(data.reference);//获得当前节点,可以拿到当前节点所有属性
                                     deleteNode(obj.id);
                                }
                            },
                            'rename':{
                                'separator_before'    : false,
                                'separator_after'    : true,
                                '_disabled'            : false,
                                'label':'Update',
                                'action':function(data){
                                    $("#nodeId").val("");
                                    $("#parent").val("");
                                    $("#nodeName").val("");
                                     var inst = $.jstree.reference(data.reference),
                                    obj = inst.get_node(data.reference);//获得当前节点,可以拿到当前节点所有属性
                                    $("#nodeId").val(obj.id);
                                    $("#nodeName").val(obj.text);
                                    $("#addNode").dialog("open");
                                }
                            }
                        }
                    } 
                });
    

    这里主要就是给DIV加载树了;首先给树绑定了一个’move_node.jstree’,这个是用于给树加上拖拽功能,里面的moveNode(data)主要是一个确定移动的弹框以及ajax请求。当然拖拽功能还需要在jstree内的core加上这一属性,否则会拖拽不了。

    		 'core':{
                    'check_callback' : true,
                    'data': {
                        "url" : "./getNodeListJson.htm",
                        "dataType" : "json"
                    }
                },
    

    首先,树的数据就是通过图中data的url请求服务端获取的json数据,当然这个json数据是要遵循一定的格式的,我的是根据下载好的包中的demo的root.json的格式拼接的。

    再看plugins,这里主要就是声明你要用的哪些插件

    下面主要说一下contextmenu:

    Select_node:是指是否选中当前节点

    Show_at_node:是指是否在当前节点展示菜单

    Items:是指菜单元素

    Items自带的几个节点就是create、remove、rename。

    separator_before、separator_after:是指是否在菜单元素前或后加上分割线

    Label:这个就是菜单元素的名称了

    Action:是指这个菜单元素下的一系列操作了

    7、弹出框:

    	 $(function(){
            $("#addNode").dialog({
                autoOpen: false,
                width: 400,
                buttons: [
                    {
                        text: "Ok",
                        click: function() {
                            var nodeId = $("#nodeId").val();
                            var parent = $("#parent").val();
                            var nodeName = $("#nodeName").val();
                            if(null == nodeName || "" == nodeName){
                                alert("Name is null");
                                return;
                            }
                            $.ajax({
                                url : './saveNode.htm',
                                data : {
                                    'nodeId' : nodeId,
                                    'parent': parent,
                                    'name' : nodeName
                                },
                                type : 'POST',
                                dataType : 'json',
                                success : function(data){
                                    if(data.result == 'success'){
                                        alert("Done success");
                                        window.location.reload();
                                    }else if(data.result == 'fail'){
                                        alert("Done failed");
                                    }else{
                                        alert(data.result);
                                    }
                                }
                            });
                            $( this ).dialog( "close" );
                        }
                    },
                    {
                        text: "Cancel",
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                ]
            });
    

    这个就是给div绑定弹出框功能。

    8、整体效果图,由于历史比较久远,后续补上

    展开全文
  • jsTree-开源

    2021-07-18 11:00:28
    jsTree 是一个基于 jQuery 的跨浏览器树组件。
  • jsTree中文文档

    热门讨论 2015-03-14 19:50:43
    jsTree中文文档
  • 红色部分:也可以使用注释的那行 $("#jstree_demo") .jstree({ "core": { ...
  • JStree 需要包含的资源

    2016-11-02 13:29:58
    JStree需要的jstree.min.js、jstree.js和样式文件
  • SSM-jsTree

    2017-12-21 15:06:04
    Spring+SpringMVC+mybatis+oracle数据库+jstree整合小案例
  • jsTree例子

    千次下载 热门讨论 2012-04-09 16:23:57
    使用jsTree的插件小例子,这个例子描述了html_data,json_data,xml_data插件
  • jsTree使用记录实例

    2020-10-21 00:10:27
    本文通过实例给大家详细介绍了jstree的使用技巧,需要的朋友可以参考下本

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 88,389
精华内容 35,355
关键字:

jstree