jstree 怎么使用

JsTree是一个基于JQuery的框架，实现简单，功能比较齐全。项目中急盯喊圆于修改树控件，现学现卖，实现了简单的功能，仅包含异步加载，动态设置节点样式图标，靠着自己看帮助文档，多次尝试一步步完成。

1. 实现异步加载

$("#tvBox").tree({

data : {

async : true,

type : "xml_flat",

[color=red]opts : {

url : URL

}

},

types : {

"default" : {

renameable : false,

deletable : false,

creatable : false,

draggable : false

}

},

ui:{

theme_name : "渗型classic"

},

callback : {

beforedata : function(NODE, TREE_OBJ) {

setParams(NODE, TREE_OBJ)// 获取参数信息

//向服务器传递参数

return { type : type_id, dyj : dyj_id, bdz : bdz_id, jg : jg_id, ept : ept_id }

},//end beforedata

onselect : function(NODE, TREE_OBJ) { // 单击函数，点击设备节点名称的时凯塌候在右边显示信息

setParams(NODE, TREE_OBJ)// 获取参数信息

var ids = $(NODE).attr("id").split("-")

// alert(ids[6])

var subType = ids[1]

var dydj = ids[2]

//alert(type_id+" -- "+ept_id)

var nodeParam="type="+type_id+"&subType="+subType+"&bdz="+bdz_id+"&dydj="+dydj+"&ept="+ept_id

if (type_id == EptType.dyj) {//点击的是电业局节点

var dyj_url = "pages/omds/ept/dyj/dyj.jsp?dyj="+dyj_id+"&"+nodeParam

//alert(dyj_url+" -- "+dyj_name)

top.doCreateTabItem(dyj_url,

dyj_name,

dyj_url+"&random="+Math.random(),

dyj_name)//在'主页'标签中显示

}

}, //end onselect

// 只在树第一次加载的时候调用

onload : function(TREE_OBJ) {

$("#tvBox ul li a:first-child ins").hide()//电业局节点不显示图标

}

}// end callback

})// end tree()

JsTree支持多种格式的数据源，这里使用了xml格式，其实json格式更好。data中代码即可实现异步加载，通过设置UI参数可以修改主题，callback参数可以对一些事件作出响应，如beforedata可以在发送异步请求之前添加url参数，onselect可以响应生成的树中节点的单击事件，还有open在节点被打开的时候被调用，等等，可以帮助实现很多功能……

--1 碰到比较麻烦的事情是展开子节点向后台传递参数时需要用到父节点的id等信息，需要用到parent函数。

--2 另外，当展开一个节点从后台没有查询到子节点时需要返回<root></root>，不能使<root>,我当时用jdom生成xml碰到后者，出现了问题。

--3 callback中的事件需要自己去尝试才能知道什么时候被触发

2. 实现节点换肤

项目中涉及到得是电业局--变电站--间隔--设备，对于后三者节点图标必须与其状态对应，且状态是动态的，所以需要后台在生成xml的时候设置icon属性

一个带有右键衫简 *** 作的树形菜单

$(document).ready(function(){

$.ajaxSetup({cache:false})

$("#browser").tree({

data : {

type : "json",

url : src,

async : true,

async_data : function (NODE) {

return { parent_Id : $(NODE).attr("id") || 0}

}

},

lang:{

loading:"目录加载中……"颤旁

},

rules:

{

draggable : "all" //这个设置可以使得节点进行拖动 *** 作

},

ui:{

context : [ //自定茄塌橡义右键 *** 作的可 *** 作内容

{

id : "create",

label : "添加下级目录", //右键d出菜单的此项 *** 作屏显字样

visible : function (NODE, TREE_OBJ) { if(NODE.length != 1) return falsereturn TREE_OBJ.check("creatable", NODE)}, //允许节点被右击时出现 *** 作菜单

icon: "<%=request.getContextPath() %>/css/themes/default/create.png",//右键d出菜单的此项 *** 作图标

action : function (NODE, TREE_OBJ) {

//进行此项 *** 作，将有这个函数事件被响应

}

},

"separator"//这个是在两个 *** 作之间画一条分隔线

,

{

id : "edit",

label : "编辑目录信息",

visible : function (NODE, TREE_OBJ) { if(NODE.length != 1) return falsereturn TREE_OBJ.check("creatable", NODE)},

icon: "<%=request.getContextPath() %>/image/reg2.gif",

action : function (NODE, TREE_OBJ) {

openWindow('myurl','','',function(){treeRefresh($(NODE).attr("id"))})

}

},

"separator"

,

{

id : "privilege",

label : "设置目录权限",

visible : function (NODE, TREE_OBJ) { if(NODE.length != 1) return falsereturn TREE_OBJ.check("creatable", NODE)},

icon: "<%=request.getContextPath() %>/css/themes/default/rename.png",

action : function (NODE, TREE_OBJ) {

openWindow('myurl','','',function(){treeRefresh($(NODE).attr("id"))})

}

},

"separator",

{

id : "delete",

label : "删除",

visible : function (NODE, TREE_OBJ) { if(NODE.length != 1) return falsereturn TREE_OBJ.check("creatable", NODE)},

icon: "<%=request.getContextPath() %>/css/themes/default/remove.png",

action : function (NODE, TREE_OBJ) {

var tree=$.tree_reference("browser")

openWindow('myurl','','',function(){

//下边的.parent()和.refresh()均为v0.9.8版本提供，如果你使用的是其他版本如v0.9.6等，这些将不被支持。

NODE=$(tree.parent(NODE))

if($(NODE).attr("id")==undefined){

tree.refresh()

}else{

TreeRefresh()

}

})

}

},

"separator",

{

id : "others",

label : "其他 *** 作",

visible : function (NODE, TREE_OBJ) { if(NODE.length != 1) return falsereturn TREE_OBJ.check("creatable", NODE)},

icon: "<%=request.getContextPath() %>/css/images/cut.png",

action : function (NODE, TREE_OBJ) {

alert("暂无可提供 *** 作。")

}

}

]

},

callback : {

onselect: function(node) {

//(a)

}

}

})

function treeRefresh(nodeid){

var rid=nodeid

var tree=$.tree_reference("browser")

var par_node=tree.parent($("#"+rid))

tree.refresh(par_node)

}

})

三横杠设置。

首先1.点击打开档镇vue手机软空雀件，点击打开视频设置，就可以看到总时长和分段数，然后按照时长和分段数来进行调试时间。2.或者点击主页右上角的三横杆，选择设置就可以了。

VUE是iOS和Android平台上的一款Vlog社区与编辑工具，允许用户通过简单的 *** 作实现Vlog的拍摄.剪辑.细调.和发布，记录与斗蠢早分享生活，还可以在社区直接浏览他人发布的Vlog，与Vloggers互动。随着手机摄像头的发展，越来越多的人开始使用手机拍照和摄像。

---