Question

I’m looking for a recommendation for a JQuery plug-in that looks like and will behave like the JQuery datepicker, but allow me to pick a row from a table. A table pick list of sorts. I have to believe something like this is out there, but I can’t seem to find anything like it. I’m not looking for an autocompleter — more like when the JSP form field gets focus, a pick list appears that is populated by a table…

Any/all replies appreciated.

Answer 1

I rolled my own picker for this and made a plug-in for it. It’s my first whack at making a jQuery plugin, so any advice or feedback is welcomed. The code is highly dependent on Jquery 1.4.2, JQuery UI for CSS formatting of the pop-up and the DataTables plug-in for table formatting and pagination.

---

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

---

To use: This is highly dependent on JQuery and the 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>