我正在尋找一個JQuery插件的建議,看起來像和將行爲像JQuery datepicker,但允許我從表中選擇一行。表格選擇列表。我必須相信像這樣的東西在那裏,但我似乎無法找到像這樣的東西。我不是在尋找一個自動完成器 - 更像是當JSP表單字段獲得焦點時,出現一個選擇列表,它由一個表填充...針對Tablepicker的JQuery插件的推薦?
任何/所有回覆讚賞。
我正在尋找一個JQuery插件的建議,看起來像和將行爲像JQuery datepicker,但允許我從表中選擇一行。表格選擇列表。我必須相信像這樣的東西在那裏,但我似乎無法找到像這樣的東西。我不是在尋找一個自動完成器 - 更像是當JSP表單字段獲得焦點時,出現一個選擇列表,它由一個表填充...針對Tablepicker的JQuery插件的推薦?
任何/所有回覆讚賞。
我推出了自己的選擇器,併爲它製作了一個插件。這是我第一次製作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>
Ryley的評論是100%正確的。使用這個插件會讓你的生活變得更難,而不是更容易。
所以我的建議不能再簡單:使用select。
不是很有幫助,同樣,選擇對於日期選擇器也不太有用。該列表中有> 800個項目。此外,該列表包含部分#的外觀非常相似。用戶使用其他屬性來縮小他們的選擇,如型號年份和製造商。 – Griff 2010-09-13 13:57:17
您是否希望他們按照列表本身的模型年進行過濾,或者在表格選取器出現之前發生該類型的過濾? – Ryley 2010-09-13 15:06:01
用戶可以輸入MY/Manufacturer縮小列表,然後從表中選擇它。我正在考慮使用DataTables插件(http://www.datatables.net/)來顯示錶格,但需要在jquery ui面板中彈出UI部分的幫助。另外,我想打包它,以便我可以在其他區域重複使用相同的概念 - 可以將彈出窗口綁定到輸入字段,就像日期選擇器完成一樣。 – Griff 2010-09-13 16:07:41
即時通訊使用jqueryUI對話框+ jQGrid。
與你有數據表選擇器完成與搜索工具欄和尋呼機
這聽起來極像是一個選擇...什麼不能在選擇你想要做的呢?大多數現代瀏覽器甚至可以讓你選擇相當多的選擇。 – Ryley 2010-09-10 22:50:02