jstree

1在开发的时候会用到树，jstree官网第一次打开后面几天都进不去，为了下次使用不用从头看，特记录学习心得 在 https://github.com/vakata/jstree#the-required-json-format 可以看到jstree源码，以及介绍 2.引用jquery和jstree，以及相应的样式style.css 满足ul结构，直接写在html里面 <div id="tree_1" class="tree-demo"> <ul> <li> Root node 1 <ul> <li data-jstree='{ "selected" : true }'> <a href="javascript:;"> Initially selected </a> </li> <li data-jstree='{ "icon" : "fa fa-briefcase icon-state-success " }'> custom icon URL </li> <li data-jstree='{ "opened" : true }'> initially open <ul> <li data-jstree='{ "disabled" : true }'> Disabled Node </li> <li data-jstree='{ "type" : "file" }'>

1.项目环境 想要将显示区域作为查询的条件，而区域是树形结构并且可以多选，并且数据量很大，是从中国到乡镇的地区数据，如果我们一次将所有的区域数据查出直接塞到树形结构，那么页面将会卡死，因此我们需要每次加载部分数据，如果展开下级，那么显示下一级所有的区域，这样可以解决数据量大而导致页面无法缓存的问题。 2.导入样式表 <link type="text/css" rel="stylesheet" href="../js/jsTree/themes/default/style.min.css"> 3.导入js包 <!-- jquery的js包 --> <script type="text/javascript" src="../js/jquery.min.js"></script> <!-- jsTree树形结构插件--> <script type="text/javascript" src="../js/jsTree/jstree.min.js"></script> 4.html <div id="regionTree" style="margin-left:20px;"></div> 5.区域树 function initRegionTree(){ $("#regionTree").jstree({ 'plugins' : ["checkbox"], //出现选择框

上一篇博客中演示了JsTree的基本使用，使用的是本地不可变数据进行Demo绘制。 博客地址 ： https://blog.csdn.net/hewenbo111/article/details/90182394 在实际使用中，后台数据经常需要异步获取，所以本次介绍在实际绘制文件树过程中使用的异步加载数据的方式。 绘制目标： ①：异步加载初始化 Jstree 的数据； ②：点击加载初始化后的节点数据； 实现方式： 例1： 使用异步加载的方式通过后台请求返回JSON绘制JSTree； 前提了解： 因暂不涉及后台的具体请求及实现，所以仅演示异步加载的方式， 数据仍然的伪造的原博客数据，仅仅保存json文件的地址作为url的路径； 1.1 修改并解读jstree 方法； 1.2 打开页面观察实际绘制效果； 提示 ：若直接使用谷歌浏览器打开本地的html而不是通过访问服务器上静态资源的方式 进行页面展开会有访问本地文件的跨域问题，解决方式可以参考博客： https://wdd.js.org/origin-null-is-not-allowed.html 例 2： 单个节点点击后一步请求数据，添加子节点； 2.1 添加节点的点击事件； jsTree的节点点击并没有click方法，而提供的是select_node方法。 2.2 使用本地数据或Ajax获取数据，添加子节点；

该文前提：已经实现从服务器获取json数据初始化jsTree这一步。 js中初始化jstree $('#contact-org').jstree({ "data" : { "dataType": 'json', "url":function(node){ return ctxPath + "/v-contact?queryOrg"; }, "data":function(node){ return {"id" : node.id}; } } } } 返回的json数据，对应用于树节点的数据结构： { "attr" : {"id":"标示 "}, "data" :{"title": " 显示的标题 " 　　　　 ,"attr":{"href" :"可以自定义一些值，在UI 解析" 　　 　 ,"class": "jstree-search"//可以预先在后台给节点设置样式 } 　 　　,"icon":" 图标的地址 " 　　}, "state" : "closed" 或"open", "children":[{子节点1},{子节点2}] } 实现子节点动态加载的关键所在： 返回的数据中将children设置成布尔型true或者false。 当设置成true时，点击该树节点，jstree就会进行一次请求，请求的url和data配置就是初始化jstree中的那些。 当设置成false时

2010.08.20——— jstree 异步加载 参考：[url]http://junchao.iteye.com/blog/698823[/url] h[url]ttp://blog.csdn.net/am20100204/archive/2010/07/07/5719623.aspx[/url] 目标：不完全加载 点击根节点，加载一点数据 避免大数据量加载 速度过慢 用品：jstree0.99和jquery-1.3.2.js 注意：[color=red]0.99a以jquery-1.3.2.js为js库为基础构建，后者1.0以jquery-1.4.2.js为基础构建[/color] 准备： json数据格式： [ { \"attributes\" : { \"id\" : \"1\" }, \"data\" : {\"title\" : \"节点1\",\"attributes\" : { \"href\" : \"http://jstree.com\" }} , \"state\": \"closed\" } , { \"attributes\" : { \"id\" : \"2\" }, \"data\" : {\"title\" : \"节点2\",\"attributes\" : { \"href\" : \"http://2jstree.com\" }}, \

最近在搞一个项目的维护，有一个问题是把原来的树导航变成多级的，原来的那个导航是JsTree的，但我又不熟悉，遂头疼了好久。。。 终于，他还是出来了，下面就贴上主要代码和思路，因为我在搞这个东西的时候在园子里和网上没有找到适合的代码，或许我写的正好是你要找的呢也不一定啊。。。 1.此处是前台的代码： <script type="text/javascript"> $(function () { var id; if ("$!id" != "") { id = "$!id"; } $("#MuLuHtml").tree({ data: { async: false, cache: false, opts: { url: "GetTree4Ajax.aspx?$!{dateTime.Now.toString('yyyyMMddHHmmssffff')}" } }, lang: { loading: '目录加载中...' }, selected: [id], opened: ["muluRoot"], ui: { theme_name: "classic" }, types: { "Root": { draggable: false, deletable: false, renameable: false, icon: { image: "/Theme/1/base/images/pi

$("#jqTree").jstree({ //这个例子只是一部分的功能，还有待优化的地方 "json_data" : { "ajax" : { "type":"get", // "cache":false, "url" : "请求json的url", "data" : function (n) { //传给后台的参数 return { "orgid" : n.attr ? n.attr("id").replace("node_","") : 0 //这里的orgid是我传给后台的参数名字 }; }, "success" : function (data) {//后台返回的参数，由于后台返回的参数jstree解析不了， var dataArray=new Array();//所以我要拼成jstree能解析的对象数组，然后直接return $.each(data.orglist,function(i,item){ var JSONObj={"data" :{ "title":item.name}, "attr" : { "id" : item.id} }; if(item.type!="student"){//student标识是叶子节点 JSONObj.state="closed";//此值是标识此节点是否有子节点的 } dataArray.push(JSONObj); });

I am working on some project module where i am using jstree.js plugin. I am getting following JSON via web service call: [ { "name":"Folder1", "attributes": { "SubFolder1-1":"value1-1", "SubFolder1-2":"value1-2", ... "SubFolder1.7":"value1-7", "SubFolder1.8":"value1-8" } }, { "name":"Folder2", "attributes": { "SubFolder2-1":"value2-1" } }, { "name":"Folder3", "attributes": { "SubFolder3-1":"value2-1" } } ] But jsTree.js is not accepting the JSON format, It accept following format: { "data" : "node_title", "attr" : { "id" : "node_identificator", "some-other-attribute" : "attribute_value" },

Im trying to create a 'jsTree' treeview that gets it's data from a .Net webservice. Everything is working, except for the a-node's href attribute. Whatever I try, it always renders as '#'. As I understand from the documentation, all attributes in any data object get copied to the a-node. Below is an example of my current json object. Can anyway figure out why the href attribute isn't copied to the nodes? [ { "attributes" : { "id" : "rootnode_2", "rel" : "root2" }, "children" : [ { "attributes" : { "id" : "childnode_9", "rel" : "folder" }, "children" : [ { "attributes" : { "id" : "childnode_23"

I have content pages in the database (using nested sets) and I need to show it by jQuery jsTree plugin. It's need to return JSON with data like this: [ { data: 'node1Title', children: [ { data: 'subNode1Title', children: [...] }, { data: 'subNode2Title', children: [...] } ] }, { data: 'node2Title', children: [...] } ] What I need for do it? I can transform an array of hashes to JSON but I don't understand how to generate an array. Sample data: **'pages'table** id parent_id level lkey rkey name 1 0 1 1 14 index 2 1 2 2 7 info 3 1 2 8 13 test 4 2 3 3 4 about 5 2 3 5 6 help 6 3 3 9 10 test1 7 3 3