[英]Updating cells in table using jEditable, jQuery and DataTables
[英]Using tabbing in jeditable fields in datatables
現在我有一個數據表,有些字段是可編輯的,有些不是。 我有以下代碼(摘自表中可編輯字段之間的代碼):
$('#table .select').bind('keydown', function(evt) {
if(evt.keyCode==9) {
console.log("next");
var nextBox='';
var currentBoxIndex=$("#table .select").index(this);
console.log("currentBoxIndex",currentBoxIndex);
if (currentBoxIndex == ($("#table .select").length-1)) {
nextBox=$("#table .select:first"); //last box, go to first
console.log("nextBox", nextBox);
} else {
nextBox=$("#table .select").eq(currentBoxIndex+1); //Next box in line
console.log("nextBox", nextBox);
}
$(this).find("#table .select").blur();
$(nextBox).click(); //Go to assigned next box
return false; //Suppress normal tab
};
});
此選項非常適合跳到每個可編輯字段! 除了一個問題:我需要能夠跳至該字段,從可編輯字段的下拉列表中選擇一個值,然后能夠切換。 現在,如果我不更改字段中的值,則可以逐個選項卡瀏覽。 如果更改值,則制表符將停止,並且我必須重新單擊下一個字段。 救命?
我正在使用:
數據表-http: //datatables.net/
引導程序
可編輯的jQuery
我找到了解決方案。
$('#table.select').bind('keydown', function(evt) {
if(evt.keyCode === 9) {
console.log("next");
var nextBox = '';
var currentBoxIndex = $("#table.select").index(this);
console.log("currentBoxIndex",currentBoxIndex);
var showDropdown = function (element) {
var event;
event = document.createEvent('MouseEvents');
event.initMouseEvent('mousedown', true, true, window);
element.dispatchEvent(event);
};
if (currentBoxIndex === ($("#table.select").length-1)) {
nextBox = $("#table.select:first"); //last box, go to first
showDropdown($(nextBox).get( 0 ));
} else {
nextBox = $("#table.select").eq(currentBoxIndex+1); //Next box in line
console.log("nextBox", nextBox);
showDropdown($(nextBox).get( 0 ));
}
$(this).find("#table.select").blur();
$(nextBox).click(); //Go to assigned next box
return false; //Suppress normal tab
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.