针对Tablepicker的JQuery插件的推荐？

Question

我正在寻找一个JQuery插件的建议，看起来像和将行为像JQuery datepicker，但允许我从表中选择一行。表格选择列表。我必须相信像这样的东西在那里，但我似乎无法找到像这样的东西。我不是在寻找一个自动完成器 - 更像是当JSP表单字段获得焦点时，出现一个选择列表，它由一个表填充...

任何/所有回复赞赏。

Answer 1

我推出了自己的选择器，并为它制作了一个插件。这是我第一次制作jQuery插件，因此欢迎任何建议或反馈。该代码高度依赖于Jquery 1.4.2，用于弹出CSS格式的JQuery UI和用于表格格式和分页的DataTables插件。

---

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

---

要使用：这是高度依赖于JQuery的和数据表。网络插入。

... 
<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

Ryley的评论是100％正确的。使用这个插件会让你的生活变得更难，而不是更容易。

所以我的建议不能再简单：使用select。

Answer 3

即时通讯使用jqueryUI对话框+ jQGrid。

与你有数据表选择器完成与搜索工具栏和寻呼机