Jquery如何在事件数据表生成的td行中使用它

我正在尝试添加一个函数调用"onblur"；其中我可以在TD小区中键入一个新值。我需要的是函数传递给另一个Jquery脚本的新值。我的问题是数据表看不到This值，因为代码似乎写得不正确。我做错了什么？到目前为止，我找不到任何对我有帮助的东西。。

这是有效的php版本，这是我试图在Datatable表中实现的。

<td
contenteditable="true"
data-old_value="name"
onBlur="saveInlineEdit(this,'name','23')"
onClick="highlightEdit(this);"
>
name
</td>

混凝土。如何使用新类型化的值作为"；这个"；在下面的行中，或者我如何实现在jQueryDataTable的HTML表中工作的代码？

var options = {
data: 'my_data',
render: function ( data, type, row, meta ) {
return '<div onBlur="saveInlineEdit('this.innerHTML,'name', + row.data_id + ') " onClick="highlightEdit(this);"><font color='+row.cat_color+'>'+data+'</font></div>';
}
}

DataTables脚本中添加属性的部分：

createdRow: function (row, data, dataIndex) {
$('td:eq(4)',row).attr('contenteditable',true);
$('td:eq(4)',row).attr('data-old_value', data.bullets);
}

我想使用以下脚本来发布saveInlineEdit函数的值

function highlightEdit(editableObj) {
$(editableObj).css("background","");
} 
function saveInlineEdit(editableObj,column,id) {
// no change change made then return false
if($(editableObj).attr('data-old_value') === editableObj.innerHTML) {
return false;
}
// send ajax to update value
$(editableObj).css("background","#FFF url(loader.gif) no-repeat right");
$.ajax({
url: "update_inlinedata.php",
cache: false,
data:'column='+column+'&value='+editableObj.innerHTML+'&id='+id,
success: function(response)  {
console.log(response);
// set updated value as old value
$(editableObj).attr('data-old_value',editableObj.innerHTML);
$(editableObj).css("background","");            
}
});
}

您的问题有几个不同的部分-下面介绍了捕获更改的单元格数据，并确保DataTable反映用户在DOM中所做的编辑。

(我没有处理突出显示，但我认为你也可以扩展下面的方法来涵盖这一点，因为它处理的是相同的数据。(

我认为在columnDef中使用createdCell选项可能比使用createdRow更容易，因为您可以直接访问列的值：

columnDefs: [ {
targets: 4,
createdCell: function (td, cellData, rowData, rowIdx, colIdx) {
// 'td' is the DOM node, not the DataTable cell
td.setAttribute('contenteditable', true);
td.setAttribute('spellcheck', false);
td.setAttribute('data-old_value', cellData);
td.addEventListener("focus", function(e) {
original = e.target.textContent;
})
td.addEventListener("blur", function(e) {
if (original !== e.target.textContent) {
console.log( 'row ID: ', rowData.id );
console.log( 'new DOM value: ', td.innerHTML);
// 'cell' is the DataTable cell, not the DOM node:
let cell = $('#example').DataTable().cell(rowIdx, colIdx);
console.log( 'before cell update: ', cell.data() );
cell.data(td.innerHTML);
console.log( 'after cell update: ', cell.data() );
}
})
}
} ]

确认：上面的方法是从这个答案中显示的方法修改而来的。

这里有一个独立的演示：

var my_data = [
{
"id": "123",
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$320,800",
"bullets": "lorem ipsum",
"office": "Edinburgh",
"extn": "5421"
},
{
"id": "456",
"name": "Donna Snider",
"position": "Customer Support",
"salary": "$112,000",
"bullets": "dolor sit amet",
"office": "New York",
"extn": "4226"
}
];
$(document).ready(function() {
var table = $('#example').DataTable( {
data: my_data,
columns: [
{ title: "ID", data: "id" },
{ title: "Name", data: "name" },
{ title: "Office", data: "office" },
{ title: "Position", data: "position" },
{ title: "Bullets", data: "bullets" },
{ title: "Extn.", data: "extn" },
{ title: "Salary", data: "salary" }
],
columnDefs: [ {
targets: 4,
createdCell: function (td, cellData, rowData, rowIdx, colIdx) {
// 'td' is the DOM node, not the DataTable cell
td.setAttribute('contenteditable', true);
td.setAttribute('spellcheck', false);
td.setAttribute('data-old_value', cellData);
td.addEventListener("focus", function(e) {
original = e.target.textContent;
})
td.addEventListener("blur", function(e) {
if (original !== e.target.textContent) {
console.log( 'row ID: ', rowData.id );
console.log( 'new DOM value: ', td.innerHTML);
// 'cell' is the DataTable cell, not the DOM node:
let cell = $('#example').DataTable().cell(rowIdx, colIdx);
console.log( 'before cell update: ', cell.data() );
cell.data(td.innerHTML);
console.log( 'after cell update: ', cell.data() );
}
})
}
} ]

} ); 
} );

<head>
<meta charset="UTF-8">
<title>Demo</title>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">
</head>
<body>
<div style="margin: 20px;">
<table id="example" class="display dataTable cell-border" style="width:100%">
</table>
</div>
</body>

更新

我没有一个服务器可以处理您的ajax调用，所以我无法测试"；成功；回答话虽如此，以下是我的注意事项：

对于saveInlineEdit功能，您将不再需要以下内容：

if($(editableObj).attr('data-old_value') === editableObj.innerHTML) {
return false;
}

这是因为您已经在事件侦听器中执行了该检查：

if (original !== e.target.textContent) { ... }

此外，您已经确定了单元格的新值，所以您还可以直接将其传递给函数：

saveInlineEdit(td, 'bullets', rowData.id, cell.data());

上面的行需要放在上面显示的事件监听器中：

td.addEventListener("blur", function(e) {
if (original !== e.target.textContent) {
console.log( 'row ', rowIdx, ' col ', colIdx );
console.log( 'row ID: ', rowData.id );
console.log( 'new DOM value: ', td.innerHTML);
// 'cell' is the DataTable cell, not the DOM node:
let cell = $('#example').DataTable().cell(rowIdx, colIdx);
console.log( 'before cell update: ', cell.data() );
cell.data(td.innerHTML);
console.log( 'after cell update: ', cell.data() );
let columnName = $('#example').DataTable().settings();
console.log( 'column name: ', columnName );
saveInlineEdit(td, 'bullets', rowData.id, cell.data()); // NEW LINE HERE
}
})

因此，您的saveInlineEdit功能会发生变化，以反映以上几点：

我删除了不必要的if条件。

我添加了一个额外的参数newValue，因为我们没有；我不需要一直从单元格中检索它(我们已经这样做了(。

function saveInlineEdit(editableObj, column, id, newValue) {
console.log( 'in ajax call' );
console.log(editableObj);
console.log(column);
console.log(id);
console.log(newValue);
// send ajax to update value
$(editableObj).css("background","#FFF url(loader.gif) no-repeat right");
$.ajax({
url: "update_inlinedata.php",
cache: false,
data:'column=' + column + '&value=' + newValue + '&id=' + id,
success: function(response)  {
console.log(response);
// set updated value as old value
$(editableObj).attr('data-old_value', newValue);
$(editableObj).css("background","");            
}
});
}

我将日志记录语句放入函数中，这样您就可以看到参数是什么。

因此，例如，ajax调用提交的查询参数数据将是：

column=bullet&value=lorem%20ipsum%20editedbyme&id=123

再说一遍，我无法测试这个ajax调用——所以请记住，我想我在某个地方犯了一个愚蠢的错误。

这留下了2个额外的点，它们不在问题的范围内，但需要考虑：

问题假设只有列索引4是可编辑的。如果希望行中的每个单元格都是可编辑的，则需要增强此功能以使用相关的列名。一个很好的方法是使用DataTablesname选项：
{标题："子弹"，数据："子弹"，名称："弹头"}，

在调用saveInlineEdit函数之前，模糊事件处理程序可以检索并使用此值：

let columnName = $('#example').DataTable().settings()[0].aoColumns[colIdx].sName;

然后你的电话变成：

saveInlineEdit(td, columnName, rowData.id, cell.data());

当前代码在此处更新DataTable中的数据：
cell.data(td.innerHTML(；

这种情况发生在ajax调用返回之前。如果调用失败，则数据表中有更新的数据，但后端数据库中没有。因此，您可能需要移动该逻辑，以确保只有在ajax调用成功的情况下才更新DataTable数据。

相关内容

最新更新

热门标签：