对JQuery插件的推荐？

Question

我正在寻找一个看起来和行为都像JQuery日期选择器的JQuery插件的推荐，但允许我从表中选择一行。排序的表选取列表。我不得不相信这样的东西是存在的，但我似乎找不到这样的东西。我不是在寻找自动完成程序--更像是当JSP表单字段获得焦点时，出现一个由表填充的选择列表……

感谢任何/所有的回复。

Answer 1

我为此使用了自己的选择器，并为其制作了一个插件。这是我制作jQuery插件的第一次尝试，所以欢迎任何建议或反馈。代码高度依赖于jQuery1.4.2、用于弹出窗口的Jquery格式化的CSS和用于表格格式化和分页的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和DataTables.net插件。

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

我正在使用jqueryUI对话框+ jQGrid。

这样你就有了一个完整的数据表选择器和搜索工具条和分页工具

Answer 3

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

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