Question

我正在使用YUI DataTable和自定义sortFunction来删除HTML代码，仅基于文本内容进行排序，而不是使用HTML标记整个字符串。我遇到的问题是我需要在三个不同的列上使用这个排序函数，我似乎无法将“字段”值传递给我的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
    }; });

Answer 1

如何在函数中生成排序函数：

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()，它返回实际的排序函数。

YUI DataTable自定义sortFunction问题

1 个答案: