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