2016-12-24 64 views
-2

我有这个Javascript来生成表,我添加了一个单击事件的标题标签,所以用户可以单击列名进行排序,但我现在需要现在排序dataset这样的列我需要知道列的名称和数据类型以传递给函数sort_col(),无论它是字符串还是数字或日期,以便能够基于此数据类型进行排序,所以我该怎么做?如何返回表列数据类型进行排序

var dataset = [ 
 
    { "field1":"dfg34r", "field2":"32.24" }, 
 
    { "field1":"d3f32dg", "field2":"32.52", "fdate":"3/2/2015" }, 
 
    { "field1":"fdbhjjts", "fdate":"7/4/2015" } ] ; 
 
var cols = []; 
 

 
function addHeaders(table, keys) { 
 
    var row = table.insertRow(); 
 
    
 
    for(var i = 0; i < keys.length; i++) { 
 
     var cell = row.insertCell(); 
 
    
 
     cols.push(keys[i]); 
 
     cell.outerHTML = "<th><a href='#'>"+keys[i]+"</a></th>"; 
 
    } 
 
} 
 

 
var max_keys = 0; 
 
var max_idx = 0; 
 
for(var i = 0; i < dataset.length; i++) { 
 

 
    var child = dataset[i]; 
 
     
 
    cur_keys = Object.keys(child).length; 
 
    if (cur_keys > max_keys) { 
 
     max_keys = cur_keys; 
 
     max_idx = i; 
 
    } 
 
     
 
} 
 

 
var table = document.createElement('table'); 
 
addHeaders(table, Object.keys(dataset[max_idx])); 
 

 
for(var i = 0; i < dataset.length; i++) { 
 

 
    var child = dataset[i]; 
 
    
 
    var row = table.insertRow(); 
 
    var col_idx = 0; 
 
    
 
    Object.keys(child).forEach(function(k) { 
 
    
 
    if (k != cols[col_idx]){ 
 
     var cell = row.insertCell(); 
 
     cell.appendChild(document.createTextNode("")); 
 
    } 
 
     
 
    col_idx++;  
 
    var cell = row.insertCell(); 
 
    cell.appendChild(document.createTextNode(child[k])); 
 

 
    }) 
 
} 
 

 
document.getElementById('container').appendChild(table); 
 

 
var th = document.getElementsByTagName("th"); 
 
for (i = 0; i < th.length; i++) { 
 
     th[i].addEventListener("click", sort_col); 
 
} 
 

 
function sort_col(){ 
 
    alert(this.innerHTML); 
 
    
 
    
 
}
<div id="container" style="text-align: left;"></div>

回答

1

你可以让你的不同的数据类型哪些假设?

编写一个函数来帮助你选择一个比较,这里是一个什么这样的功能可能看起来像

function chooseSortType(exampleData) { 
    let choice = typeof exampleData; 

    if (choice === 'object') { 
     const type = [Date, Array, Foo, ...] 
      .find(objType => exampleData instanceof objType); 
     if (type) choice = type.constructor.name; 
    } 

    if (choice === 'string') { 
     // test against RegExps to match types, e.g. 
     if (/^\d{2}\/\d{2}\/\d{2}\d{2}?$/.test(exampleData)) 
      choice = 'stringDate'; 
     else if (false) 
      ; // etc 
    } 

    const known = { 
     number(x, y) { 
      return y - x; 
     }, 
     string(x, y) { 
      return x.localeCompare(y); 
     }, 
     Date(x, y) { 
      return y.valueOf() - x.valueOf(); 
     }, 
     Array(x, y) { 
      return y.length - x.length; 
     }, 
     stringDate(x, y) { 
      x = new Date(x); 
      y = new Date(y); 
      return y.valueOf() - x.valueOf(); 
     } 
    }; 
    return known[choice]; 
} 

现在说要排序的阵列的例子,但你不知道什么类型的你“会被想排序,你的数据的一个例子传递给排序和功能选择正确的比较

let arr = [[3, 3, 3], [1], [4, 4, 4, 4], [2, 2]]; 
arr.sort(chooseSortType(arr[0])); 
// `arr` now [Array[1], Array[2], Array[3], Array[4]] 
1

,如果你只是想看看被点击的列...

for (i = 0; i < th.length; i++) { 
    th[i].addEventListener("click", function (evt) {sort_col(evt);)}; 
} 

,这让列名

function sort_col(evt) { 

    alert(evt.target.innerText); 
} 
相关问题