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

Ember内置支持在控制器中对数组进行排序，这使得在数据排序顺序更改时更新模板非常方便。

然而，我的问题是如何方便地（1）突出显示当前选择的数据排序列和（2）排序顺序（升序或降序）。 通过突出显示，我的意思是添加向上或向下箭头，或类似的东西。

目前，我正在使用jQuery在视图层中摆弄这个，但我觉得必须有一个更简单的解决方案，因为Ember处理这样的琐碎问题的优雅。

Answer 1

对于表格，我建议使用datatables.net 。 它是一个function强大的库，你可以使用ember而不用担心任何事情

在我的情况下，我有一个函数，我传递表的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中有一个表格，如下所示：

他我有这样的标题：

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

最后是一个多维数组，如：

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

他我会称我的function：

 setDataTable("phoneItemsTable", PhoneHeader, myArray ); 

其他参数用于表的自定义。

我希望这可以帮到你