JavaScript表のヘッダーをクリックし、表のソートを実現
5657 ワード
現在、vue/reactなどのjsフレームワークに付属するUIフレームワークが多く、表にはヘッダーをクリックしてソートする運動エネルギーが付属しています.その後js/jq手書きの話を小さく考えて、論理的にどのように実現しますか.小さなdemoと書いて、ここで共有します.これは小さな白demoです.
1.説明
1)ページプリセットレイアウトページにはあらかじめヘッダが与えられており,具体的なhtmlコードは以下の通りである.ヘッダのkey属性が後述する.
1.説明
1)ページプリセットレイアウトページにはあらかじめヘッダが与えられており,具体的なhtmlコードは以下の通りである.ヘッダのkey属性が後述する.
demo2
， ， 。
id
/** javaScript code....*/
<script>
</body>
</html>
</code></pre>
<p>2） ： 。 <code>people</code> ：</p>
<pre><code> var people = [
{
id: '001',
name: 'celine',
age: '18',
status: 2
},
{
id: '003',
name: 'apple',
age: '16',
status: 0
},
{
id: '002',
name: 'andy',
age: '22',
status: 1
},
{
id: '005',
name: 'hunter',
age: '1',
status: 0
},
{
id: '004',
name: 'redis',
age: '15',
status: 1
},
{
id: '019',
name: 'mango',
age: '18',
status: 0
},
];
</code></pre>
<p>3） <br> ， ，append <body></body> 。<br> ：</p>
<pre><code> function getbaseList(ary) {
var html = '';
for (var i=0 ; i<ary.length; i++){
var status = '';
switch(ary[i].status){
case 1: status = ' '; break;
case 2: status = ' '; break;
default: status = ' ';
}
html += '<tr>';
html += '<td>' + (i+1) + '</td>';
html += '<td>' + ary[i].id + '</td>';
html += '<td>' + ary[i].name + '</td>';
html += '<td>' + ary[i].age + '</td>';
html += '<td>' + status + '</td>';
html += '</tr>';
}
$('#baseTable tbody').empty().append(html);
}
</code></pre>
<h3>2. </h3>
<p> ， ， 。<br> ：</p>
<ul>
<li> ？</li>
<li> （ASC） （DESC）？</li>
</ul>
<p><strong>1） </strong><br> 。 ， ， 。 —— key 。</p>
<pre><code> <th key="id">id</th>
<th key="name"> </th>
<th key="age"> </th>
<th key="status"> </th>
</code></pre>
<p> <code>people</code> 。</p>
<p><strong>2） </strong><br> ， ， ——sort 。 <code>people</code> ， sort 。 ， 。</p>
<p> ， ， sort （ ）； ， sort 。</p>
<pre><code> $('#baseTable th').on('click', function(){
var sort_ary;
if ($(this).attr('sort') == 'desc') {
//
sort_ary = people.sort(compare($(this).attr('key'),-1));
getbaseList(sort_ary);
// sort ，
$(this).attr('sort', 'asc');
} else {
//
sort_ary = people.sort(compare($(this).attr('key'),1));
getbaseList(sort_ary);
// sort ，
$(this).attr('sort', 'desc');
}
});
</code></pre>
<h3>3. </h3>
<p> ， sort() 。<br> ： ， 。<br> ： <code>prop</code>、 / <code>type</code>。</p>
<pre><code> /**
*
* @param {string} prop key
* @param {number} type 1:asc -1:desc
* @return {number}
*/
function compare(prop,type) {
return function (obj1, obj2) {
var val1 = obj1[prop];
var val2 = obj2[prop];
if (!isNaN(Number(val1)) && !isNaN(Number(val2))) {
val1 = Number(val1);
val2 = Number(val2);
}
if (val1 < val2) {
return 0-type;
} else if (val1 > val2) {
return type;
} else {
return 0;
}
}
}
</code></pre>
<h3>4. </h3>
<p> ， table-sort.html。<br> ， ， reverse() JavaScript- </p>
</article>
</div>
</div>
</div>
<!--PC WAP -->
<div id="SOHUCS" sid="1243454412228251648"></div>
<script type="text/javascript" src="/views/front/js/chanyan.js">