Tabulator 4.2 - 如何使用多元素单元格进行编辑
Tabulator 4.2 - how to use a multi element cell for editing
我正在尝试编辑带有输入和下拉菜单的单元格。
在这种情况下,目标是编辑磁盘大小。
因此我需要将 , editor:"input", editor:true, validator:["min:0", "max:999", "numeric"]}
与 , editor:"select", editorParams:{"MB":"MB", "TB":"TB", "GB":"GB"}
结合起来
最终结果大约是 146GB。
第一次尝试:
因为这看起来像一个自定义编辑器,所以我这样写:
var CapacityEditor = function(cell, onRendered, success, cancel, editorParams){
var capacity = document.createElement("div");
capacity.style.width = "100%";
var size = document.createElement("input");
size.setAttribute("type", "text");
size.style.width = "50px";
size.style.textAlign = "right";
onRendered(function(){
size.focus();
//size.style.css = "100%";
});
capacity.append(size);
var multiplier = document.createElement("select");
multiplier.style.width = "45px";
multiplier.append(new Option("MB","MB",true,true));
multiplier.append(new Option("GB","GB"));
multiplier.append(new Option("TB","TB"));
capacity.append(multiplier);
var multi = "MB";
function successFunc(){
success(size.value+multi);
}
function setmultiFunc() {
multi = multiplier.options[multiplier.selectedIndex].text;
successFunc();
}
size.addEventListener("change", successFunc);
size.addEventListener("blur", successFunc);
multiplier.addEventListener("change", successFunc);
multiplier.addEventListener("blur", successFunc);
return capacity;
}
与:
{title:"Capacity", field:"Size", align:"center", width:95, editor:CapacityEditor, sorter:SizeSorter, sortable: true},
因此,在这一点上,存在 'a few' 个问题。
- 我不知道 success() 应该做什么
- 我正在返回 div 希望内容会填充单元格
- 每当我输入一个值并进行选择时,它根本不会被保存;可能是因为我首先要返回 div
第二次尝试:由于编辑不起作用,也许我可以改用单元格点击事件...
cell.getElement()
确实按预期为单元格提供了 DIV 内容,但没有 cell.setElement()
之类的东西,对吗?
我可以创建自己的 div,就像第一次尝试一样,然后使用 cell.setValue()
来设置值,但是如果我不能首先显示我的 div,那效果不太好。
尝试了 cell.getElement().innerHTML = "<div>...</div>"
但没有成功(太简单了)
第三次尝试:好吧,让我们跳出框框(字面意思)
换句话说,让我们创建一个非常简单的模式,将其显示在现有单元格的顶部,然后再次使用 cell.setValue()
来更新值。
问题是:如何获得单元格的位置?
使用内置编辑器,editor:"select"
将单元格的 div 替换为只读输入,并在文档正文中使用多个 div 创建一个 div,然后将其正确定位在单元格下方,使其看起来像一个下拉菜单:
<input type="text" readonly="" style="padding: 4px; width: 100%; box-sizing: border-box; height: 100%;">
<div class="tabulator-edit-select-list" style="min-width: 80px; top: 348px; left: 671px;"><div class="tabulator-edit-select-list-item" tabindex="0">10K</div><div class="tabulator-edit-select-list-item" tabindex="0">15K</div><div class="tabulator-edit-select-list-item" tabindex="0">7.2K</div><div class="tabulator-edit-select-list-item active" tabindex="0">na</div></div>
注意 top
和 left
样式属性。
Oli 能够做到,所以必须有办法,对吧?
任何帮助、建议、修复将不胜感激。
好的,所以,如果有人感兴趣,我可以使用 meouw ():
在这个论坛上找到的函数来获取单元格的位置
function getOffset( el ) {
var _x = 0;
var _y = 0;
while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
_x += el.offsetLeft - el.scrollLeft;
_y += el.offsetTop - el.scrollTop;
el = el.offsetParent;
}
return { top: _y, left: _x };
}
利用单元格的顶部和左侧位置,我可以放置 div 来编辑我的字段:
var globalCellClick = function(e, cell){
var capacity = document.createElement("div");
capacity.style.position = "absolute";
capacity.style.left = getOffset(cell.getElement()).left + "px";
capacity.style.top = getOffset(cell.getElement()).top + "px";
capacity.setAttribute("name", "capacity-edit");
var size = document.createElement("input");
size.setAttribute("type", "", "text");
size.style.width = "47px";
size.style.height = "31px";
size.style.textAlign = "right";
capacity.append(size);
var multiplier = document.createElement("select");
multiplier.style.width = "47px";
multiplier.style.height = "31px";
multiplier.append(new Option("MB","MB",true,true));
multiplier.append(new Option("GB","GB"));
multiplier.append(new Option("TB","TB"));
capacity.append(multiplier);
document.body.appendChild(capacity);
function updateCell(){
var multi = multiplier.options[multiplier.selectedIndex].text;
cell.setValue(size.value+multi);
}
size.focus();
size.addEventListener("change", updateCell);
size.addEventListener("blur", updateCell);
multiplier.addEventListener("change", updateCell);
multiplier.addEventListener("blur", updateCell);
};
与:
{title:"Capacity", field:"Size", align:"center", width:95, cellClick:globalCellClick, sorter:SizeSorter, sortable: true},
我可以根据需要编辑其余字段,然后使用保存按钮保存修改并销毁我创建的所有 div 编辑:
$("#tabulator-controls button[name=save-data]").on("click", function(){
$("div[name=capacity-edit]").remove();
// update the database
});
可能有 easier/cleaner 方法来完成它,但效果非常好。
我正在尝试编辑带有输入和下拉菜单的单元格。 在这种情况下,目标是编辑磁盘大小。
因此我需要将 , editor:"input", editor:true, validator:["min:0", "max:999", "numeric"]}
与 , editor:"select", editorParams:{"MB":"MB", "TB":"TB", "GB":"GB"}
最终结果大约是 146GB。
第一次尝试: 因为这看起来像一个自定义编辑器,所以我这样写:
var CapacityEditor = function(cell, onRendered, success, cancel, editorParams){
var capacity = document.createElement("div");
capacity.style.width = "100%";
var size = document.createElement("input");
size.setAttribute("type", "text");
size.style.width = "50px";
size.style.textAlign = "right";
onRendered(function(){
size.focus();
//size.style.css = "100%";
});
capacity.append(size);
var multiplier = document.createElement("select");
multiplier.style.width = "45px";
multiplier.append(new Option("MB","MB",true,true));
multiplier.append(new Option("GB","GB"));
multiplier.append(new Option("TB","TB"));
capacity.append(multiplier);
var multi = "MB";
function successFunc(){
success(size.value+multi);
}
function setmultiFunc() {
multi = multiplier.options[multiplier.selectedIndex].text;
successFunc();
}
size.addEventListener("change", successFunc);
size.addEventListener("blur", successFunc);
multiplier.addEventListener("change", successFunc);
multiplier.addEventListener("blur", successFunc);
return capacity;
}
与:
{title:"Capacity", field:"Size", align:"center", width:95, editor:CapacityEditor, sorter:SizeSorter, sortable: true},
因此,在这一点上,存在 'a few' 个问题。 - 我不知道 success() 应该做什么 - 我正在返回 div 希望内容会填充单元格 - 每当我输入一个值并进行选择时,它根本不会被保存;可能是因为我首先要返回 div
第二次尝试:由于编辑不起作用,也许我可以改用单元格点击事件...
cell.getElement()
确实按预期为单元格提供了 DIV 内容,但没有 cell.setElement()
之类的东西,对吗?
我可以创建自己的 div,就像第一次尝试一样,然后使用 cell.setValue()
来设置值,但是如果我不能首先显示我的 div,那效果不太好。
尝试了 cell.getElement().innerHTML = "<div>...</div>"
但没有成功(太简单了)
第三次尝试:好吧,让我们跳出框框(字面意思)
换句话说,让我们创建一个非常简单的模式,将其显示在现有单元格的顶部,然后再次使用 cell.setValue()
来更新值。
问题是:如何获得单元格的位置?
使用内置编辑器,editor:"select"
将单元格的 div 替换为只读输入,并在文档正文中使用多个 div 创建一个 div,然后将其正确定位在单元格下方,使其看起来像一个下拉菜单:
<input type="text" readonly="" style="padding: 4px; width: 100%; box-sizing: border-box; height: 100%;">
<div class="tabulator-edit-select-list" style="min-width: 80px; top: 348px; left: 671px;"><div class="tabulator-edit-select-list-item" tabindex="0">10K</div><div class="tabulator-edit-select-list-item" tabindex="0">15K</div><div class="tabulator-edit-select-list-item" tabindex="0">7.2K</div><div class="tabulator-edit-select-list-item active" tabindex="0">na</div></div>
注意 top
和 left
样式属性。
Oli 能够做到,所以必须有办法,对吧?
任何帮助、建议、修复将不胜感激。
好的,所以,如果有人感兴趣,我可以使用 meouw ():
在这个论坛上找到的函数来获取单元格的位置function getOffset( el ) {
var _x = 0;
var _y = 0;
while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
_x += el.offsetLeft - el.scrollLeft;
_y += el.offsetTop - el.scrollTop;
el = el.offsetParent;
}
return { top: _y, left: _x };
}
利用单元格的顶部和左侧位置,我可以放置 div 来编辑我的字段:
var globalCellClick = function(e, cell){
var capacity = document.createElement("div");
capacity.style.position = "absolute";
capacity.style.left = getOffset(cell.getElement()).left + "px";
capacity.style.top = getOffset(cell.getElement()).top + "px";
capacity.setAttribute("name", "capacity-edit");
var size = document.createElement("input");
size.setAttribute("type", "", "text");
size.style.width = "47px";
size.style.height = "31px";
size.style.textAlign = "right";
capacity.append(size);
var multiplier = document.createElement("select");
multiplier.style.width = "47px";
multiplier.style.height = "31px";
multiplier.append(new Option("MB","MB",true,true));
multiplier.append(new Option("GB","GB"));
multiplier.append(new Option("TB","TB"));
capacity.append(multiplier);
document.body.appendChild(capacity);
function updateCell(){
var multi = multiplier.options[multiplier.selectedIndex].text;
cell.setValue(size.value+multi);
}
size.focus();
size.addEventListener("change", updateCell);
size.addEventListener("blur", updateCell);
multiplier.addEventListener("change", updateCell);
multiplier.addEventListener("blur", updateCell);
};
与:
{title:"Capacity", field:"Size", align:"center", width:95, cellClick:globalCellClick, sorter:SizeSorter, sortable: true},
我可以根据需要编辑其余字段,然后使用保存按钮保存修改并销毁我创建的所有 div 编辑:
$("#tabulator-controls button[name=save-data]").on("click", function(){
$("div[name=capacity-edit]").remove();
// update the database
});
可能有 easier/cleaner 方法来完成它,但效果非常好。