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();
	}