2010-05-19 2 views
1

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

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