Recommandation pour le plugin JQuery pour Tablepicker?

Question

Je suis à la recherche d'une recommandation pour un plug-in JQuery qui ressemble et qui se comportera comme le Jpu datepicker, mais permettez-moi de choisir une ligne à partir d'une table. Une liste de sélection de table de toutes sortes. Je dois croire que quelque chose comme ça est là, mais je n'arrive pas à trouver quelque chose comme ça. Je ne cherche pas un autocompleter - plus comme lorsque le champ de formulaire JSP obtient le focus, une liste de sélection apparaît qui est peuplée par une table ...

Toutes/toutes les réponses ont apprécié.

Answer 1

J'ai roulé mon propre sélecteur pour cela et fait un plug-in pour cela. C'est ma première tentative de créer un plugin jQuery, donc tout conseil ou feedback est le bienvenu. Le code dépend fortement de Jquery 1.4.2, JQuery UI pour le formatage CSS de la fenêtre contextuelle et le plug-in DataTables pour le formatage et la pagination de la table.

---

jquery.tablepicker.js

(function($) { 
    // Shell for the plugin code 
    $.fn.tablePicker = function(options) { 
    // Plugin code 
    var tbl = null; 
    return this.each(function() { 
     // for each item in selector 
     options = $.extend($.fn.tablePicker.defaults, options); 
     tbl= $('#'+options.tblName); 
     $(tbl).wrap(options.container); 
     if(!$.isEmptyObject(options.header)){ 
      var headerHtml= '<div align="center">' + options.header + '</div>'; 
      $(this).find("#tp-container").prepend(headerHtml); 
     } 
     $(this).addClass("ui-hidden-on-load").addClass("ui-tablepicker"); 
     $(this).addClass("ui-widget").addClass("ui-widget-content"); 
     $(this).addClass("ui-helper-clearfix").addClass("ui-corner-all"); 
     $(this).addClass("ui-helper-hidden-accessible"); 
     $(this).css("position", options.position); 

     if(!$.isEmptyObject(options.top)){ 
      $(this).css("top", options.top); 
     }else{ 
      var offset= $("#"+options.forinput).offset(); 
      $(this).css("top", offset.top); 
     } 

     if(!$.isEmptyObject(options.left)){ 
      $(this).css("left", options.left); 
     }else{ 
      var offset= $("#"+options.forinput).offset(); 
      $(this).css("left", offset.left); 
     } 
     $(this).css("z-index", "1"); 

     tbl= _setUpDataTable(tbl); 
     _performBindings(tbl, this); 


    }); 
    function _setUpDataTable(tbl){ 
     options = $.extend($.fn.tablePicker.defaults, options); 
     tbl= $(tbl).dataTable({ 
      "aoColumns" : options.aoColumns, 
      "bFilter" : options.bFilter, 
      "bPaginate" : options.bPaginate, 
      "bLengthChange" : options.bLengthChange, 
      "bAutoWidth" : options.bAutoWidth, 
      "sScrollY" : options.sScrollY, 
      "sPaginationType" : options.sPaginationType, 
      "bProcessing" : options.bProcessing, 
      "sAjaxSource" : options.sAjaxSource 
     }); 
     return tbl; 

    }; 
    function _performBindings(dataTable, picker){ 
     options = $.extend($.fn.tablePicker.defaults, options); 
     var tableName= options.tblName; 
     var inputToBind=$('#'+options.forinput); 
     // Bind hide list to all inputs 
     var tableFilter= tableName + '_filter'; 
     $('input, select').live('focus', function(event) { 
      if ($(event.target).parent().attr('id') != tableFilter) { 
       _hideList(picker); 
      } 
     }); 
     // Don't bind hide list to the field we want to show the list for 
     $(inputToBind).unbind('focus'); 
     // Bind to the field to show the list on. 
     $(inputToBind).focus(function() { 
      if (!$(picker).is(':visible')) { 
       $(picker).slideToggle(); 
      } 
     }); 
     // Bindings for mouse over on table 
     var tbl= $('#'+tableName); 
     $(tbl).find('tbody tr').live('mouseover mouseout', function(event) { 
      if (event.type == 'mouseover') { 
       $(this).addClass('hover'); 
      } else { 
       $(this).removeClass('hover'); 
      } 
     }); 
     // handle the click event of the table 
     $(tbl).find('tbody tr').live('click', function(event, ui) { 
      var aData = dataTable.fnGetData(this); 
      if (aData != null) { 
       $.isFunction(options.onClick) && options.onClick.call(this, aData); 
      } 
      _hideList(picker); 
     }); 

    } 
    function _hideList(picker) { 
     if ($(picker).is(':visible')) { 
      $(picker).slideToggle(); 
     } 
    } 

    } 
    $.fn.tablePicker.defaults = { 
    header  : null, 
    container : '<div id="tp-container" class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all"/>', 
    position : 'absolute', 
    top   : null, 
    left  : null, 
    tblName  : 'list_table', 
    forinput : 'input', 
    aoColumns : [ {"bVisible" : false}, null, null, null, null, {"bVisible" : false}], 
    bFilter  : true, 
    bPaginate : true, 
    bLengthChange : false, 
    bAutoWidth : true, 
    sScrollY : "200px", 
    sPaginationType : "full_numbers", 
    bProcessing : true, 
    sAjaxSource : './list-data.do', 
    onClick  : null 

    }; 
})(jQuery); 

---

jquery.tablepicker.css

.ui-hidden-on-load{display: none;} 
.ui-tablepicker { width: 35em; padding: .25em .25em 0; z-index: 1} 
.ui-tablepicker .ui-tablepicker-header { position:relative; padding:.2em 0; } 
.ui-widget-header div{ width: 100% } 

---

Utilisation: Cela dépend fortement de JQuery et les DataTables. net plug in.

... 
<link href="/pw/css/jquery.tablepicker.css" rel="stylesheet" type="text/css" media="screen"> 
<script type="text/javascript" src="/pw/js/jquery.tablepicker.js"></script> 
<script type="text/javascript" charset="utf-8"> 
    $(document).ready(function() { 
     $("#partListPicker").tablePicker({ 
       tblName: 'part_table', 
       forinput: "part", 
       onClick: function(data){ 
        var partNum = data[1]; 
        $("#part").val(partNum); 
       }, 
       sAjaxSource : './partlist-data.do?id=50150', 
       aoColumns : [ {"bVisible" : false}, null, null, null], 
     }); 

    }); 
</script> 
<s:form action="... theme="simple"> 
... 
<table width="100%" align="center" border="0"> 
    <tr> 
     <td align="right"> 
      <label for="part" class="required">Part:</label> 
     </td> 
     <td align="left"> 
      <input id="part" class="staticBody" maxlength="240" size="50"> 
     </td> 
    </tr> 
</table> 
</s:form> 
<!-- Data table for the pick list --> 
<div id="partListPicker"> 
    <table cellpadding="0" cellspacing="0" border="0" class="display" id="part_table"> 
     <thead> 
      <tr> 
       <th>Id</th> 
       <th>Part #</th> 
       <th>Description</th> 
       <th>Technology Level</th> 
      </tr> 
     </thead> 
     <tbody> 
     </tbody> 
    </table> 
</div> 

Answer 2

Le commentaire de Ryley est 100% correct. Utiliser un plugin pour cela rend votre vie plus difficile, pas plus facile.

Donc ma recommandation ne pourrait être plus simple: Utilisez un select.

Answer 3

im en utilisant jqueryUI boîte de dialogue + jQGrid.

avec que vous aurez sélecteur de table de données avec la recherche et barre d'outils téléavertisseur