jquery에서 jstree를 간단하게 적용 - v1.0_jquery

첫 번째 글, 구체적인 용도는 오래됐고, 코드는 직접 게시합니다: 1. 코드에서 json 데이터 형식이 사용됩니다(백그라운드가 아닌 페이지에서 직접 조립됩니다. 메소드: function _callBack(d) ) 2. 마우스 오른쪽 버튼 클릭 메뉴 및 기능 구현 제공 3. 체크박스를 사용하여 선택한 노드 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(','); 경고(idArray); //경고(ID); } 함수 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].description; 🎜>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": 상태, "아이콘": 이미지 }); 반품; } $(function () { var ctmitems = {}; var isadmin = 0; var 플러그인 = []; #{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({ 테마: { "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" : 플러그인 }) .bind("create.jstree", function (e, data) { if(data.rslt.parent.attr("id")); $.post( "@{Application.addNode()}", { "작업" : "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()}", { "작업" : "create_node", "parentID" : data.rslt.parent.attr("id"), "name" : data.rslt.name, "isleaf" : 1 }, function (r) { if(r.status) { data.inst. 새로 고침(); } else { $.jstree.rollback(data.rlbk) alert("叶子节点不能再有子节点!"); } } ); }) .bind("move_node.jstree", 함수(e, 데이터) { data.rslt.o.each (함수 (i) { $.ajax({ async : false, type: 'POST', url: "@{Application.moveNode()}", data : { "작업" : "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()}", { "작업 " : "rename_node", "id" : data.rslt.obj.attr("id"), "name" : data.rslt.new_name }, 함수(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 : { "작업" : "remove_node", "id" : this.id }, 성공 : 함수 (r) { if(!r.status) { data.inst.refresh(); } } }); }); }); });

jquery에서 jstree를 간단하게 적용 - v1.0_jquery

관련 기사