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(/(^[\s\xA0]*)|([\s\xA0]*$)/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();
}