JS實現不重新整理頁面進行排序功能

1.1 問題描述

填報的時候可以對表格進行排序。使用擴展後排序，發現了每次點選表頭排序時都會重新整理一下頁面，這樣就會導致剛剛填報的資料被重新整理沒了。

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

注1：此方案不支援存在凍結列欄的報表使用 。

注2：不支援決策報表和 FVS 視覺化看板 。

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 效果預覽

儲存範本，點選「填報預覽」，效果如下圖所示：

注：不支援行動端。

點選可下載範本：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);
    });