treeTable實作排序

/*
 * 
 * TreeTable 0.1 - Client-side TreeTable Viewer!
 * @requires jQuery v1.3
 * 
 * Dual licensed under the MIT and GPL licenses:
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
 *
 * 
 */

	(function($){
		$.extend({
			treetable: new function() {
			
				this.defaults = {
					id_col: 0,
					parent_col: 1,
					handle_col: 2,
					order_col: -1,
					open_img: "lib/plugin/treetable/images/minus.gif",
					close_img: "lib/plugin/treetable/images/plus.gif",
					expanded: true//@author GaoBing
				};
				
				//jquery的trim處理不了 産生的"空格"
				function trim(str){
					return str.replace(/(^[sxA0]*)|([sxA0]*$)/g, "");
				}
				
				this.construct = function(settings){
				
					if(this.size()!=1)return;//隻處理一個表格
					
					if(this[0].tagName.toUpperCase()!="TBODY")return;//隻應用于tbody
				
					var config = $.extend({}, $.treetable.defaults, settings);
					
					if(config.id_col==null || config.parent_col==null || config.handle_col==null ) return;
					
					var $this = $(this);
					var tr_arr = new Array();
					var tr_sort = new Array();
	
					//建構行對象數組
					$this.find("tr").each(function(){
						var id = $.trim($(this).find("td:eq("+config.id_col+")").text());
						var parent = $.trim($(this).find("td:eq("+config.parent_col+")").text());
						tr_arr.push({'id':id,'parent':parent,'level':0,'node':'leaf','expanded':config.expanded,'obj':$(this)});
					});
					var len = tr_arr.length;
					var level = 0;
					
					/*
					檢查tr_arr中的每一行的父行是否再tr_sort中，
					如果有則插入到tr_sort的父行後，從tr_arr中删除
					直到tr_arr都為null,生成排好序的tr_sort
					*/
					while(len>0){
						for(var i=0;i<tr_arr.length;i++){
							var o = tr_arr[i];
							
							if(o==null)continue;
							
							if(o.parent==""){//根行直接壓入tr_sort
								tr_sort.push(o);
								tr_arr[i]=null;
								len=len-1;
							}else{
								if (tr_sort.length > 0){
									for(var j=0;j<tr_sort.length;j++){
										if(tr_sort[j].id==o.parent){
											o.level = tr_sort[j].level+1;//從父行累計生成層次level
											tr_sort[j].node='node';
											tr_sort.splice(j+1,0,o);//數組插入
											tr_arr[i]=null;
											len=len-1;
											break;
										}
									}
								}else{
									for(var k=0;k<tr_arr.length;k++){
										var ok = tr_arr[k];
										if(ok == null) continue;
										if (o.id != ok.parent && ok.parent != ""){
											ok.level = tr_arr[k].level+1;
											tr_sort.push(ok);
											tr_arr[i]=null;
											len=len-1;
										}else{
											if (tr_sort[k]){
												o.level = tr_sort[k].level+1;//從父行累計生成層次level
												tr_sort[k].node='node';
												tr_sort.splice(k+1,0,o);//數組插入
												tr_arr[i]=null;
												len=len-1;
												break;
											}
										}
									}
								}
							}
						}
						level=level+1;
					}//while
		
					
					
					
					//展開事件動作函數
					var fn_click = function(){

						var id = trim($(this).parent().parent().find("td:eq("+config.id_col+")").text());//擷取目前行ID
						var v = -1;
						for(var j=0;j<tr_sort.length;j++){
							var o = tr_sort[j];
							if(o.id==id){//在tr_sort找到行對象
						
								if(o.node=='leaf')return;
								
								v = o.level;
								var img = o.obj.find("td:eq("+config.handle_col+") img")[0];
								
								if(!o.expanded){//通過圖示判斷是展開還是收起
									img.src=config.open_img;
									o.expanded=true;
								}else{
									img.src=config.close_img;
									o.expanded=false;
								}
								
								var show = o.expanded;
								var f = false;//父行收起标志
								var tmp = 0;//父行的層次
								
								for(var i=j+1;i<tr_sort.length;i++){//根據level更新後續的子行
									o = tr_sort[i];
									
									var img = o.obj.find("td:eq("+config.handle_col+") img")[0];
									
									var t = !o.expanded;//判斷是否是收起狀态
									
									if(o.level>v && show){//展開操作
										if(!f&&!t){//父行未收起，且目前行是展開狀态
											o.obj.show();
										}else if(!f&&t){//父行未收起，且目前行是收起狀态
											tmp = o.level;
											f = true;
											o.obj.show();
										}else if(f&&o.level<=tmp){//同級的前一行是收起狀态
											if(!t){
												f=false;
											}else{
												tmp = o.level;
											}
											o.obj.show();
										}else{
											;
										}
								
									}else if(o.level>v && !show){//收起操作則隐藏是以子行
										o.obj.hide();
									}else if(o.level<=v){//到達非子行，處理完畢
										break;
									}
								}
							
								break;
							}
						}
					};
				
					//重新繪制表格，添加展開動作圖示
					for(var j=tr_sort.length-1;j>-1;j--){//prepend插入tbody内需使用反序
						var o = tr_sort[j];
						
						var img = $("<img src='"+config.open_img+"'>");
						img.click(fn_click);
						
						var tr=o.obj.find("td:eq("+config.handle_col+")");
						
						//避免重複添加圖示
						var imgEle = tr.find("img");
						if(imgEle.length == 0){
							tr.prepend(" ");
							tr.prepend(img);
							var s = new Array((o.level+1)*5).join(" ");//生成縮進空格
							tr.prepend(s);
							
							$this.prepend(o.obj);
						}
						
					}//for
		
				
					/*
					 * @author GaoBing
					 * 是否展開 當expanded為false時，父節點收縮  
					 * */
					if(tr_sort.length > 0){
						for(var i=0;i<tr_sort.length;i++){
							var o = tr_sort[i];//行對象
							var img = o.obj.find("td:eq("+config.handle_col+") img");//父節點圖示元素
							if(o.expanded == false){//收縮
								//檢查是否有父節點，如有父節點則隐藏本行節點
								if (o.parent != ""){
									o.obj.hide();//隐藏子節點
								}
								//檢查是否有子節點，有子節點則替換圖示
								for(var j=0;j<tr_sort.length;j++){
									if (tr_sort[j].parent != "" && tr_sort[j].parent == o.id){//有子節點
										$(img).attr("src",config.close_img);//替換父節點圖示
									}
								}
							}
						}
					}
					
					
				}//construct
			}//treetable

		});
		
		$.fn.extend({
			treetable: $.treetable.construct
		});
		
	})(jQuery);
	
	
	/** 
	 * @author GaoBing
	 * 功能：對樹狀表格進行排序 父節點在前 子節點在後 
	**/
	function treetable_sort(tableId,parentColumn){
		
		var trs = new Array();
		
		//拿到所有行
		$("#" + tableId + " tbody tr[role='row']").each(function(index){
			trs[index] = $(this).clone(true);
		});
		
		//清空之前的行資料
		$("#" + tableId + " tbody").empty();
		
		//遞歸
		sort_tr_root(trs,tableId,parentColumn);
		
	}
	
	/*根節點排序*/
	function sort_tr_root(trs,tableId,parentColumn){
		var rootArr = new Array();
		for(var i=0;i<trs.length;i++){
			if (null != trs[i]){
				var trsData = trs[i].attr("data");
				var trsDataObj = eval('(' + trsData + ')');
				var trsId = trsDataObj['id'];
				var trsParentId = trsDataObj[ parentColumn ];
				if (null == trsParentId || trsParentId == "" || undefined == trsParentId){//最外層的根
					trs[i].attr("id",trsId);
					$("#" + tableId + " tbody").append(trs[i]);
					rootArr.push(trs[i]);
					trs[i] = null;
				}
			}
		}
		
		//子節點排序
		var treeData = changeDataToMap(trs);
		var result = createSearchMap(trs,parentColumn);
		for(var i=0;i<rootArr.length;i++){
			var rootData = rootArr[i].attr("data");
			var rootDataObj = eval('(' + rootData + ')');
			var rootId = rootDataObj['id'];
			var rootParentId = rootDataObj[ parentColumn ];
			buildChild(tableId,treeData,result,rootId,rootParentId);
		}
		
	}
	
	function createSearchMap(data,parentColumn){
		//建立搜尋鍵值對
		var result = {};
		for(var i=0;i<data.length;i++) {
			if (null != data[i]){
				var trsData = data[i].attr("data");
				var trsDataObj = eval('(' + trsData + ')');
				var trId = trsDataObj['id'];
				var trParentId = trsDataObj[parentColumn];
				if(trParentId){
					if(!result[trParentId] && trParentId != null && trParentId != ""){
						result[trParentId] = [];
					}
					result[trParentId].push(trId);
				}
			}
		}
		return result;
	}
	
	function changeDataToMap(trs){
		var deepMap = new Array();
		for(var i=0;i<trs.length;i++){
			if (null != trs[i]){
				var trsData = trs[i].attr("data");
				var trsDataObj = eval('(' + trsData + ')');
				var trId = trsDataObj['id'];
				if(trId){
					deepMap[trId] = trs[i];
				}
			}
		}
		return deepMap;
	}
	
	
	function buildChild(tableId,treeData,result,id,parentId){
		if (parentId){
			var trObj = treeData[id];
			trObj.attr("id",id);
			$("#" + tableId + " tbody tr[role=row][id=" + parentId + "]").after(trObj);
		}
		var childrenIds = result[id];
		if(childrenIds){
			for(var i=0;i<childrenIds.length;i++){
				buildChild(tableId,treeData,result,childrenIds[i],id);
			}
		}
	}
	
	
	/*判斷是否包含某個元素*/
	Array.prototype.contains = function (element) { // 利用Array的原型prototype點出一個我想要封裝的方法名contains
		for (var i = 0; i < this.length; i++) { 
			if (this[i] == element) { // 如果數組中某個元素和你想要測試的元素對象element相等，則證明數組中包含這個元素，傳回true
				return true; 
			} 
		}
	}; 
	
	/** 
	 * @author GaoBing
	 * 功能：表格樹 供datatable調用接口 
	**/
	function initTreeTable(obj){
		
		//參數
		var tableId = obj.tableId;//表格ID
		var tbodyId = obj.tbodyId;//表格中tbodyID
		var isExpanded = obj.isExpanded;//是否展開所有節點
		var viewConfig = obj.viewConfig;//展示配置
		var parentColumn = obj.parentColumn;//父列
		
		//排序 父節點排在子節點前面
		treetable_sort(tableId,parentColumn);
		
		//預設屬性
    	$.treetable.defaults={
			id_col: viewConfig[0],//ID td列 {從0開始}
			parent_col: viewConfig[1],//父ID td列
			handle_col: viewConfig[2],//操作展開操作的 td列
			open_img: "lib/plugin/treetable/images/minus.gif",//展開時圖示
			close_img: "lib/plugin/treetable/images/plus.gif",//收縮時圖示
			expanded: isExpanded//true為展開，false為收縮
		};
    	
		//生成樹
    	$("#" + tbodyId).treetable();
    	
		//隐藏資料列
		$("#" + tbodyId + " tr").find("td:eq(" + viewConfig[0] + ")").hide();
		$("#" + tbodyId + " tr").find("td:eq(" + viewConfig[1] + ")").hide();
		$("#" + tableId + " tr:eq(0)").find("th:eq(" + viewConfig[0] + ")").hide();
		$("#" + tableId + " tr:eq(0)").find("th:eq(" + viewConfig[1] + ")").hide();
	}