j2ee中table有2个需求，1.对某些列的行进行去重，2.对某些列支持正反排序，这两个功能会起冲突，贴出源码，求大家指导！
本帖最后由 qiuqiu_henry 于 2013-08-15 15:15:12 编辑 1.下面是jsp的table部分的代码:
<table class="table-css" id="showList" style="margin-left: 1px;">
<thead>
<tr role="head">
<th style="width:135px"></th>
<th sort="true" width="144px">aaa</th>
<th style="width:48px"></th>
<th style="width:116px"></th>
<th style="width:120px"></th>
<th style="width:136px"></th>
<th style="width:88px"></th>
<th style="width:145px"></th>
<th style="width:124px"></th>
</tr>
</thead>
<tbody>
<s:iterator value="data" id="date1" status="st">
<tr>
<td style="width:135px"><s:property value="date" /></td>
<td style="width:144px"><s:property value="time" /></td>
<td style="width:48px"><s:property value="userip" /></td>
<td style="width:116px"><s:property value="servclass" /></td>
<td style="width:120px"><s:property value="serverip" /></td>
<td style="width:136px"><s:property value="gotoclass" /></td>
<td style="width:88px"><s:property value="state" /></td>
<td style="width:145px"><s:property value="WTserverip" /></td>
<td style="width:124px"><s:property value="usernum" /></td>
</tr>
</s:iterator>
</tbody>
</table>
2:下面这段js是用来某一列的行去重的。
function table_rowspan(table_id,colnum){
var table_firsttd = "";
var table_currenttd = "";
var table_SpanNum = 0;
var table_Obj = $(table_id + " tr td:nth-child(" +colnum + ")");
table_Obj.each(function(i){
if(i>0){
$(this).css("color","#1E47BC");
}
if(i==0){
table_firsttd = $(this);
table_SpanNum = 1;
}else{
table_currenttd = $(this);
if(table_firsttd.text()==table_currenttd.text()){
table_SpanNum++;
table_currenttd.hide(); //remove();
table_firsttd.attr("rowSpan",table_SpanNum);
table_firsttd.css("background-color","#E8F2FF");
table_firsttd.css("color","#F7A045");
}else{
table_firsttd = $(this);
table_SpanNum = 1;
}
}
});
}
js调用：table_rowspan("#showList",1);
3：下面代码是，某一列进行排序：
//************************************************************************************************
// 说明：用于把Table转为可排序的Table
//
// 使用：1、给设置标题行添加名自定义属性role="head"
// 2、标题行中需要排序的列添加自定义属性sort="true"
// 3、调用扩展方法，如：$("#tableId").sorttable();
//
// 参数：JSON格式
// ==普通参数==
// sorttingMsg: 排序时显示的文字（默认为"排序中……"）,
// sorttingMsgColor: 排序时显示的文字的颜色（默认为"#FFF"）,
// allowMask: 是否允许遮罩层（默认为true）,
// maskOpacity: 遮罩层的透明度（默认为"0.5"）,
// maskColor: 遮罩层的颜色（默认为"#000"）,
// ascImgUrl: 升序图片（默认为不显示）,
// ascImgSize: 升序图片大小（默认为"8px"）,
// descImgUrl: 降序图片（默认为不显示）,
// descImgSize: 降序图片大小（默认为"8px"）
//
// ==回调函数==
// onSorted(cell): 排序完成回调函数（参数：cell，当前排序列的头(一般是th或者td的jquery对象)）
//*************************************************************************************************
$.fn.extend({
sorttable: function (setting) {
// 配置参数
var configer = $.fn.extend({
// 属性
sorttingMsg: "排序中……",
//sorttingMsgColor: "#FFF",
allowMask: true,
maskOpacity: "0.5",
// maskColor: "#000",
ascImgUrl: "",
ascImgSize: "8px",
descImgUrl: "",
descImgSize: "8px",
// 事件
onSorted: null // 排序完成回调函数
}, setting);
// 获取扩展对象
var extObj = $(this);
// 用于锁住当前操作的对象
var lock = false;
// 排序属性的可取值
var sortOrder = {
byAsc: "asc",
byDesc: "desc"
};
// 自定义属性名
var myAttrs = {
order: "order",
by: "by",
sort: "sort"
};
// 可排序行的头列（jquery对象——集合）
var headCells = extObj.find("tr[role='head']>[" + myAttrs.sort + "='true']");
// 设置头列点击事件
headCells.click(function () {
var thisCell = $(this);
if (lock == false) {
lock = true; // 锁事件
if (configer.allowMask) {
var tw = extObj.outerWidth();
var th = extObj.outerHeight();
var tOffSet = extObj.offset();
var tTop = tOffSet.top;
var tLeft = tOffSet.left;
// 添加遮罩层
var mark = $("<div></div>").attr("id", "TableSort_Mark").css("background-color", configer.maskColor).css("position", "absolute").css("top", tTop + "px").css("left", tLeft + "px").css("opacity", configer.maskOpacity).css("z-index", "9999").css("width", tw + "px").css("height", th + "px");
mark.html("<h3 id='TableSort_Sortting' style='opacity:1;color:" + configer.sorttingMsgColor + ";padding:36px 0 0 0;text-align:center;'>" + configer.sorttingMsg + "</h3>");
mark.appendTo($("body"));
// 延时执行排序方法，显示遮罩层需要时间~
window.setTimeout(function () {
// 设置列排序
SetColumnOrder(thisCell);
// 触发排序完成回调函数
FireHandleAfterSortting(thisCell);
// 解锁，撤销遮罩层
lock = false;
mark.remove();
},0);//500
}
else {
// 设置列排序
SetColumnOrder(thisCell);
// 触发排序完成回调函数
FireHandleAfterSortting(thisCell);
// 解锁，撤销遮罩层
lock = false;
}
// 所有头部的列的排序标记设置为false
headCells.attr(myAttrs.order, false);
// 被点击列的排序标志设置为true
thisCell.attr(myAttrs.order, true);
// 设置排序列的排序规则
var by = thisCell.attr(myAttrs.by);
thisCell.attr(myAttrs.by, (by == sortOrder.byAsc ? sortOrder.byDesc : sortOrder.byAsc));
}
});
// 说明：触发排序完成回调函数
// 参数：sortCell = 当前排序的列头
function FireHandleAfterSortting(sortCell) {
if (configer.onSorted != null) {
configer.onSorted(sortCell);
}
}
// 说明：设置列排序
// 参数：headCell = 列头（jquery对象）
function SetColumnOrder(headCell) {
var by = headCell.attr(myAttrs.by);
var index = headCell.index();
var rs = extObj.find("tr[role!='head']");
rs.sort(function (r1, r2) {
var a = $.trim($(r1).children("td").eq(index).text());
var b = $.trim($(r2).children("td").eq(index).text());
if (a == b) {
return 0;
}
var isDt = IsTime(a) && IsTime(b);
if (isDt) {
var dt1 = new Date(a.replace(/-/g, "/"));
var dt2 = new Date(b.replace(/-/g, "/"));
if (dt1.getTime() > dt2.getTime()) {
return (by == sortOrder.byAsc) ? 1 : -1;
}
else {
return (by == sortOrder.byAsc) ? -1 : 1;
}
}
else if (isNaN(a) || isNaN(b)) {
return (by == sortOrder.byAsc) ? a.localeCompare(b) : b.localeCompare(a);
}
else {
if (a - b > 0) {
return (by == sortOrder.byAsc) ? 1 : -1;
}
else {
return (by == sortOrder.byAsc) ? -1 : 1;
}
}
});
extObj.find("tr[role!='head']").remove();
extObj.append(rs);
// 显示箭头排序列图标
headCells.children(".asc,.desc").hide();
if (by == sortOrder.byAsc) {
headCell.children(".asc").show();
}
else {
headCell.children(".desc").show();
}
}
// 说明：判断字符串是否是时间
function IsTime(dateString) {
dateString = $.trim(dateString);
if (dateString == null && dateString.length == 0) {
return false;
}
dateString = dateString.replace(/\//g, "-");
var reg = /^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2}) (\d{1,2}):(\d{1,2}):(\d{1,2})$/;
var r = dateString.match(reg);
if (r == null) {
var reg = /^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/;
var r = dateString.match(reg);
}
return r != null;
}
}
});
调用js：$("#showList").sorttable();
2段代码分别使用，都可以正常工作，但是放在一起，就会出现排序，行错位。
如图：页面初始化：
点击‘日期时间’，排序后，页面表格数据，完全错开了。
如图：
我估计是因为去重的行，被当成是1行了，所以出现了bug，第二的js代码，是在网上找的，看起来比较费力，也不太会修改。
所以求高手帮忙！！！
顺便能跟小弟弟讲讲原理就更好了。
[解决办法]
你这2个要求原本就是冲突的，去重后行合并了，重新排序如果一条记录是介于合并的记录的中间，你是要插入新记录到这个位置，就要重新拆分