使用jsTree树形控件【4】

标准JSON格式 使用JSON渲染jsTree的话，需要指定JSON的格式，jsTree可以使用两种JSON格式，在标准JSON格式中，没有必需的属性，而且还可以添加自定义的属性。 jsTree会自动创建相应的树形结构，通过设置parent = "#"来设置节点为父节点。 这种结构适合于需要一次性渲染树形结构或者数据保存在数据库的情况。 标准JSON格式 $('#using_json').jstree({ 'core' : { 'data' : [ 'Simple root node', { text' : 'Child 1' }, 'Child 2' ] } ] } }); 可选JSON格式 $('#using_json_2').jstree $('#tree').jstree({ 'core' : { 'data' : function (obj, cb) { cb.call(this,

使用jsTree树形控件【2】配置

实例配置 上一节入门篇中的例子使用了jsTree控件的默认配置，其实我们也可以自定义配置。 例如，下面的代码修改控件的主题： $.jstree.defaults.core.themes.variant = "large"; $('#jstree').jstree(); 上面的代码虽然修改了控件的主题 ，但是后面再创建jsTree的实例，将会使用同一各配置，有没有办法实现使用不同的配置来创建jsTree实例了，答案就时直接给实例对 象传递一个配置对象。 $('#jstree').jstree({ "plugins" : [ "wholerow", "checkbox" ] }); 从上面的代码可以看出，配置对象中包含一个plugins键，而对应的键值为字符串所组成的数组 例如： $('#jstree').jstree({ "core" : { "themes" : { "variant" : "large" } }, "checkbox

使用jsTree树形控件【1】入门

下载控件 从jsTree下载。 "></script> 引入jsTree 部署环境使用压缩版的jsTree.min.js，如果是开发环境可以使用jsTree.js <script src="dist/<em>jstree</em>.min.js"></ script> 创建jsTree实例 DOM加载完毕之后，就可以创建jsTree实例对象了。 $(function () { $('#jstree_demo_div').jstree(); }); 监听事件 jsTree使用事件来监听用户与属性控件之间的交互，所以给jsTree绑定事件也很容易， #jstree').jstree(true).select_node('child_node_1'); $('#jstree').jstree('select_node', 'child_node_

使用jsTree树形控件【3】HTML结构

基本结构 jsTree可以将无序列表转换成树形结构，最简单的HTML结构就是使用

以及
• ，而且最好外面还嵌套了一个
  $('#html1').jstree() HTML结构如下： 来选中相应节点，还可以设置
• 元素的class为jstree-open来展开子节 …
• Root
<li data-jstree='{"opened":true,"selected":true}'>Root
<li data-jstree='{"disabled":true}' >Child <li data-jstree='{"icon":"//jstree.com/tree.png"}'> Child <li data-jstree 使用AJAX异步加载必须配置$.jstree.defaults.core.data参数，ajax的参数与jQuery中的ajax请求类似。

用于创建树形部件的 jQuery 插件：jsTree

jsTree 是一个基于 jQuery 和 Sarissa 的免费网页树形部件，它设置灵活，并且支持几乎主流的浏览器，如：Internet Explorer 6 +, Mozilla Firefox, jsTree 支持三种数据源头： 预先定义好的 HTML -嵌套的列表结构 JSON XML jsTree 的主要功能有： 同步导入 - 只需要提供一个 URL，就会去请求数据（只适合 JSON 和 XML 下载：jsTree。

使用jsTree树形控件【5】监听事件与调用实例方法

监听事件 jsTree可以监听多种事件，可以从这里查看事件列表。 $('#jstree') // listen for event .on('changed.jstree', function (e, data) { var i, j, r = []; ); } $('#event_result').html('Selected: ' + r.join(', ')); }) // create the instance .jstree (); 调用实例方法 调用实例方法有以下三种方式： // 3 ways of doing the same thing $('#jstree').jstree(true) .select_node( 'mn1'); $('#jstree') .jstree('select_node', 'mn2'); $.jstree.reference('#jstree') .select_node('mn3

使用jstree创建无限分级的树(ajax动态创建子节点)

"jstree-closed" : "jstree-leaf"; $("#tree").append("