Я сделал свой собственный сборщик для этого и сделал для него плагин. Это мой первый удар по созданию плагина jQuery, поэтому любые советы или отзывы приветствуются. Код сильно зависит от JQuery 1.4.2, JQuery UI для форматирования 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 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>
Это звучит ужасно много, как отборные ... То, что не может быть сделано в отборном, что вы хотите сделать? Большинство современных браузеров даже позволяют вам немного подбирать выбор. – Ryley