2010-05-19 41 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