前台javascript排序

Posted 2020-08-06 黄仔

 

<script type="text/javascript">
$(function () {

  $(‘.Sorthead-ShowUp‘).click(function () {
     var filed = $(this).attr("name");
     $(".issorting").removeClass("issorting");
     $(this).addClass("issorting");

     DoSort("asc", filed);
  });

  $(‘.Sorthead-ShowDown‘).click(function () {
     var filed = $(this).attr("name");
     $(".issorting").removeClass("issorting");
     $(this).addClass("issorting");

     DoSort("desc", filed);
  });

});



//排序
function DoSort(strSortDirection, filed) {
  if (filed == null || $.trim(filed) == "") { return false; }
  if (isSorting) { return false; }
  isSorting = true; //排序锁：正在排序
  var arrTr = $("#FundHoldingsBody tr");
  arrTr.sort(function (a, b) {
  var objCur = $(a);
  var objNext = $(b);
  var curValue;
  var nextValue;

  curValue = objCur.children("[name=‘" + filed + "‘]").text();
  nextValue = objNext.children("[name=‘" + filed + "‘]").text();

  if (strSortDirection == "asc") {
  //正序
  if (curValue == "--" && nextValue == "--") {
  return 0;
  } else {
  if (nextValue == "--") {
  return -1;
  } else if (curValue == "--") {
  return 1;
  } else {
  return Number(curValue) - Number(nextValue);
  }
  }
  } else {
  //--------------------倒序+-----------------
  if (curValue == "--" && nextValue == "--") {
  return 0;
  } else {
  if (nextValue == "--") {
  return -1;
  } else if (curValue == "--") {
  return 1;
  } else {
  return Number(nextValue) - Number(curValue);
  }
  }
  }
  });
  $("#FundHoldingsBody").empty();
  $("#FundHoldingsBody").append(arrTr); //将排序好的元素集合重新加到body中
  $.each(arrTr, function (i, n) {
  $(n).find("#tdIndex").text(i + 1);
  });
  isSorting = false; //排序锁：排序完成
}

</script>

<table class="list sortable" cellspacing="0">
                <thead>
                    <tr>
                        <th>
                            姓名
                        </th>
                        <th>
                            学号
                        </th>
                        <th>
                            当前权益
                            <span><div class="Sorthead-ShowUp" name ="AssetAmount" title="升序排列"><a href="#" class="sortup"></a></div>
                            <div class="Sorthead-ShowDown" name ="AssetAmount" title="降序排列"><a href="#" class="sortdown"></a></div></span>
                        </th>
                        <th>
                            可用资金
                            <span><div class="Sorthead-ShowUp" name ="AvailableCapital" title="升序排列"><a href="#" class="sortup"></a></div>
                            <div class="Sorthead-ShowDown" name ="AvailableCapital" title="降序排列"><a href="#" class="sortdown"></a></div></span>
                        </th>
                        <th>
                            交易费
                            <span><div class="Sorthead-ShowUp" name ="SumCostTotal" title="升序排列"><a href="#" class="sortup"></a></div>
                            <div class="Sorthead-ShowDown" name ="SumCostTotal" title="降序排列"><a href="#" class="sortdown"></a></div></span>
                        </th>
                        <th>
                            总盈亏
                            <span><div class="Sorthead-ShowUp" name ="ProfitAndLoss" title="升序排列"><a href="#" class="sortup"></a></div>
                            <div class="Sorthead-ShowDown" name ="ProfitAndLoss" title="降序排列"><a href="#" class="sortdown"></a></div></span>
                        </th>
                        <th>
                            持仓保证金
                            <span><div class="Sorthead-ShowUp" name ="Margin" title="升序排列"><a href="#" class="sortup"></a></div>
                            <div class="Sorthead-ShowDown" name ="Margin" title="降序排列"><a href="#" class="sortdown"></a></div></span>
                        </th>
                        <th>
                            资金风险率
                            <span><div class="Sorthead-ShowUp" name ="CapitalRiskRate" title="升序排列"><a href="#" class="sortup"></a></div>
                            <div class="Sorthead-ShowDown" name ="CapitalRiskRate" title="降序排列"><a href="#" class="sortdown"></a></div></span>
                        </th>
                    </tr>
                </thead>
                <tbody id="FundHoldingsBody" class="tdHistoryDealBody">
                </tbody>
            </table>