jquery下jstree简单应用 - v1.0_Javascript教程-查字典教程网
jquery下jstree简单应用 - v1.0
jquery下jstree简单应用 - v1.0
发布时间:2016-12-30 来源:查字典编辑
摘要:第一篇文章,具体使用也过去很长时间了,直接贴码:1.代码中使用json数据格式(直接在页面中组装成的,并非后台组装,具体方法:functio...

第一篇文章,具体使用也过去很长时间了,直接贴码:

1.代码中使用json数据格式(直接在页面中组装成的,并非后台组装,具体方法:function _callBack(d)) 2.提供右键菜单及功能实现

3.具有checkbox,提供获取选中节点ID方法:function getMenuIds()

复制代码 代码如下:

<script type="text/javascript" src="@{'/public/javascripts/jquery-1.4.2.min.js'}"></script>

<script type="text/javascript" src="@{'/public/javascripts/jsTree/jquery.jstree.js'}"></script>

<script type="text/javascript" src="@{'/public/javascripts/jsTree/_lib/jquery.hotkeys.js'}"></script>

<script type="text/javascript" src="@{'/public/javascripts/jsTree/_lib/jquery.cookie.js'}"></script>

<link type="text/css" rel="stylesheet" href="@{'/public/javascripts/jsTree/_docs/!style.css'}"/>

<script type="text/javascript">

</script>

<table width="100%" height="100%" cellspacing="0" CELLPADDING="0"

border="5px">

<caption align="top">

<div id='title' align="center"></div>

<br />

<input type="button" id='tmp' value='test'></input>

<a href='@{UserApplication.logout()}'> 退出</a>

<font color="green"><div id="userinfo"></div></font><br/>

<tr>

<td>

<div id='tree'></div>

</td>

<td>

<div id='content'

></div>

</td>

</tr>

</table>

<script type="text/javascript">

$("#title").html("js(jstree)和play!framework的学习及应用");

$("#content").html("js(jstree)和play!framework的学习及应用");

</script>

<script type="text/javascript">

function getMenuIds(){

var idArray = new Array();

$("#tree").find(".jstree-checked, .jstree-undetermined ").each(function(){

var isChild = true;

if($(this).find('li').length != 0){

idArray.push($(this).attr("id"));

isChild = false;

}

if(isChild){idArray.push($(this).attr("id"));}

});

//var ids=idArray.join(',');

alert(idArray);

//alert(ids);

}

function nodeEvent(desc,id){

$("#content").load("@{Application.codepiece()}",{"desc":desc,"id":id});

}

function _callBack(d){

var re = [], expIds = [], attr = {};

jQuery.each(d, function(i){

var state = 'closed';

var data = '';

var onclick = '';

var href = '';

var image = '';

if (!d[i].leaf == '0') {

state = null;

var desc = d[i].decription;

var id = d[i].id;

image = "@{'/public/images/file.png'}"

onclick = "nodeEvent("" + desc + ""," +id + ")";

href = "javascript:nodeEvent("" + desc + ""," + id + ");";

}else{

onclick = "";

//image = "@{'/public/images/folder.png'}"

}

re.push({

"attr": {

"id": d[i].id

},

"data": {

"title": d[i].name,

"attr": {"onClick" : onclick}

},

"state": state,

"icon": image

});

});

return re;

}

$(function () {

var ctmitems = {};

var isadmin = 0;

var plugins = [];

#{if user}

ctmitems = {"ccp": null};

plugins = [ "themes", "json_data", "ui","hotkeys", "crrm", 'dnd', "search", "types", "cookies", "contextmenu", "checkbox"];

isadmin = 1;

$('#userinfo').html('管理员:'+ '${session.get("user")}');

#{/if}

#{else}

$('#userinfo').html('普通用户:'+ '${session.get("user")}');

ctmitems = {"new": null,"ccp": null,"rename": null, "remove": null}

plugins = [ "themes", "json_data", "ui","hotkeys", "crrm", "search", "types", "cookies", "contextmenu" ];

#{/else}

var tree = $("#tree").jstree({

themes: {

"theme": "apple",

"dots" : false,

"icons" : true

},

"json_data": {

"ajax": {

"url": '@{Application.getData()}',

"async": true,

"data": function(n){

return {

"id" : n.attr ? n.attr("id") : null

};

},

"success": function(d){

return _callBack(d);

}

},

"progressive_render" : true

},

"ui":{

"initially_select":["1"]

},

"core" : {

"initially_open" : ["1", "7"]

},

"contextmenu": {

"select_node":false,

"show_at_node":true,

"items": ctmitems

},

"dnd" : {

"drop_target" : false,

"drag_target" : false

},

"plugins" : plugins

})

.bind("create.jstree", function (e, data) {

if(data.rslt.parent.attr("id"));

$.post(

"@{Application.addNode()}",

{

"operation" : "create_node",

"parentID" : data.rslt.parent.attr("id"),

"name" : data.rslt.name,

"isleaf" : 0

},

function (r) {

if(r.status) {

data.inst.refresh();

}

else {

$.jstree.rollback(data.rlbk);

alert("叶子节点不能再有子节点!");

}

}

);

})

.bind("createleaf.jstree", function (e, data) {

if(data.rslt.parent.attr("id"));

$.post(

"@{Application.addNode()}",

{

"operation" : "create_node",

"parentID" : data.rslt.parent.attr("id"),

"name" : data.rslt.name,

"isleaf" : 1

},

function (r) {

if(r.status) {

data.inst.refresh();

}

else {

$.jstree.rollback(data.rlbk);

alert("叶子节点不能再有子节点!");

}

}

);

})

.bind("move_node.jstree", function (e, data) {

data.rslt.o.each(function (i) {

$.ajax({

async : false,

type: 'POST',

url: "@{Application.moveNode()}",

data : {

"operation" : "move_node",

"id" : this.id,

"parentID" : data.rslt.np.attr("id"),

"isadmin" : isadmin

},

success : function (r) {

if(!r.status) {

data.inst.refresh();

}

else {

}

}

});

});

})

.bind("rename.jstree", function (e, data) {

if (data.rslt.new_name == data.rslt.old_name){

return ;

}

$.post(

"@{Application.editNode()}",

{

"operation" : "rename_node",

"id" : data.rslt.obj.attr("id"),

"name" : data.rslt.new_name

},

function (r) {

if(!r.status) {

data.inst.refresh();

}else{

}

}

);

})

.bind("remove.jstree", function (e, data) {

data.rslt.obj.each(function () {

$.ajax({

async : false,

type: 'POST',

url: "@{Application.removeNode()}",

data : {

"operation" : "remove_node",

"id" : this.id

},

success : function (r) {

if(!r.status) {

data.inst.refresh();

}

}

});

});

});

});

</script>

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类