gpt4 book ai didi

jquery - 在 jquery-datatables-editable 插件中添加行

转载 作者:行者123 更新时间:2023-12-01 08:12:22 25 4
gpt4 key购买 nike

我正在使用插件this用于添加新记录。在此示例中,单击“添加”按钮时,将打开一个包含表中字段的子表单。在子表单中单击“确定”后,会在表中创建一个新的可编辑行,其中包含子表单中提到的值。但我需要在不打开子窗体的情况下添加可编辑行。用户必须在表中输入值。此代码用于从“jquery.dataTables.editable.js”文件中的子表单添加一行。

///Event handler called when a new row is added and response is returned from server
function _fnOnRowAdded(data) {
properties.fnEndProcessingMode();

if (properties.fnOnNewRowPosted(data)) {

var oSettings = oTable.fnSettings();
var iColumnCount = oSettings.aoColumns.length;
var values = new Array();

$("input:text[rel],input:radio[rel][checked],input:hidden[rel],select[rel],textarea[rel],span.datafield[rel]", oAddNewRowForm).each(function () {
var rel = $(this).attr("rel");
var sCellValue = "";
if (rel >= iColumnCount)
properties.fnShowError("In the add form is placed input element with the name '" + $(this).attr("name") + "' with the 'rel' attribute that must be less than a column count - " + iColumnCount, "add");
else {
if (this.nodeName.toLowerCase() == "select" || this.tagName.toLowerCase() == "select")
sCellValue = $("option:selected", this).text();
else if (this.nodeName.toLowerCase() == "span" || this.tagName.toLowerCase() == "span")
sCellValue = $(this).html();
else
sCellValue = this.value;

sCellValue = sCellValue.replace(properties.sIDToken, data);
values[rel] = sCellValue;
}
});

//Add values from the form into the table
var rtn = oTable.fnAddData(values);
var oTRAdded = oTable.fnGetNodes(rtn);
//Apply editable plugin on the cells of the table
_fnApplyEditable(oTRAdded);
//add id returned by server page as an TR id attribute
properties.fnSetRowID($(oTRAdded), data);
//Close the dialog
oAddNewRowForm.dialog('close');
$(oAddNewRowForm)[0].reset();
$(".error", $(oAddNewRowForm)).html("");

_fnSetDisplayStart();
properties.fnOnAdded("success");
}
}

我编辑了上面的代码以添加一行而不打开子窗体。但添加的行不可编辑。我应该做哪些更改才能使其可编辑?

最佳答案

使用 fnAddData 添加行,然后使该行可编辑。这是 example它展示了如何使行可编辑。

未经测试的添加行代码(取自 jquery 数据表文档)

var giCount = 2;

$(document).ready(function() {
$('#example').dataTable();
} );

function fnClickAddRow() {
$('#example').dataTable().fnAddData( [
giCount+".1",
giCount+".2",
giCount+".3",
giCount+".4" ]
);

giCount++;
}

编辑2:这是fiddle

var oTable = $("table").dataTable();

$("a").click(function() {
$(oTable).dataTable().fnAddData( ["test"] );
});

$('td', oTable.fnGetNodes()).editable(function(v, s) {
console.log(v);
return (v);
});

请注意,您将需要 jEditable为此。

干杯!

关于jquery - 在 jquery-datatables-editable 插件中添加行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12776662/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com