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

问题描述

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

Ember comes with built-in support for sorting arrays in controllers, which makes it very convenient to update a template when the data's sort order changes.

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

My question, however, is how to conveniently (1) highlight the currently selected column the data is sorted by and (2) the sort order (ascending or descending). By highlighting, I mean adding an up or down arrow, or something similar.

目前，我在视图层中使用jQuery，但我觉得必须有一个更容易的解决方案，因为Ember处理这样的微不足道的问题。

At the moment, I am fiddling with this in the view layer using jQuery, but I feel there must be an easier solution given the elegance with which Ember handles trivial problems like this.

推荐答案

对于表，我建议使用。这是一个强大的库，您可以使用ember，而不用担心任何事情。

For table I would recommend to use datatables.net. It’s a powerful library and you can use with ember without concern about anything

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

In my case I've a function where I passed the id of the table, the header and the data that it’s a multidimensional array.

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');
}

例如，假设你有一个表格，就像这样： / p>

For instance, imagine that you have a table in you HTML like this:

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

他们有一个这样的标题：

Them I have a header like this:

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

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

and finally a multidimensional array like:

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

他们会调用我的函数：

setDataTable("phoneItemsTable", PhoneHeader, myArray );

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

The others parameter are for customization of the table.

我希望这可以帮助你

这篇关于如何使用Ember突出显示当前选定的列？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！