如何使用Ember突出显示当前选定的列？

Question

灰烬附带在控制器数组排序，这使得它非常方便地更新模板时，该数据的排序顺序变化的内置支持。

我的问题，但是，是如何便利地（1）突出显示当前选择的列的数据排序方法，（2）排序顺序（升序或降序）。突出显示，我的意思是增加一个向上或向下的箭头或类似的东西。

此刻，我与这摆弄使用jQuery视图层，但我觉得必须有鉴于与灰烬处理这样琐碎的问题优雅的简单的解决方案。

Answer 1

对于表我建议使用datatables.net。这是一个功能强大的库，你可以使用烬而不用担心任何事情

在我的情况下，我有一个函数，我传递了表的ID，标题和数据，它是一个多维数组。

function setDataTable(tableId,header,data,elementToOrder,typeOrder,index,value,displayLength,paginate,applyClass,callback){ 
    if(tableId==null||header==null||data==null) 
     return; 
    var table=$('#'+tableId); 
    var tableElement=document.getElementById(tableId); 
    if(tableElement==null) 
     return; 
    if($.fn.DataTable.fnIsDataTable(tableElement)) 
     table.dataTable().fnDestroy(); 
    if(elementToOrder==null) 
     elementToOrder=0; 
    if(typeOrder==null) 
     typeOrder="desc"; 
    if(displayLength===null) 
     displayLength="10"; 
    if(paginate==null) 
     paginate=true; 
    table.dataTable({ 
     "sDom":"<'row no-side-margin'<'float-left'l><'float-rigth'f>r>t<'row no-side-margin'<'float-left'i><'float-rigth'p>>", 
     "sPaginationType":"bootstrap", 
     "oLanguage":{ 
      "sLengthMenu":"_MENU_ Itens por pagina", 
      "sSearch":"Pesquisar:", 
      "sInfo":"Mostrando _START_ a _END_ de _TOTAL_ linhas", 
      "sInfoEmpty":"Não existem linhas para mostrar", 
      "sEmptyTable":"Não há dados disponíveis na tabela", 
      "oPaginate":{ 
       "sNext":"Próximo", 
       "sPrevious":"Anterior" 
      } 
     }, 
     "fnDrawCallback":function(oSettings){ 
      if(callback==null) 
       return; 
      window.setTimeout(callback,100); 
     }, 
     "iDisplayLength":displayLength, 
     "aaSorting":[[elementToOrder,typeOrder]], 
     "bProcessing":true, 
     "bDeferRender":true, 
     "bPaginate":paginate, 
     "aaData":data, 
     "aoColumns":header, 
     "fnRowCallback":function(nRow,aData,iDisplayIndex,iDisplayIndexFull){ 
      if(index==null) 
       return; 
      if(!applyClass) 
       return; 
      if(aData[index]===value) 
       $(nRow).addClass("danger");else 
       $(nRow).addClass("success"); 
     } 
    }); 
    table.removeAttr('style'); 
} 

例如，假设你在你的HTML这样有一个表：

<table id="phoneItemsTable" class="table table-bordered table-striped table-hover table-condensed"></table> 

他们，我有这样一个标题：

var PhoneHeader = [ { 
    "sTitle": "State" 
},{ 
    "sTitle": "# Phone" 
},{ 
    "sTitle": "# Client" 
}]; 

最后一个多维数组一样：

var myArray = []; 
myArray.pushObject(["ok", "4455522", "221334"]); 
myArray.pushObject(["not ok", "4455522", "221334"]); 

他们是我d打电话给我的功能：

setDataTable("phoneItemsTable", PhoneHeader, myArray); 

其他参数用于定制表格。

我希望这可以帮助你