黑马程序员技术交流社区

标题: 一道前端笔试题 [打印本页]
作者: wzg682735    时间: 2016-6-17 15:39
标题: 一道前端笔试题
如下图，请实现表格信息的排序功能，当点击表头的属性区域，将表格信息进行排序切换功能，即第一次点击为降序排序，再一次点击进行升序排序。

参考答案：
  1. <table id="table" border="1">
  2.         <tr>
  3.             <th id="name">姓名</th>
  4.             <th id="power">力量</th>
  5.             <th id="agility">敏捷</th>
  6.             <th id="iq">智力</th>
  7.         </tr>
  8. </table>

复制代码
  1.   var data = [{
  2.         name: '德鲁伊',
  3.         power: 17,
  4.         agility: 24,
  5.         iq: 13
  6.     }, {
  7.         name: '月之骑士',
  8.         power: 15,
  9.         agility: 22,
  10.         iq: 16
  11.     }, {
  12.         name: '众神之王',
  13.         power: 19,
  14.         agility: 15,
  15.         iq: 20
  16.     }, {
  17.         name: '流浪剑客',
  18.         power: 23,
  19.         agility: 15,
  20.         iq: 14
  21.     }];

  23.     ! function() { //初始化渲染
  24.         var table = $('table');
  25.         for (var i = 0; i < data.length; i++) {
  26.             item = '<tr><td class="name">' + data[i].name + '</td><td class="power">' + data[i].power + '</td><td class="agility">' + data[i].agility + '</td><td class="iq">' + data[i].iq + '</td></tr>';
  27.             table.append(item);
  28.         }
  29.     }()

  31.     ! function() {
  32.         var count_name = 0,count_power = 0,count_agility = 0,count_iq = 0;

  34.         $('#name').click(function() {
  35.             count_power = 0,count_agility = 0,count_iq = 0;    //将其他排序列状态置零，也就是说当点了姓名进行排序之后，若再点其它排序，那么必然是从升序开始
  36.             if (count_name % 2 === 1) { //奇数升序
  37.                 data = sort(data, 'name', 'unicode,ascend');
  38.             } else { //偶数降序
  39.                 data = sort(data, 'name', 'unicode,descend');
  40.             }
  41.             count_name++;

  43.             //视图层渲染
  44.             var area = $("tr").slice(1);
  45.             for (var i = 0; i < data.length; i++) {
  46.                 area.eq(i).find('.name').text(data[i].name);
  47.                 area.eq(i).find('.power').text(data[i].power);
  48.                 area.eq(i).find('.agility').text(data[i].agility);
  49.                 area.eq(i).find('.iq').text(data[i].iq);
  50.             }
  51.         })
  52.         $('#power').click(function() {
  53.             count_name = 0,count_agility = 0,count_iq = 0;
  54.             if (count_power % 2 === 1) {
  55.                 data = sort(data, 'power', 'number,ascend');
  56.             } else {
  57.                 data = sort(data, 'power', 'number,descend');
  58.             }
  59.             count_power++;

  61.             var area = $("tr").slice(1);
  62.             for (var i = 0; i < data.length; i++) {
  63.                 area.eq(i).find('.name').text(data[i].name);
  64.                 area.eq(i).find('.power').text(data[i].power);
  65.                 area.eq(i).find('.agility').text(data[i].agility);
  66.                 area.eq(i).find('.iq').text(data[i].iq);
  67.             }
  68.         })
  69.         $('#agility').click(function() {
  70.             count_name = 0,count_power = 0,count_iq = 0;
  71.             if (count_agility % 2 === 1) {
  72.                 data = sort(data, 'agility', 'number,ascend');
  73.             } else {
  74.                 data = sort(data, 'agility', 'number,descend');
  75.             }
  76.             count_agility++;

  78.             var area = $("tr").slice(1);
  79.             for (var i = 0; i < data.length; i++) {
  80.                 area.eq(i).find('.name').text(data[i].name);
  81.                 area.eq(i).find('.power').text(data[i].power);
  82.                 area.eq(i).find('.agility').text(data[i].agility);
  83.                 area.eq(i).find('.iq').text(data[i].iq);
  84.             }
  85.         })
  86.         $('#iq').click(function() {
  87.             count_name = 0,count_power = 0,count_agility = 0;
  88.             if (count_iq % 2 === 1) {
  89.                 data = sort(data, 'iq', 'number,ascend');
  90.             } else {
  91.                 data = sort(data, 'iq', 'number,descend');
  92.             }
  93.             count_iq++;

  95.             var area = $("tr").slice(1);
  96.             for (var i = 0; i < data.length; i++) {
  97.                 area.eq(i).find('.name').text(data[i].name);
  98.                 area.eq(i).find('.power').text(data[i].power);
  99.                 area.eq(i).find('.agility').text(data[i].agility);
  100.                 area.eq(i).find('.iq').text(data[i].iq);
  101.             }
  102.         })
  103.     }()

  105.     //对数据进行排序
  106.     function sort(data, field, compareFunction) {
  107.         var handler = {
  108.             'unicode,ascend': function(pre, next) {
  109.                 if (pre[field] > next[field])
  110.                     return -1;
  111.                 else
  112.                     return 1;
  113.             },
  114.             'unicode,descend': function(pre, next) {
  115.                 if (pre[field] > next[field])
  116.                     return 1;
  117.                 else
  118.                     return -1;
  119.             },
  120.             'number,ascend': function(pre, next) {
  121.                 return next[field] - pre[field];
  122.             },
  123.             'number,descend': function(pre, next) {
  124.                 return pre[field] - next[field];
  125.             }
  126.         }
  127.         if (typeof compareFunction === 'string') {
  128.             data.sort(handler[compareFunction]);
  129.         } else if (typeof compareFunction === 'function')
  130.             data.sort(compareFunction);
  131.         else
  132.             data.sort();
  133.         return data;
  134.     }
复制代码






欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2