YUI DataTable пользовательская проблема sortFunction - PullRequest
1 голос
/ 19 мая 2010

Я использую YUI DataTable с пользовательской функцией sort, которая удаляет HTML-код, для сортировки только по текстовому содержимому, а не по всей строке с HTML-тегами.Проблема, с которой я столкнулся, заключается в том, что мне нужно использовать эту функцию сортировки в трех разных столбцах, и я не могу передать значение "field" в мою функцию sort.Я хочу использовать «поле» вместо того, чтобы называть столбец - потому что я хотел бы использовать одну и ту же функцию сортировки для всех трех столбцов, а не повторять ее три раза, как в коде ниже.Когда я передаю «поле», сортировка останавливается или зависает в браузере, и «поле» кажется «неопределенным».Есть идеи?

YAHOO.util.Event.addListener(window, "load", function() {

    var sortProject = function(a, b, desc) {
        var col = "project";
        // Deal with empty values 
            if(!YAHOO.lang.isValue(a)) {
                return (!YAHOO.lang.isValue(b)) ? 0 : 1;
            } 
            else if(!YAHOO.lang.isValue(b)) {
                return -1;
            }
        var comp = YAHOO.util.Sort.compare;
        var tagregex = /<[^>]*>/g;
        var aString = a.getData(col).replace(tagregex, "");
        var bString = b.getData(col).replace(tagregex, "");
        var compString = comp(aString, bString, desc);
        return compString;
    };

    var sortArchitect = function(a, b, desc) {
        var col = "architect"
        // Deal with empty values 
            if(!YAHOO.lang.isValue(a)) {
                return (!YAHOO.lang.isValue(b)) ? 0 : 1;
            }
            else if(!YAHOO.lang.isValue(b)) {
                return -1;
            }
        var comp = YAHOO.util.Sort.compare;
        var tagregex = /<[^>]*>/g;
        var aString = a.getData(col).replace(tagregex, "");
        var bString = b.getData(col).replace(tagregex, "");
        var compString = comp(aString, bString, desc);
        return compString;
    };

    var sortStatus = function(a, b, desc) {
        var col = "status"
        // Deal with empty values 
            if(!YAHOO.lang.isValue(a)) {
                return (!YAHOO.lang.isValue(b)) ? 0 : 1;
            }
            else if(!YAHOO.lang.isValue(b)) {
                return -1;
            }
        var comp = YAHOO.util.Sort.compare;
        var tagregex = /<[^>]*>/g;
        var aString = a.getData(col).replace(tagregex, "");
        var bString = b.getData(col).replace(tagregex, "");
        var compString = comp(aString, bString, desc);
        return compString;
    };

    var myColumnDefs = [
        {key:"design",label:"<span class='dtTitleText'>Design</span>", width:105, formatter:YAHOO.widget.DataTable.formatDate, sortable:true},
        {key:"status",label:"<span class='dtTitleText'>Status</span> <sup>1</sup>", sortable:true, width:62, sortOptions:{sortFunction:sortStatus}},
        {key:"project",label:"<span class='dtTitleText'>Project Name</span>", sortable:true, width:105, sortOptions:{sortFunction:sortProject}},
        {key:"address",label:"<span class='dtTitleTextNoSort'>Address</span>", width:80, sortable:false},
        {key:"city",label:"<span class='dtTitleText'>City</span>", width:80, sortable:true},
        {key:"state",label:"<span class='dtTitleText'>State</span>", width:45, sortable:true},
        {key:"type",label:"<span class='dtTitleText'>Building <br />Type</span>", width:75, sortable:true},
        {key:"feet",label:"<span class='dtTitleText'>Gross <br />Sq. Ft.</span>", width:55, formatter:YAHOO.widget.DataTable.formatNumber,sortable:true},
        {key:"owner",label:"<span class='dtTitleText'>Building <br />Owner</span>", width:95, sortable:true},
        {key:"architect",label:"<span class='dtTitleText'>Architect of <br />Record (AOR)</span>", width:115, sortable:true, sortOptions:{sortFunction:sortArchitect}}
    ];

    var myDataSource = new YAHOO.util.DataSource(YAHOO.util.Dom.get("storableTable"));
    myDataSource.responseType = YAHOO.util.DataSource.TYPE_HTMLTABLE;
    myDataSource.responseSchema = {
        fields: [{key:"design", parser:"number"},
                {key:"status"},
                {key:"project"},
                {key:"address"},
                {key:"city"},
                {key:"state"},
                {key:"type"},
                {key:"feet", parser:"number"},
                {key:"owner"},
                {key:"architect"}
        ]
    };

    var myDataTable = new YAHOO.widget.DataTable("progEnhanceTable", myColumnDefs, myDataSource,
            {sortedBy:{key:"design",dir:"desc"}, renderLoopSize: 50}
    );

    return {
        oDS: myDataSource,
        oDT: myDataTable
    }; });

1 Ответ

2 голосов
/ 19 мая 2010

Как насчет генерации функций сортировки в функции:

function makeSortFunction(col) {
    return function(a, b, desc) {

        // NOTE: the passed 'col' variable is available inside closure...

        // Deal with empty values 
            if(!YAHOO.lang.isValue(a)) {
                return (!YAHOO.lang.isValue(b)) ? 0 : 1;
            } 
            else if(!YAHOO.lang.isValue(b)) {
                return -1;
            }
        var comp = YAHOO.util.Sort.compare;
        var tagregex = /<[^>]*>/g;
        var aString = a.getData(col).replace(tagregex, "");
        var bString = b.getData(col).replace(tagregex, "");
        var compString = comp(aString, bString, desc);
        return compString;
    };
}

И используйте его как

{key:"status",label:"<span class='dtTitleText'>Status</span> <sup>1</sup>", sortable:true, width:62, sortOptions:{sortFunction:makeSortFunction('status')}},
{key:"project",label:"<span class='dtTitleText'>Project Name</span>", sortable:true, width:105, sortOptions:{sortFunction:makeSortFunction('project')}},

Вместо обращения к функции это вызов makeSortFunction(), который возвращает фактическую функцию сортировки.

...