jquery下表格操作tableList Tablesorter控件使用方法

主要的特点包括：

多列排序
支持文本、URL地址、数值、IP地址、日期类型，以及自定义类型排序
支持 TH 元素的 ROWSPAN 和 COLSPAN 属性
支持第二个隐藏域排序
可扩展外观
程序简小，打包后只有 7.4K

用法：

//实例化一个对象
var tableList = new JD_tableList();
//设置按钮
tableList.setBtn({
onClick:’#tBody tbody>tr’,  //表格tr
moveDwon:’#moveTrDown’,   //向下移动按钮
moveUp:’#moveTrUp’,    //向上移动按钮
remove:’#removeTrDown’,   //删除按钮

//添加按钮组(位置：0-n指定索引,’first’最前,’last’最后,’prev’当前选中的前面,’next’当前选中的后面)
{item:’按钮名’,tr:’添加的tr内容’,position:’添加到哪个位置，可选，默认添加到最后’,table:’添加到哪个表格，可选’}
adds:[{item:'#addTrDown1',tr:getTr(),position:'last',table:'#tBody tbody'},
{item:'#addTrDown2',tr:getTr(),position:'first'},
{item:'#addTrDown3',tr:function(){return getTr();},position:3},
{item:'#addTrDown4',tr:getTr(),position:'prev'},
{item:'#addTrDown5',tr:getTr(),position:'next'}
]
});

 —-详细简介

/*
* 表格操作类
* 毛贤德
* 2013-11-26
*
* 用法：
//实例化一个对象
var tableList = new JD_tableList();

###################################################################################################################################
//操作
tableList.clickTr(tr文档对象);    //选择当前的tr,当tr被选中的时候，tr自动添加一个class=’JD_tableList_on’的样式
tableList.moveTr([1,-1]);     //1为选中的tr向下移动,-1为选中的tr向上移动

tableList.addTr(str[,position,table]);  //添加tr
str:添加tr的内容（可以是方法，返回tr数据值）
position:[0-n,'first','last','prev','next']   添加tr的位置(值等于：0-n添加到第几个节点。值等于:’first’添加表格的最前一个。值等于:’last’添加表格的最后一个。值等于:’prev’添加到被选中的tr的前面。值等于:’next’添加到被选中的tr后面。),可选，默认添加到表格的最后.
table:添加到哪个表格，可选（如果不选择那得点击tr选择表格的时候才可以添加）;

tableList.removeTr();      //删除选中的tr

###################################################################################################################################
//设置按钮
tableList.setBtn({
onClick:’#tBody tbody>tr’,  //表格tr
moveDwon:’#moveTrDown’,   //向下移动按钮
moveUp:’#moveTrUp’,    //向上移动按钮
remove:’#removeTrDown’,   //删除按钮

//添加按钮组(位置：0-n指定索引,’first’最前,’last’最后,’prev’当前选中的前面,’next’当前选中的后面)
{item:’按钮名’,tr:’添加的tr内容’,position:’添加到哪个位置，可选，默认添加到最后’,table:’添加到哪个表格，可选’}
adds:[{item:'#addTrDown1',tr:getTr(),position:'last',table:'#tBody tbody'},
{item:'#addTrDown2',tr:getTr(),position:'first'},
{item:'#addTrDown3',tr:function(){return getTr();},position:3},
{item:'#addTrDown4',tr:getTr(),position:'prev'},
{item:'#addTrDown5',tr:getTr(),position:'next'}
]
});

###################################################################################################################################

//回调函数
//tr被选中（tableList.clickTr(tr文档对象);）时回调
tableList.callClick  = function(obj){
//obj.moveUp;  //是否可以向上移动
//obj.moveDown;  //是否可以向下移动
//obj.index;  //被点击的索引值
//obj.item;   //被选择的文档对象
alert(“向上：”+obj.moveUp+” 向下：”+obj.moveDown+” : “+obj.index);
};

//tr上移下移时回调
tableList.callMove = function(obj){
//obj.moveUp;  //是否可以向上移动
//obj.moveDown;  //是否可以向下移动
//obj.index;  //被点击的索引值
//obj.hangeIndex; //移动后的索引值
//obj.onTr;   //被移动的节点
//obj.changeTr;  //被交换变化的节点

alert(“向上：”+obj.moveUp+” 向下：”+obj.moveDown+” : “+obj.index+” : “+obj.hangeIndex+”  \n\n  “+obj.onTr.html()+” : “+obj.changeTr.html());
};

//添加回调
tableList.callAddTr = function(obj){
//obj.moveUp;  //是否可以向上移动
//obj.moveDown;  //是否可以向下移动
//obj.n;   //成功添加个tr
//obj.addIndex;  //从哪个索引位置开始添加
//obj.items;  //新添加的数组文档
//obj.position;  //添加的位置
};

//删除回调函数
tableList.callRemove = function(obj){
//obj.index; //被删除的节点索引值
//obj.parent; //父级节点
//ojb.onthis //被删除的节点文档
//obj.first; //第一个节点
//obj.prev;  //被删除的节点的上一个节点
//obj.next;  //被删除的节点的下一个节点
//obj.last;  //最后一个节点
//alert(obj.parent.html());
//alert(obj.first.html()+”\n”+obj.prev.html()+”\n”+obj.next.html()+”\n”+obj.last.html());
};

 //更新日志———————————————————————————————–
2013-12-3 使用发现表格html更换就出问题
tableList.init();  //用来当表格切换的时候，用的是同一个对象时需要初始化一下数据（）
tableList.upTr(); //当tr的个数增加或删除的时候，需要调用这个一下重新计算Tr的个数

2013-12-6 新增功能

tableList.removeTr();      //删除选中的tr

//删除回调函数
tableList.callRemove = function(obj){
//obj.index; //被删除的节点索引值
//obj.parent; //父级节点
//ojb.onthis //被删除的节点文档
//obj.first; //第一个节点
//obj.prev;  //被删除的节点的上一个节点
//obj.next;  //被删除的节点的下一个节点
//obj.last;  //最后一个节点
//alert(obj.parent.html());
//alert(obj.first.html()+”\n”+obj.prev.html()+”\n”+obj.next.html()+”\n”+obj.last.html());
};

2013-12-7 新增功能

tableList.addTr(str[,position,table]);  //添加tr

//添加回调
tableList.callAddTr = function(obj){
//obj.moveUp;  //是否可以向上移动
//obj.moveDown;  //是否可以向下移动
//obj.n;   //成功添加个tr
//obj.addIndex;  //从哪个索引位置开始添加
//obj.items;  //新添加的数组文档
//obj.position;  //添加的位置
};

//删除掉overTr和outTr,
tableList.overTr(tr文档对象); //鼠标经过tr,当鼠标经过tr的时候，tr自动添加一个class=’over’的样式
tableList.outTr(tr文档对象);  //鼠标离开tr,当鼠标离开tr的时候，tr将会删除class=’over’的样式
2013-12-9 新增功能
//设置按钮就可以直接使用
tableList.setBtn({
onClick:’#tBody tbody>tr’,  //表格tr
moveDwon:’#moveTrDown’,   //向下移动按钮
moveUp:’#moveTrUp’,    //向上移动按钮
remove:’#removeTrDown’,   //删除按钮

//添加按钮组(位置：0-n指定索引,’first’最前,’last’最后,’prev’当前选中的前面,’next’当前选中的后面)
{item:’按钮名’,tr:’添加的tr内容’,position:’添加到哪个位置，可选，默认添加到最后’,table:’添加到哪个表格，可选’}
adds:[{item:'#addTrDown1',tr:getTr(),position:'last',table:'#tBody tbody'},
{item:'#addTrDown2',tr:getTr(),position:'first'},
{item:'#addTrDown3',tr:function(){return getTr();},position:3},
{item:'#addTrDown4',tr:getTr(),position:'prev'},
{item:'#addTrDown5',tr:getTr(),position:'next'}
]
});

*/

例子

效果