首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

j2ee中table有二个需求,1.对某些列的行进行去重,2.对某些列支持正反排序,这两个功能会起冲突,贴出源码,求大家指导

2013-08-27 
j2ee中table有2个需求,1.对某些列的行进行去重,2.对某些列支持正反排序,这两个功能会起冲突,贴出源码,求大

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段代码分别使用,都可以正常工作,但是放在一起,就会出现排序,行错位。
如图:页面初始化:j2ee中table有二个需求,1.对某些列的行进行去重,2.对某些列支持正反排序,这两个功能会起冲突,贴出源码,求大家指导

点击‘日期时间’,排序后,页面表格数据,完全错开了。
如图:j2ee中table有二个需求,1.对某些列的行进行去重,2.对某些列支持正反排序,这两个功能会起冲突,贴出源码,求大家指导

我估计是因为去重的行,被当成是1行了,所以出现了bug,第二的js代码,是在网上找的,看起来比较费力,也不太会修改。
所以求高手帮忙!!!
顺便能跟小弟弟讲讲原理就更好了。







[解决办法]
你这2个要求原本就是冲突的,去重后行合并了,重新排序如果一条记录是介于合并的记录的中间,你是要插入新记录到这个位置,就要重新拆分

热点排行