j2ee 简单网站搭建：（十）jquery ztree 插件使用入门
生活随笔
收集整理的這篇文章主要介紹了
j2ee 简单网站搭建：（十）jquery ztree 插件使用入门
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
為什么80%的碼農(nóng)都做不了架構(gòu)師？>>> ??
《j2ee 簡單網(wǎng)站搭建：（一） windows 操作系統(tǒng)下使用 eclipse 建立 maven web 項目》
《j2ee 簡單網(wǎng)站搭建：（二）添加和配置 spring + spring-mvc 的 mvc 開發(fā)環(huán)境》
《j2ee 簡單網(wǎng)站搭建：（三）在搭建好的 spring maven web 項目中加入 mybatis 訪問數(shù)據(jù)庫》
《j2ee 簡單網(wǎng)站搭建：（四）將 freemaker 模板引擎作為 spring-mvc 展現(xiàn)層》
《j2ee 簡單網(wǎng)站搭建：（五）使用 jcaptcha 生成驗證碼圖片》
《j2ee 簡單網(wǎng)站搭建：（六）使用 hibernate validation 實現(xiàn) domain 層實體類驗證》
《j2ee 簡單網(wǎng)站搭建：（七）使用 shiro 結(jié)合 jcaptcha 實現(xiàn)用戶驗證登錄》
《j2ee 簡單網(wǎng)站搭建：（八）使用 jquery-validate 實現(xiàn)頁面驗證入門》
《j2ee 簡單網(wǎng)站搭建：（九）jquery datatables + jquery ui dialog 插件使用入門》
《j2ee 簡單網(wǎng)站搭建：（十）jquery ztree 插件使用入門》
《j2ee 簡單網(wǎng)站搭建：（十一）ckeditor 控件使用入門》
ztree 版本 v3.5.28
一 從官方網(wǎng)站下載 ztree 的 css 和 js 文件，引入項目的 web 目錄中
網(wǎng)站地址 http://www.treejs.cn/v3/main.php#_zTreeInfo
二 在 html 頁面 <head> 標(biāo)簽中加入 css 文件
<!-- zTree CSS --> <link rel="stylesheet" href="你的文件路徑/metroStyle.css" type="text/css">三 在 html 頁面 <body> 標(biāo)簽內(nèi)添加綁定 ztree 插件的 ul 標(biāo)簽，本例中 ul 標(biāo)簽的 id 設(shè)置為 categorytree
<ul id="categorytree" class="ztree" style="width: 100%"></ul>四 在 html 頁面 </body> 標(biāo)簽內(nèi)添加綁定 ztree 插件 js 文件以及 javascript 代碼
<script type="text/javascript" src="你的文件路徑/jquery.ztree.core.min.js"></script> <script type="text/javascript" src="你的文件路徑/jquery.ztree.excheck.js"></script> <script type="text/javascript" src=你的文件路徑/jquery.ztree.exedit.js"></script><!-- Page-Level Demo Scripts - Tables - Use for reference --> <script>var zTree = $.fn.zTree.getZTreeObj("categorytree"); // 獲得樹對象// zTree 的參數(shù)配置，深入使用請參考 API 文檔（setting 配置詳解）var setting = {view : {selectedMulti: false, // 取消多選addHoverDom: addHoverDom, // 鼠標(biāo)選中后顯示增、改按鈕removeHoverDom: removeHoverDom // 鼠標(biāo)移除后顯示增、改按鈕},data :{ // 設(shè)置節(jié)點的屬性值以及從服務(wù)端傳送過來的數(shù)據(jù)向節(jié)點綁定的參數(shù)值simpleData : {enable : true,idKey : 'id', // 綁定服務(wù)端傳過來的 id 參數(shù)pIdKey : 'pid', // 綁定服務(wù)端傳過來的 pid 參數(shù)rootPid : 0, // 根節(jié)點的父節(jié)點 id 值status : 'status' // 綁定服務(wù)端傳過來的 status 參數(shù)}},edit : { // 對節(jié)點編輯時進行的設(shè)置enable : true, // 允許編輯showRemoveBtn : false, // 是否顯示 刪除節(jié)點 按鈕showRenameBtn : true, // 是否顯示 修改節(jié)點內(nèi)容 按鈕renameTitle : "修改", // 如果顯示 修改節(jié)點內(nèi)容 按鈕后，按鈕上的文字顯示啥editNameSelectAll : true, // 編輯節(jié)點名稱的時候是否對名稱文字全選// drag : { // 是否允許節(jié)點拖拽放置、復(fù)制、移動// ? ? autoExpandTrigger : false,// ? ? isCopy : false,// ? ? isMove : false// }},callback: { // 設(shè)置所有的回調(diào)函數(shù)onRename: onRename, // 修改時調(diào)用onDrop: onDrop // 拖拽}};// zTree 的數(shù)據(jù)屬性，深入使用請參考 API 文檔（zTreeNode 節(jié)點數(shù)據(jù)詳解）$(document).ready(function() {var zNodes;$.ajax({ // 需要調(diào)用同步方法，因此不能使用post方法，此處加載整棵樹type:"POST",async:false,url:"get_category_tree", // 服務(wù)端獲得數(shù)據(jù)的方法dataType : "json",data:null,success:function(result){ // 調(diào)用成功對節(jié)點進行設(shè)置if (result != null && result.status == true)zNodes = result.data;}});zTree = $.fn.zTree.init($("#categorytree"), setting, zNodes); // 初始化樹對象});function addHoverDom(treeId, treeNode) { // 在鼠標(biāo)移動到節(jié)點上方時顯示對節(jié)點的操作按鈕并對按鈕綁定處理方法var sObj = $("#" + treeNode.tId + "_span"); // 獲得鼠標(biāo)所在的節(jié)點對象if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0 || $("#startBtn_"+treeNode.tId).length>0) return; // 如果鼠標(biāo)所在的節(jié)點正在編輯或者添加按鈕已存在則以下不執(zhí)行var addStr = "<span class='button add' id='addBtn_" + treeNode.tId+ "' title='添加' onfocus='this.blur();'></span>"; // 動態(tài)生成新增按鈕var startStr = "<span class='button start' id='startBtn_" + treeNode.tId+ "' title='啟用' onfocus='this.blur();'></span>"; // 動態(tài)生成啟用按鈕var stopStr = "<span class='button stop' id='stopBtn_" + treeNode.tId+ "' title='停用' onfocus='this.blur();'></span>"; // 動態(tài)生成停用按鈕var statusStr = "<span id='statusSpan_" + treeNode.tId + "' title='狀態(tài)'>[" + (treeNode.status ? "啟用" : "停用") + "]</span>"; // 動態(tài)生成停用按鈕sObj.after(stopStr).after(startStr).after(addStr).after(statusStr); // 在鼠標(biāo)所在節(jié)點后顯示添加按鈕、啟動按鈕和其它操作按鈕// - - - 新增按鈕及處理方法 - - - //var addBtn = $("#addBtn_"+treeNode.tId); // 獲得添加按鈕對象并綁定點擊事件if (addBtn) addBtn.bind("click", function(){ // 添加按鈕點擊后的操作var newNodeName = Math.round(Math.random()* 99999999).toString(); // 新增的節(jié)點名稱$.ajax({ // 需要調(diào)用同步方法，因此不能使用post方法，這里需要添加節(jié)點type : "POST",async : false,url : "add_tree_node",dataType : "json",data : {name: newNodeName, parentId: treeNode.id, parentName: treeNode.name},success:function(result){if (result != null && result.status == true) {$('#div_alert').text("節(jié)點添加成功！").prop('class', 'alert alert-success'); // 設(shè)置提示信息并改變提示框樣式為成功// 返回值為數(shù)據(jù)庫中的自增IDzTree.addNodes(treeNode, {id: result.data, pId: treeNode.id, name: newNodeName, status: 1}); // 在ztree中添加節(jié)點，因為在設(shè)置中將treeNode 的name設(shè)置為nameWithStatus,因此這里要傳這個名稱}else $('#div_alert').text("節(jié)點添加失敗！").prop('class', 'alert alert-warning'); // 設(shè)置提示信息并改變提示框樣式為警告}});return false;});function removeHoverDom(treeId, treeNode) { // 鼠標(biāo)移除后清除臨時生成的對象$("#addBtn_"+treeNode.tId).unbind().remove(); // 鼠標(biāo)移動后刪除添加按鈕所有內(nèi)容$("#startBtn_"+treeNode.tId).unbind().remove(); // 鼠標(biāo)移動后刪除啟用按鈕所有內(nèi)容$("#stopBtn_"+treeNode.tId).unbind().remove(); // 鼠標(biāo)移動后刪除停用按鈕所有內(nèi)容$("#statusSpan_"+treeNode.tId).unbind().remove(); // 鼠標(biāo)移動后刪除狀態(tài)框內(nèi)容}function onRename(e, treeId, treeNode, isCancel) { // 修改名稱var parentNode = treeNode.getParentNode();$.ajax({ // 需要調(diào)用同步方法，因此不能使用post方法，這里需要添加節(jié)點type : "POST",async : false,url : "modify",dataType : "json",data : {id: treeNode.id, name: treeNode.name, parentId: (parentNode != null ? parentNode.id : 0), parentName: (parentNode != null ? parentNode.name : "[- 無 -]")},success:function(result){if (result != null && result.status == true) {$('#div_alert').text("修改成功！").prop('class', 'alert alert-success'); // 設(shè)置提示信息并改變提示框樣式為成功isCancel = false;}else { ?// 設(shè)置提示信息并改變提示框樣式為警告$('#div_alert').text("修改失敗！").prop('class', 'alert alert-warning');isCancel = true;}}});return isCancel;}function onDrop(event, treeId, treeNodes, targetNode, moveType) { // 調(diào)整樹形節(jié)點的位置$.ajax({ // 需要調(diào)用同步方法，因此不能使用post方法，這里需要添加節(jié)點type : "POST",async : false,url : "modify",dataType : "json",data : {id: treeNodes[0].id, name: treeNodes[0].name, parentId: (targetNode != null ? targetNode.id : 0), parentName: (targetNode != null ? targetNode.name : "[- 無 -]")},success:function(result){if (result != null && result.status == true) {$('#div_alert').text("位置調(diào)整修改成功！").prop('class', 'alert alert-success'); // 設(shè)置提示信息并改變提示框樣式為成}else { ?// 設(shè)置提示信息并改變提示框樣式為警告$('#div_alert').text("位置調(diào)整修改失敗！").prop('class', 'alert alert-warning');}}});}; </script>?
轉(zhuǎn)載于:https://my.oschina.net/ioooi/blog/1525745
總結(jié)
以上是生活随笔為你收集整理的j2ee 简单网站搭建：（十）jquery ztree 插件使用入门的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： mangoDB安装
- 下一篇： [Leedcode][JAVA][第50