YUI DataTable trifonction personnalisée problème

Question

J'utilise un YUI DataTable avec une fonction sortF personnalisée qui supprime le code HTML, à trier en fonction du contenu du texte uniquement, plutôt que la chaîne entière avec des balises HTML. Le problème que j'ai est que j'ai besoin de faire usage de cette fonction de tri sur trois colonnes différentes, et je ne peux pas sembler passer la valeur "field" dans ma fonction de tri. Je veux utiliser "champ" plutôt que de nommer la colonne - parce que je voudrais utiliser la même fonction de tri pour les trois colonnes plutôt que de le répéter trois fois comme je l'ai dans le code ci-dessous. Quand je passe dans le "champ" le tri se bloque ou se bloque dans le navigateur et "champ" semble être "indéfini". Des idées?

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

Que diriez-vous générer les fonctions de tri en fonction:

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

et l'utiliser comme

{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')}}, 

Plutôt que de se référer à la fonction, cela appelle makeSortFunction(), qui renvoie la fonction de tri réelle.