2010-05-19 68 views
1

我正在使用帶有自定義排序功能的YUI DataTable去除HTML代碼,僅基於文本內容進行排序,而不是使用HTML標記整個字符串進行排序。我遇到的問題是我需要在三個不同的列上使用這種排序功能,而且我似乎無法將「字段」值傳遞給我的排序函數。我想使用「字段」而不是命名列 - 因爲我想對所有三列使用相同的排序函數,而不是像我在下面的代碼中那樣重複三次。當我通過「字段」排序停滯或掛在瀏覽器和「字段」似乎是「未定義」。有任何想法嗎?YUI DataTable自定義排序功能問題

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

回答

2

如何產生的排序功能的函數:

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(),它返回實際排序功能。

+0

Gavin, 非常感謝您回答我的問題。您的解決方案完美運作。正是我所希望的!這對我來說是一次學習經歷。謝謝! – Matt 2010-05-21 12:31:34