1。首先需下载jstree的插件点击打开链接
2。在页面引入插件js文件css文件
& lt;链接rel="样式表" href=" https://www.yisu.com/zixun/plugins/jstree/themes/classic/style.css " rel=巴獠縩ofollow”比;
& lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/plugins/jstree/_lib/jquery.js "祝辞& lt;/script>
type=" text/javascript脚本& lt;”
src=" https://www.yisu.com/zixun/plugins/jstree/_lib/jquery.cookie.js "祝辞& lt;/script>
type=" text/javascript脚本& lt;”
src=" https://www.yisu.com/zixun/plugins/jstree/_lib/jquery.hotkeys.js "祝辞& lt;/script>
& lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/plugins/jstree/jquery.jstree.js "祝辞& lt;/script>之前
3。初始化控件
, 1) html
& lt; div id=耙约敖酉吕础崩?把菔尽弊４? lt;/div>之前
2) js使用以及接下来来初始化树形控件
& lt;脚本type=" text/javascript类=霸吹陀凇北?
$(函数(){
$(" #以及接下来”).jstree (
{
" json_data ": {
“ajax”: {
“url”:“http://localhost: 8080/MemberManager/DepartmentTreeJson”,
“数据”:函数(n) {//AJAX请求的结果是美联储“数据”选项
返回{
“操作”:“get_children”,
“id”: n。attr & # 63;n
.attr (
“id”)
.replace (
“node_”,
" ")
: 1
};
}
}
}，
“插件”:(
“主题”,
“json_data”,
“用户界面”,
“crrm”,
“快捷菜单”,
“搜索”,
}）
.bind (“loaded.jstree”,
函数(事件、数据){
}）
.bind (
“select_node.jstree”,
函数(事件、数据){
如果(data.rslt.obj
.attr (" id ") !=未定义){
}
}）
.bind (
“remove.jstree”,
函数(e,数据){
data.rslt.obj.each(函数(){
. ajax({美元
异步:假的,
类型:“文章”,
url: http://localhost: 8080/MemberManager/CreateNodeForDepartment”,
数据:{
“操作”:“remove_node”,
“id”: this.id。替换(“node_”、“”)
}，
成功:函数(r) {
如果(! r.status) {
data.inst.refresh ();
}
}
});
});
}）
.bind (
“remove.jstree”,
函数(e,数据){
data.rslt.obj.each(函数(){
. ajax({美元
异步:假的,
类型:“文章”,
url: http://localhost: 8080/MemberManager/CreateNodeForDepartment”,
数据:{
“操作”:“remove_node”,
“id”: this.id
.replace (
“node_”,
" ")
}，
成功:函数(
r) {
如果(! r.status) {
data.inst.refresh ();
}
}
});
});
}）
.bind (
“create.jstree”,
函数(e,数据){
$ . post (
“http://localhost: 8080/MemberManager/CreateNodeForDepartment”,
{
“操作”:“create_node”,
“id”: data.rslt.parent
.attr (
“id”)
.replace (
“node_”,
" "),
“位置”:data.rslt.position,
“标题”:data.rslt.name,
“类型”:data.rslt.obj
.attr (rel)
}，
函数(r) {
如果(r.status) {
美元(data.rslt.obj)。attr (“id”、“node_”+ r.id);
其他}{
data.inst.refresh ();
美元.jstree.rollback (data.rlbk);
}
});
}）
.bind (
“rename.jstree”,
函数(e,数据){
$ . post (
“http://localhost: 8080/MemberManager/CreateNodeForDepartment”,
{
“操作”:“rename_node”,
“id”: data.rslt.obj
.attr (
“id”)
.replace (
“node_”,
" "),
“标题”:data.rslt.new_name
}，
函数(r) {
如果(! r.status) {
data.inst.refresh ();
美元.jstree.rollback (data.rlbk);
}
});
}）//1)加载事件火灾一旦数据解析和插入//2),但如果您使用的是饼干插件或核心“initially_open”选项:
。(“reopen.jstree”,
函数(事件、数据){
}）//3),但如果您使用的是饼干插件或UI initially_select的选择:
。(“reselect.jstree”,
函数(事件、数据){
});
});
& lt;/script>之前
& lt;/pre> 4。代码解析& lt; p> & lt;/p> & lt; p> & lt; pre name==癹ava”比“代码”类;
进口并不知道;
公共类部门{//部门id
私人字符串departmentid;//部门名称
私人字符串名称;//父级部门ID
私人字符串parentid;//同级之间的排序。排序id小的排前面
私人字符串命令;//子节点
私人List
