jstree -- 使用JSON 数据组装成树
资源下载：http://download.csdn.net/detail/u012954072/9670907
JStree官网：https://www.jstree.com
1.使用：
a. 需要jstress定义的样式
样式文件在dist/themes/default/style.min.css 中，所以html页面中需要添加代码
<link
rel="stylesheet"
href="../dist/themes/default/style.min.css" />
需要包含CDNJS的css文件：
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css"
/>
b. 需要使用jQuery1.9.0以上：
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
c. 包含JStree的js文件：
<script
src="dist/jstree.min.js"></script>
使用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.例子：
<script type="text/javascript">
$('#data').on('move_node.jstree',function(e,data) { //拖拽移动
var id=data.node.id,
parentid=data.parent;
if(parentid=='#'){
parentid=0;
}
position=data.position//相对于它本身前面有多少个节点位置.例如等于0，则它前面无节点,即它的下标位置就是0;
var url='/adm/article/remove-to-tag';
var data={
'_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){ //因为这里我们之后需要定义多个项,所以通过对象的方式返回
var actions={};//添加一个"新增"右键菜单
actions.create={//这里的create其实阔以随意命名,关键是里面的 这里面的 action回调方法
"separator_before" : false,//Create这一项在分割线之前
"separator_after" : true,//Create这一项在分割线之后
"_disabled" : false, //false表示create 这一项可以使用; true表示不能使用
"label" : "新增", //Create这一项的名称 可自定义
"action": function (data){ //点击Create这一项触发该方法,这理还是蛮有用的
var inst
= $.jstree.reference(data.reference),
obj
= inst.get_node(data.reference);//获得当前节点,可以拿到当前节点所有属性
var id=obj.id;
//新加节点,以下三行代码注释掉就不会添加节点
inst.create_node(obj, {}, "last",function(new_node) {
setTimeout(function() {
inst.edit(new_node);
},0);//新加节点后触发 重命名方法,即 创建节点完成后可以立即重命名节点 $('#'+id).bind("change",function(){
var tag_name=$('#'+id).find('input').val();
if(tag_name){
var url='/adm/article/add-to-tag';
var data={
'_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) {
var inst
= $.jstree.reference(data.reference),
obj = inst.get_node(data.reference);
inst.edit(obj);
var id=obj.id;
//父节点id
var parentid=obj.parent;
if(parentid=='#'){
parentid=0;
}
$('.jstree-rename-input').bind("change",function(){
var old_name=obj.original.text;
var new_name=$('#'+id).find('input').val();
if(new_name){
if((old_name!=new_name)){
var url='/adm/article/rename-to-tag';
var data={'_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) {
var inst
= $.jstree.reference(data.reference),
obj
= inst.get_node(data.reference);
//获取所有顶级选定节点的数组（忽略所选节点的子节点）
var selIdArr=inst.get_top_selected();
if(confirm('确定要删除选中的标签吗?')){
var url='/adm/article/del-to-tag';
var data={
'_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');
}
}
};
return actions;//返回右键菜单项
}
},
});
</script>
实现效果：
网友评论