html树插件,jstree树插件的使用

jstree --使用JSON 数据组装成树

1.使用：

a. 需要jstress定义的样式

样式文件在dist/themes/default/style.min.css 中，所以html页面中需要添加代码

rel="stylesheet"

href="../dist/themes/default/style.min.css" />

需要包含CDNJS的css文件：

href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css"

/>

b. 需要使用jQuery1.9.0以上：

c. 包含JStree的js文件：

使用CDNJS的代码为：

2.加载配置，设置配置

1.首先在html代码中生成一棵树建立空的节点，取一个唯一的id；

2. 之后就可以通过js来生成树啦，先用jQuery获取DOM对象，接着调用jsTree的API来生成树，如下所示：

$('#treeDemo').jstree({

'core': {

"animation" : 0,

"check_callback": true,

"themes" : {"stripes" : true },

'data':

{!! $aSingelData !!},//php传过来的json格式数据

'multuple':true,

},

});

其中data这个参数都有哪些属性可以来设置，官网的API介绍的不全，我在浏览器检查其里获取了一下data对象，列入data参数的所有属性

a_attr: Object // 生成一个a标签节点的属性

li_attr: Object // 生成一个li标签节点的属性

children: Array // 所有子节点数组

data: Object // 此节点的数据(没传过。。)

icon: String // 此节点的图标(没传过。。)

id: String // 节点唯一的id，如果不传会默认生成

original: Object // 后台传过来的这个节点的所有数据

parent: String // 父节点的id

parents: Object // 所有的父节点数组

state: Object // 节点状态，这里面有五个固定属性，可以传默认值

// 分别是“checked”、“disabled”、“loaded”、“opened”、“selected”，均为布尔值

text: String // 节点显示的文本

type: String // 节点的类型，我只用过默认“default”

当然生成树除了data参数，还有很多别的参数可以设置，以下写一些我用过的，更详细请查阅官方API文档

3.插件

jsTree有些功能被移除核心，只有你需要的时候才使用它，为了确保使用插件，需要使用plugins参数配置选项，将插件名称添加到一个数组中。

常用到的插件有

"plugins" : [

"checkbox",//复选

"contextmenu",//菜单

"dnd",//拖动

"search",//搜索

"sort",//排序

"types",//类型

]

还有更多具体查阅官网文档。

4.例子：

$('#data').on('move_node.jstree',function(e,data)    {    //拖拽移动

varid=data.node.id,

parentid=data.parent;

if(parentid=='#'){

parentid=0;

}

position=data.position//相对于它本身前面有多少个节点位置.例如等于0，则它前面无节点,即它的下标位置就是0;

varurl='/adm/article/remove-to-tag';

vardata={

'_token': $("#_token").val(),

'id':id,

'parentid':parentid,

'position':position,

}

$.post(url,data,function(data) {

//     if(data.success==false){

//     swal(data.msg)

//    setTimeout('window.location.reload()',3000);

//     }else {

//       window.location.reload();

//    }},'json');

}).jstree({

'plugins': ['checkbox','types','themes','contextmenu','dnd','change'],

'types': { 'default': { 'icon': false// 删除默认图标}, },

'checkbox': { //一个布尔值，指示是应保留还是删除节点的选定样式。默认为true。

'keep_selected_style': false, //一个布尔值，指示单击节点上的任何位置是否应该单击复选框。默认为true。

'whole_node': false

},

'core': {

"animation": 0,

"check_callback": true,

"themes": { "stripes" : true},

'data':{!! $aSingelData !!},

'multuple':true,

},

"contextmenu":{select_node: false, show_at_node: true, items: function(o, cb){ //因为这里我们之后需要定义多个项,所以通过对象的方式返回

varactions={};//添加一个"新增"右键菜单

actions.create={//这里的create其实阔以随意命名,关键是里面的 这里面的 action回调方法

"separator_before"    : false,//Create这一项在分割线之前

"separator_after"    : true,//Create这一项在分割线之后

"_disabled"     : false, //false表示create 这一项可以使用; true表示不能使用

"label"  : "新增",  //Create这一项的名称 可自定义

"action": function(data){  //点击Create这一项触发该方法,这理还是蛮有用的

varinst

= $.jstree.reference(data.reference),

obj

= inst.get_node(data.reference);//获得当前节点,可以拿到当前节点所有属性

varid=obj.id;

//新加节点,以下三行代码注释掉就不会添加节点

inst.create_node(obj, {}, "last",function(new_node) {

setTimeout(function() {

inst.edit(new_node);

},0);//新加节点后触发 重命名方法,即 创建节点完成后可以立即重命名节点                                        $('#'+id).bind("change",function(){

vartag_name=$('#'+id).find('input').val();

if(tag_name){

varurl='/adm/article/add-to-tag';

vardata={

'_token': $("#_token").val(),

'parentid':id,                                          'tag_name':tag_name, }

$.post(url,data,function(data) {

setTimeout('window.location.reload()',3000);

if(data.success==false){

swal(data.msg)

}},'json');

}else{ swal('标签名不能为空!')

setTimeout('window.location.reload()',3000);

}

})

});

}

};

//添加一个"重命名"右键菜单

actions.rename={

"separator_before"    : false,

"separator_after"    : false,

"_disabled"            : false, //(this.check("rename_node",data.reference, this.get_parent(data.reference), "")),

"label"                : "重命名",

"action"            : function(data) {

varinst

= $.jstree.reference(data.reference),

obj = inst.get_node(data.reference);

inst.edit(obj);

varid=obj.id;

//父节点id

varparentid=obj.parent;

if(parentid=='#'){

parentid=0;

}

$('.jstree-rename-input').bind("change",function(){

varold_name=obj.original.text;

varnew_name=$('#'+id).find('input').val();

if(new_name){

if((old_name!=new_name)){

varurl='/adm/article/rename-to-tag';

vardata={'_token': $("#_token").val(),

'id':id,

'tag_name':new_name,

'parentid':parentid,

}

$.post(url,data,function(data) {

if(data.success==false){

swal(data.msg)

setTimeout('window.location.reload()',3000);

}

},'json');

}

}else{

swal('标签名不能为空!')

setTimeout('window.location.reload()',3000);

}

});

}

}

//添加一个"删除"右键菜单

actions.delete= {

"separator_before"    : false,

"icon"                : false,

"separator_after"    : false,

"_disabled"            : false, //(this.check("delete_node",data.reference, this.get_parent(data.reference), "")),

"label"                : "删除",

"action"            : function(data) {

varinst

= $.jstree.reference(data.reference),

obj

= inst.get_node(data.reference);

//获取所有顶级选定节点的数组(忽略所选节点的子节点)

varselIdArr=inst.get_top_selected();

if(confirm('确定要删除选中的标签吗?')){

varurl='/adm/article/del-to-tag';

vardata={

'_token': $("#_token").val(),

'id':selIdArr,

}

$.post(url,data,function(data) {

if(data.success){

if(inst.is_selected(obj)){

inst.delete_node(inst.get_selected());

} else{

inst.delete_node(obj);

}

}else{

swal(data.msg)

setTimeout('window.location.reload()',3000);

}

},'json');

}

}

};

returnactions;//返回右键菜单项

}

},

});

实现效果：