JS實現不刷新頁面進行排序功能

1.1 問題描述

填報的時候可以對表格進行排序。使用擴展後排序，發現了每次點擊表頭排序時都會刷新一下頁面，這樣就會導緻剛剛填報的數據被刷新沒了。

爲了解決此問題，可以使用 JavaScript 來實現不刷新頁面進行排序的功能，效果如下圖所示：

1.2 實現思路

通過JavaScript 來排序，對頁面上的位置進行調整。

2.1 準備模板

1）新增模板，爲該模板創建一個數據集。SQL 語句爲：SELECT * FROM S産品 where  産品id<20

2）将數據集中的數據拖到單元格，并添加「文本控件」，設置樣式，如下圖所示：

2.2 添加事件

選擇 「模板>模板 Web 屬性>填報頁面設置」，選擇「爲該模板單獨設置」，然後添加「加載結束」事件。如下圖所示：

JavaScript 代碼如下：

//排序的方法，參數爲表的id和列
function sortTable(table, idx) {
  var otable = document.getElementById(table),
    otody = otable.tBodies[0],
    otr = otody.rows,
    tarr = [];
  for (var i = 1; i < otr.length; i++) {
    tarr[i - 1] = otr[i];
  };
  if (otody.sortCol == idx) {
    tarr.reverse();
  } else {
    tarr.sort(function (tr1, tr2) {
      var value1 = tr1.cells[idx].innerHTML;
      var value2 = tr2.cells[idx].innerHTML;
      if (!isNaN(value1) && !isNaN(value2)) {
        return value1 - value2;
      } else {
        return value1.localeCompare(value2);
      }
    })
  }
  var fragment = document.createDocumentFragment();
  for (var i = 0; i < tarr.length; i++) {
    fragment.appendChild(tarr[i]);
  };
  otody.appendChild(fragment);
  otody.sortCol = idx;
}
//獲取到頁面中表頭，設置點擊事件
$("#r-0-0 td").bind("click",function(){
//獲取到點擊的列
var a=$(this).attr("col");
//調用排序的方法，進行傳值，0是這個表的id，可以通過F12獲取到表的id
sortTable('0',a);
});
顯示代碼

注：$("#r-0-0 td") 表示獲取了第一個 tr 下面的所有 td，若頁面有别的模塊展示，需要進行對應的修改。可以在頁面上用 F12 來獲取到對應的元素。

2.3 效果預覽

保存模板，點擊「填報預覽」，效果如下圖所示：

注：不支持移動端。

已完成模板，可參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\JS實現排序功能.cpt。

點擊可下載模板：JS實現排序功能.cpt

上述方案兼容性并不高，有的報表列并沒有‘col’屬性，且報表 ID 不一定爲‘0’，因此提供一個兼容性更好的解決方案如下：

1）上半部分的排序功能實現代碼不變

2）将最下面的一部分代碼塊替換爲：

//獲取到頁面中表頭，設置點擊事件  
    $("#r-0-0 td").bind("click", function() {
        //獲取到點擊的列索引  
        var index = $(this).parents("tr").find("td").index($(this));
        //獲取class=page-block的div中的table的id
        var tableID = $("div.page-block table").attr("id");
        //調用排序的方法，進行傳值，0是這個表的id，可以通過F12獲取到表的id  
        sortTable(tableID, index);
    });