jquery下jstree简单应用 - v1.0_jquery

第一篇文章，具体使用也过去很长时间了，直接贴码： 1.代码中使用json数据格式（直接在页面中组装成的，并非后台组装，具体方法：function _callBack(d)） 2.提供右键菜单及功能实现 3.具有checkbox，提供获取选中节点ID方法：function getMenuIds()

复制代码 代码如下: border="5px">

退出

style='width: 98%; height: 698px; padding-top: 10px; padding-left: 10px;padding-right: -10px;'> $("#title").html("js(jstree)和play!framework的学习及应用"); $("#content").html("js(jstree)和play!framework的学习及应用"); 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(); } } }); }); }); });

jquery下jstree简单应用 - v1.0_jquery

Articles Liés