请教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 == EptTypedyj) {//点击的是电业局节点

var dyj_url = "pages/omds/ept/dyj/dyjjspdyj="+dyj_id+"&"+nodeParam;

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

topdoCreateTabItem(dyj_url,

dyj_name,

dyj_url+"&random="+Mathrandom(),

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属性

修改方法：

JQuery

$('#子节点id')parent()attr('id');//通过子元素id获取父元素

js

documentgetElementById("子节点id")parentNodegetAttribute("id");

1、JS即Javascript，Javascript是一种由Netscape的LiveScript发展而来的脚本语言，主要目的是为了解决服务器终端语言，比如Perl，遗留的速度问题。当时服务端需要对数据进行验证，由于网络速度相当缓慢,只有288kbps，验证步骤浪费的时间太多。于是Netscape的浏览器Navigator加入了Javascript，提供了数据验证的基本功能。

2、能够具有交互性，能够包含更多活跃的元素，就有必要在网页中嵌入其它的技术。如:Javascript、VBScript、Document Object Model(DOM，文档对象模型)、Layers和 Cascading Style Sheets(CSS，层叠样式表)，这里主要讲Javascript。那么Javascript是什么东西Javascript就是适应动态网页制作的需要而诞生的一种新的编程语言，如今越来越广泛地使用于Internet网页制作上。

择ztree替代jstree是因为ztree的官网的api文档详细，容易理解。

下面说下在开发中ztree的2个功能的实现

1、给树赋值如下图

代码如下：

//修改-人员管理

function achievementmag_peopedit_click(id){

achievementmag_peop_add=false;

achievementmag_peop_validformresetForm();

//以下代码实现树赋值

var treeObj = $fnzTreegetZTreeObj("achievementmag_peop_structure");//根据 treeId 获取 zTree 对象

var node=treeObjgetNodeByParam("id",id, null);//根据节点数据的属性(id)获取条件完全匹配的节点数据 JSON 对象集合

treeObjselectNode(node,false);//根据节点数据选中指定节点,false表示单独选中，之前选中的节点会被取消选中状态，为true 表示追加选中

jsp从mysql数据库读取数据，并填充到树形结构菜单并展现出来的实现方法：

1、引入jquerytreeviewjs树控件

<script type="text/javascript" src="jquery/easyui/jqueryminjs"></script>

<script type="text/javascript" src="jquery/easyui/jqueryeasyuiminjs"></script>

2、jsp页面中获取后台mysql数据，并传到jsp页面来

<%

// 数据库的名字

String dbName = "zap";

// 登录数据库的用户名

String username = "sa";

// 登录数据库的密码

String password = "123";

// 数据库的IP地址，本机可以用 localhost 或者 127001

String host = "127001";

// 数据库的端口，一般不会修改，默认为1433

int port = 1433;

String connectionUrl = "jdbc:sqlserver://" + host + ":" + port + ";databaseName=" + dbName + ";user=" + username

+ ";password=" + password;

//

//声明需要使用的资源

// 数据库连接，记得用完了一定要关闭

Connection con = null;

// Statement 记得用完了一定要关闭

Statement stmt = null;

// 结果集，记得用完了一定要关闭

ResultSet rs = null;

try {

// 注册驱动

ClassforName("commicrosoftsqlserverjdbcSQLServerDriver");

// 获得一个数据库连接

con = DriverManagergetConnection(connectionUrl);

String SQL = "SELECT from note";

// 创建查询

stmt = concreateStatement();

// 执行查询，拿到结果集

rs = stmtexecuteQuery(SQL);

while (rsnext()) {

%>

<tr>

3、填充树形菜单：

{

id : "string" // will be autogenerated if omitted

text : "string" // node text

icon : "string" // string for custom

state : {

opened : boolean // is the node open

disabled : boolean // is the node disabled

selected : boolean // is the node selected

},

children : [] // array of strings or objects

li_attr : {} // attributes for the generated LI node

a_attr : {} // attributes for the generated A node

}

$('#tree')jstree({

'core' : {

'data' : function (obj, cb) {

cbcall(this,

['Root 1', 'Root 2']);

}

}});

以上就是关于请教jstree的一些用法全部的内容，包括:请教jstree的一些用法、jstree中想要选中子节点，父节点就会变成选中状态，需要如何修改。、怎么把字符串赋值给treeNodes等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！