JS实现不刷新页面进行排序功能

编辑
  • 文档创建者:1176846029
  • 浏览次数:4301次
  • 编辑次数:10次
  • 最近更新:Kevin-s 于 2019-06-23
  • 1. 描述

    填报的时候可以对表格进行排序。根据帮助文档,用了扩展后排序这个功能,发现了每次点击的时候都会刷新一下页面,这样导致我刚刚填报的数据被刷新没了。

    为了解决此问题,我们使用 JavaScript 来实现不刷新页面进行排序的功能,实现效果如下:

    222


    2. 思路

    通过JavaScript 来排序,对页面上的位置进行调整。


    3. 操作步骤

    3.1 准备模板

    1)打开设计器,添加一个新的模板,为该模板创建一个数据集。SQL 语句为:SELECT * FROM S产品 where  产品id<20

    222

    2)将数据集中的数据拖到单元格,并设置样式,如下:

    222


    3.2 添加 JavaScript

    选择 模板>模板 Web 属性>填报页面设置,选择为该模板单独设置,然后添加加载结束事件。如下:

    222
    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 来获取到对应的元素。


    4. 保存预览

    点击预览,效果如上图。

    已完成模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\JS实现排序功能.cpt


    5. 注意事项

    上述方案兼容性并不高,有的报表列并没有‘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);
        });


    附件列表


    主题: 二次开发
    标签: 暂无标签
    如果您认为本文档还有待完善,请编辑

    文档内容仅供参考,如果你需要获取更多帮助,付费/准付费客户请咨询帆软技术支持
    关于技术问题,您还可以前往帆软社区,点击顶部搜索框旁边的提问按钮
    若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

    此页面有帮助吗?只是浏览 [ 去社区提问 ]