几个月前的学习总结写过利用系统自带函数 "GetPageListB yExtendFields" 实现扩展字段筛选查询功能。

最近又碰到一个需要对扩展字段列表排序的功能需求，但这次是需要对其中三个扩展字段求和后再进行排序，这样利用GetPageListB yExtendFields函数查询是不可行的了。如果放在SQL语句中是很好处理的，但新系统不支持直接进行sql查询那怎么办？

这个时候想到了 list.js 这个脚本库。list.js一个轻量级的为列表提供搜索，排序，过滤器的脚本库

官网地址：https://listjs.com/

首先建好扩展模型，把扩展字段写好列表标签。

<li class="@Row.PositionLiteral @Row.IntervalLiteral @Row.HighRankLiteral">

    <span class="no">@Row.Index</span>
    <span class="title">@Model.Title</span>
    <span class="ajkp">@Model.ExtendObject.ajkp</span>
    <span class="zfjc">@Model.ExtendObject.zfjc</span>
    <span class="zfjd">@Model.ExtendObject.zfjd</span>
    <span class="sum">@(Model.ExtendObject.ajkp + Model.ExtendObject.zfjc + Model.ExtendObject.zfjd)</span>

</li>

模板中按列表形式输出

<div class="zfzlList" id="zfzlList">
  <div class="thead">
    <span class="no" id="sort-no">排名</span>
    <span class="title" id="sort-title">单位名称</span>
    <span class="ajkp" id="sort-ajkp">案件考评</span>
    <span class="zfjc" id="sort-zfjc">执法基础</span>
    <span class="zfjd" id="sort-zfjd">执法监督</span>
    <span class="sum" id="sort-sum">总扣分</span>
  </div>
  <div class="tbody list">
    @Power.ArticleList("执法质量列表", new { ShowPic = true, TitleLength = 320, Count = 999, Node = Model, 
    Sort = "Priority,PublishTime,ContentId", ExtendField = true })
  </div>
</div>

加载list.js脚本库

<script src="@Url.AppendVersion("~/content/main/contentmanage/special/zhifazhiliang/js/list.js")"></script>

模板中执行相关解发脚本

<script type="text/javascript">
  //定义选项卡
  var options = {
        valueNames: [ 'no', 'title', 'ajkp', 'zfjc', 'zfjd', 'sum' ]
    };
  
  //排序列表实体
  var featureList = new List('zfzlList', options);
  
  //先按总扣分项降序排序一次
  featureList.sort('sum', { order: "desc" });
  //显示排名序列
  for (var i = 0; i < $(".list li").length; i++) {
    $(".list li .no").eq(i).html( i+1 )
  }
  
  //触发其它排序选项时
  $('#sort-title').click(function() { featureList.sort('title', { order: "desc" });});
  $('#sort-ajkp').click(function() { featureList.sort('ajkp', { order: "desc" });});
  $('#sort-zfjc').click(function() { featureList.sort('zfjc', { order: "desc" });});
  $('#sort-zfjd').click(function() { featureList.sort('zfjd', { order: "desc" });});
  $('#sort-sum').click(function() { featureList.sort('sum', { order: "desc" });});
</script>

这个脚本库不单单实现了按某个字段进行排序，还能触发其它排序选项，还有搜索，筛选功能非常强大，

唯一不足是你必须先把整个表预加载进来，不能像系统标签这样实现分页显示的功能。