jQuery根據表格欄位升序和降序詳解

admin發表於2018-11-29
jQuery

本章節分享一段程式碼例項，它實現了表格資料根據一定的規則排序效果。

下面給出程式碼並給予詳細的介紹，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
* {
  margin: 0;
  padding: 0;
}
body {
  padding: 100px;
}
.select {
  position: relative;
  display: inline-block;
  width: 200px;
  height: 30px;
  outline: none;
  background: #f5fafe;
  color: #555555;
  font-size: 18px;
  line-height: 30px;
  border: 1px solid #cad9ea;
  text-indent: 15px;
}
.select option {
  text-indent: 15px;
}
.select option:hover {
  background-color: #ff8800;
  color: #fff;
}
table {
  width: 100%;
  font-size: 16px;
  table-layout: fixed;
  empty-cells: show;
  border-collapse: collapse;
  margin: 20px auto;
  border: 1px solid #cad9ea;
  color: #666;
}
th {
  background: linear-gradient(#f3faff, #f5fafe);
  height: 40px;
  overflow: hidden;
}
td {
  height: 30px;
  text-align: center;
}
td, th {
  border: 1px solid #cad9ea;
  padding: 0 1em 0;
}
tr:nth-child(odd) {
  background-color: #f5fafe;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script type="text/template" id="dataItem">
<tr>
  <td>name</td>
  <td>age</td>
  <td>sex</td>
  <td>weight(kg)</td>
  <td>school</td>
  <td>looking</td>
  <td>job</td>
</tr>
</script>
<script>
(function () {
  var sortBy = function (list, attrName, order) {
    return list
     .slice()
     .sort(function (left, right) {
       var a = left[attrName];
       var b = right[attrName];
       if (a > b || a === void 0) return 1 * order;
       if (a < b || b === void 0) return -1 * order;
       return -1 * order;
     });
  };
  var template = function (string, user) {
    return string.replace('name', user.name)
      .replace('age', user.age)
      .replace('sex', user.sex)
      .replace('weight', user.weight)
      .replace('school', user.school)
      .replace('looking', user.looking)
      .replace('job', user.job);
  };
 
  var getSortedString = function (string, data, select) {
    var str = '';
    var order = parseInt($('#order').val(), 10);
    if (select !== '-1') {
      data = sortBy(data, select, order);
    }
    data.forEach(function (user) {
      str += template(string, user);
    });
    return str;
  };
  window.getSortedString = getSortedString;
})();
 
$(function () {
  var list = [{
    name: 'div教程',
    age: 25,
    sex: '男',
    weight: 60,
    school: '螞蟻部落',
    looking: '標準',
    job: '前端工程師'
  }, {
    name: 'css教程',
    age: 24,
    sex: '女',
    weight: 56,
    school: '螞蟻部落',
    looking: '上等',
    job: '後臺'
  }, {
    name: 'ajax教程',
    age: 27,
    sex: '男',
    weight: 80,
    school: '',
    looking: '中下',
    job: '前端工程師'
  }, {
    name: 'js教程',
    age: 22,
    sex: '女',
    weight: 54,
    school: '青島科技大學',
    looking: '美麗',
    job: '前端工程師'
  }, {
    name: 'softwhy.com',
    age: 20,
    sex: '男',
    weight: 70,
    school: '青島大學',
    looking: '中等',
    job: '後臺開發'
  }, {
    name: 'css3教程',
    age: 19,
    sex: '女',
    weight: 55,
    school: '清華',
    looking: '上等',
    job: '美工'
  }, {
    name: 'json教程',
    age: 28,
    sex: '女',
    weight: 65,
    school: '海洋大學',
    looking: '漂亮',
    job: '美工'
  }];
 
  var fillData = function (select) {
    var str = getSortedString(string, list, select);
    $('#table tr').not('.head').remove();
    $('#table').append(str);
  };
 
  var string = $('#dataItem').html();
 
  $('#select').change(function () {
    var select = $(this).val();
    fillData(select);
  });
 
  $("#order").change(function () {
    $("#select").trigger("change");
  });
  fillData('-1');
});
</script>
</head>
<body>
  <select class="select" id="select">
    <option value="-1">請選擇排序方式</option>
    <option value="name">姓名</option>
    <option value="age">年齡</option>
    <option value="sex">性別</option>
    <option value="weight">體重</option>
    <option value="school">學校</option>
    <option value="looking">相貌</option>
    <option value="job">職業</option>
  </select>
  <select class="select" id="order">
    <option value="1">升序</option>
    <option value="-1">降序</option>
  </select>
  <table summary="人員資訊表" id="table">
    <tr class="head">
      <th>姓名</th>
      <th>年齡</th>
      <th>性別</th>
      <th>體重</th>
      <th>學校</th>
      <th>相貌</th>
      <th>職業</th>
    </tr>
  </table>
</body>
</html>

上面的程式碼實現了排序效果，下面介紹一下它的實現過程。

一.程式碼註釋:

[HTML] 純文字檢視 複製程式碼
<script type="text/template" id="dataItem">
<tr>
  <td>name</td>
  <td>age</td>
  <td>sex</td>
  <td>weight(kg)</td>
  <td>school</td>
  <td>looking</td>
  <td>job</td>
</tr>
</script>

上面的程式碼是規定表格行的模板。

[JavaScript] 純文字檢視 複製程式碼
(function () {})()

上面的程式碼是一個匿名自執行函式，用來建立一些函式。

[JavaScript] 純文字檢視 複製程式碼
var sortBy = function (list, attrName, order) {
    return list
     .slice()
     .sort(function (left, right) {
       var a = left[attrName];
       var b = right[attrName];
       if (a > b || a === void 0) return 1 * order;
       if (a < b || b === void 0) return -1 * order;
       return -1 * order;
     });
  };

上面的程式碼封裝了一個排序函式。

第一個引數是json格式的物件，第二個引數是作為排序標準的欄位，比如年齡、姓名、體重等，第三個規定升序還是降序。

list.slice()可以拷貝一個陣列，避免直接操作原來的陣列。

.sort(function (left, right) {

  var a = left[attrName];

  var b = right[attrName];

  if (a > b || a === void 0) return 1 * order;

  if (a < b || b === void 0) return -1 * order;

  return -1 * order;

})，制定了一些排序規則。

a === void 0這個程式碼的作用是判斷a是否是undefined。

如果一個欄位值是undefined，那麼就靠上排列。

[JavaScript] 純文字檢視 複製程式碼
var template = function (string, user) {
    return string.replace('name', user.name)
      .replace('age', user.age)
      .replace('sex', user.sex)
      .replace('weight', user.weight)
      .replace('school', user.school)
      .replace('looking', user.looking)
      .replace('job', user.job);
  };

解析模板字串，將其中的欄位替換為對應的資料。

[JavaScript] 純文字檢視 複製程式碼
var getSortedString = function (string, data, select) {
  var str = '';
  var order = parseInt($('#order').val(), 10);
  if (select !== '-1') {
    data = sortBy(data, select, order);
  }
  data.forEach(function (user) {
    str += template(string, user);
  });
  return str;
};

此函式取得表格行字串。

第一個引數是模板字串，第二個引數是json格式物件，第三個根據哪個欄位排序。

[JavaScript] 純文字檢視 複製程式碼
window.getSortedString = getSortedString

將getSortedString設定為一個全域性函式，否則後面的程式碼沒法呼叫。

[JavaScript] 純文字檢視 複製程式碼
var fillData = function (select) {
  var str = getSortedString(string, list, select);
  $('#table tr').not('.head').remove();
  $('#table').append(str);
};

引數規定根據哪個欄位排序。

首先獲取tr行資料字串。

然後將原來表格的資料除去頭部都刪除，再將新資料附加到表格中。

[JavaScript] 純文字檢視 複製程式碼
var string = $('#dataItem').html()

獲取模板字串。

[JavaScript] 純文字檢視 複製程式碼
$('#select').change(function () {
    var select = $(this).val();
    fillData(select);
  })

選擇第一個select下拉選單，也就是重新選擇排序基準欄位，就會進行排序操作。

[JavaScript] 純文字檢視 複製程式碼
$("#order").change(function () {
  $("#select").trigger("change");
});

觸發註冊在第一個select下拉選單的事件，也就是重新排序。

二.相關閱讀:

（1）.slice()可以參閱javascript slice()一章節。

（2）.sort()可以參閱javascript sort()一章節。

（3）.a === void 0可以參閱a===void 0的作用是什麼一章節。

（4）.replace()可以參閱javascript replace()一章節。

（5）.not()可以參閱jQuery not()方法一章節。

（6）.append()可以參閱jQuery append()方法一章節。

（7）.trigger()可以參閱jQuery trigger()方法一章節。

相關文章