文集编辑支持目录树

app/article/my_article_edit.php

@@ -14,6 +14,7 @@ require_once '../studio/index_head.php';
 	<link type="text/css" rel="stylesheet" href="../public/js/jquery-ui-1.12.1/jquery-ui.css"/>
 	<script language="javascript" src="../lang/tran_lang_select.js"></script>
 
+
 	<script >
 	var gCurrPage="article";
 	</script>

app/article/my_collect.js

@@ -58,9 +58,13 @@ function my_collect_edit(id) {
 		},
 		function (data, status) {
 			if (status == "success") {
-				try {
 					let html = "";
-					let result = JSON.parse(data);
+					let result;				
+				try {
+					result = JSON.parse(data);
+				} catch (e) {
+					console.error(e);
+				}
 					$("#article_collect").attr("a_id", result.id);
 					html += '<div class="" style="padding:5px;">';
 					html += '<div style="max-width:2em;flex:1;"></div>';
@@ -105,14 +109,37 @@ function my_collect_edit(id) {
 					html += "<div style='flex:4;'>";
 
 					_arrArticleList = JSON.parse(result.article_list);
-					html += "<ul id='ul_article_list'>";
+					let treeData = new Array()
+					html += "<div id='ul_article_list'>";
+					let treeParents = [];
+					let rootNode = {key:0,title:"root",level:0};
+					treeData.push(rootNode);
+					let lastInsNode = rootNode;
+					let iLastParentNodeLevel = 0;
+					let iLastParentNode = 0;
+					let iCurrLevel = 0;
 					for (let index = 0; index < _arrArticleList.length; index++) {
 						const element = _arrArticleList[index];
-						html += my_collect_render_article(index, element);
-						_arrArticleOrder.push(index);
+						let newNode = {key:element.article,title:element.title,level:element.level};
+						
+						if(newNode.level>iCurrLevel){
+							treeParents.push(lastInsNode);					
+							lastInsNode.children = new Array();
+							lastInsNode.children.push(newNode);
+						}
+						else if(newNode.level==iCurrLevel){
+							treeParents[treeParents.length-1].children.push(newNode);
+						}
+						else{
+							// 小于
+							treeParents.pop();
+							treeParents[treeParents.length-1].children.push(newNode);
+							iLastParentNodeLevel = treeParents[treeParents.length-1].level;	
+						}
+						lastInsNode = newNode;
+						iCurrLevel = newNode.level;
 					}
-
-					html += "</ul>";
+					html += "</div>";
 
 					html += "</div>";
 
@@ -125,20 +152,55 @@ function my_collect_edit(id) {
 					$("#article_list").html(html);
 					$("#collection_title").html(result.title);
 
-					$("#ul_article_list").sortable({
-						update: function (event, ui) {
-							let sortedIDs = $("#ul_article_list").sortable("toArray");
-							_arrArticleOrder = new Array();
-							for (const iSorted of sortedIDs) {
-								let newindex = parseInt($("#" + iSorted).attr("article_index"));
-								_arrArticleOrder.push(_arrArticleList[newindex]);
+					$("#ul_article_list").fancytree({
+						autoScroll: true,
+						extensions: ["dnd"],
+						source: treeData[0].children,
+						click: function(e, data) {
+							if( e.ctrlKey ){
+							  window.open("../article/?id="+data.node.key,"_blank");
+							  return false;
+							}
+						  },
+						  dblclick: function(e, data) {
+							editNode(data.node);
+							return false;
+						  },
+						  keydown: function(e, data) {
+							switch( e.which ) {
+							case 113: // [F2]
+							  editNode(data.node);
+							  return false;
+							case 13: // [enter]
+							  if( isMac ){
+								editNode(data.node);
+								return false;
+							  }
+							}
+						  },
+						dnd: {
+							preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
+							preventRecursiveMoves: true, // Prevent dropping nodes on own descendants
+							autoExpandMS: 400,
+							onDragStart: function(node) {
+								return true;
+							},
+							onDragEnter: function(node, sourceNode) {
+
+							   return true;
+							},
+							onDrop: function(node, sourceNode, hitMode, ui, draggable) {
+
+								sourceNode.moveTo(node, hitMode);
+								node.setExpanded(true);
 							}
-							$("#form_article_list").val(JSON.stringify(_arrArticleOrder));
 						},
+						activate: function(e, data) {
+			//				alert("activate " + data.node);
+						}
 					});
-				} catch (e) {
-					console.error(e);
-				}
+				
+
 			} else {
 				console.error("ajex error");
 			}
@@ -146,6 +208,61 @@ function my_collect_edit(id) {
 	);
 }
 
+function editNode(node){
+	var prevTitle = node.title,
+	  tree = node.tree;
+	// Disable dynatree mouse- and key handling
+	tree.widget._unbind();
+	// Replace node with <input>
+	$(".fancytree-title", node.span).html("<input id='editNode' value='" + prevTitle + "'>");
+	// Focus <input> and bind keyboard handler
+	$("input#editNode")
+	  .focus()
+	  .keydown(function(event){
+		switch( event.which ) {
+		case 27: // [esc]
+		  // discard changes on [esc]
+		  $("input#editNode").val(prevTitle);
+		  $(this).blur();
+		  break;
+		case 13: // [enter]
+		  // simulate blur to accept new value
+		  $(this).blur();
+		  break;
+		}
+	  }).blur(function(event){
+		// Accept new value, when user leaves <input>
+		var title = $("input#editNode").val();
+		node.setTitle(title);
+		// Re-enable mouse and keyboard handlling
+		tree.widget._bind();
+		//node.focus();
+	  });
+  }
+
+var arrTocTree = new Array();
+var iTocTreeCurrLevel = 1;
+function getTocTreeData(){
+	let tree = $("#ul_article_list").fancytree("getTree");
+    let d = tree.toDict(false);
+	for (const iterator of d) {
+		getTreeNodeData(iterator);
+	}
+}
+function getTreeNodeData(node){
+	let children = 0;
+	if( typeof node.children != "undefined"){
+		children = node.children.length;
+	}
+	arrTocTree.push({article:node.key,title:node.title,level:iTocTreeCurrLevel});
+	if(children>0){
+		iTocTreeCurrLevel++;
+		for (const iterator of node.children) {
+			getTreeNodeData(iterator);
+		}
+		iTocTreeCurrLevel--;
+	}
+}
 function my_collect_render_article(index, article) {
 	let html = "";
 	html += "<li id='article_item_" + index + "' article_index='" + index + "' class='file_list_row'>";
@@ -197,6 +314,8 @@ function article_preview(id) {
 }
 
 function my_collect_save() {
+	getTocTreeData();
+	$("#form_article_list").val( JSON.stringify(arrTocTree))
 	$.ajax({
 		type: "POST", //方法类型
 		dataType: "json", //预期服务器返回的数据类型

app/article/my_collect_edit.php

@@ -10,6 +10,10 @@ require_once '../studio/index_head.php';
 	<script language="javascript" src="../public/js/marked.js"></script>
 	<script language="javascript" src="../article/add_to_collect_dlg.js"></script>
 	<script src="../public/js/jquery-ui-1.12.1/jquery-ui.js"></script>
+	<link href="../../node_modules/jquery.fancytree/dist/skin-win7/ui.fancytree.css" rel="stylesheet" type="text/css" class="skinswitcher">
+
+	<script src="../tree/jquery.fancytree.js" type="text/javascript"></script>
+	<script src="../tree/jquery.fancytree.dnd.js" type="text/javascript"></script>
 
 	<script >
 	var gCurrPage="collect";

app/article/my_collect_post.php

@@ -52,10 +52,10 @@ else{
     if(count($arrList)>0){
         /* 开始一个事务，关闭自动提交 */
         $PDO->beginTransaction();
-        $query = "INSERT INTO article_list (collect_id, article_id,level,title) VALUES ( ?, ?, ? , ? )";
+        $query = "INSERT INTO article_list (collect_id, article_id,level,title,children) VALUES ( ? , ?, ?, ? , ? )";
         $sth = $PDO->prepare($query);
         foreach ($arrList as $row) {
-            $sth->execute(array($_POST["id"],$row->article,$row->level,$row->title));
+            $sth->execute(array($_POST["id"],$row->article,$row->level,$row->title,$row->children));
 			if($redis){
 				#删除article权限缓存
 				$redis->del("power://article/".$row->article);