我怎样才能 "refresh" 或 "update" 数据表 object/widget 以便它识别新的单元格值？
How can I "refresh" or "update" the datatable object/widget so that it recognizes the new cell values?
场景：
新行添加到 table 并将单元格作为空输入字段公开给用户（即，"inline" 编辑）- 看起来像这样...
即
然后用户在输入字段中输入数据 - 看起来像这样...
即
当用户单击 "Done" 按钮时，我将输入字段转换为纯文本，以反映输入的值 - 如下所示...
即
注意 - 在视觉上 - table 出现 "updated"... - 但是，当我使用 "row().data()" 函数显示行内容时，没有与细胞。
所以，我可以看到我没有与 "datatables" 对象沟通该行的单元格值已更改。 -但是，很明显 table/html 确实包含新的单元格值。
问题：如何 "refresh" 或 "update" 数据 table object/widget 以便识别新值？
（注意：我想使用新的 API 来完成此操作 - 但是，文档不够清晰，我无法理解如何操作）
感谢您的帮助！
下面是完整的jquery/javascript - 如果您认为它可能有帮助...
var jq = jQuery.noConflict();
var $contextPath;
jq(document).ready(function ()
{
var jq = jQuery.noConflict();
$contextPath = jq("#contextPath").val();
jq('table').click(function(e) {
e.preventDefault();
//...collect the clicked "tag name" and use it to determine what to do...
var tagName = e.target.tagName;
if (tagName === "BUTTON")
{
if (jq(e.target).html()=== 'Edit')
{
//...get list of previous "sibling" td's...
var editCellList = jq(e.target).parent().prevAll();
//...iterate over list and replace plain html text with "input" tag - use plain html text as initial value...
editCellList.each(function(e)
{
jq(this).html("<input type='text' value='" + jq(this).html() + "' />");
});
//...change/toggle the button title from "Edit" to "Save"...
jq(e.target).html('Done');
}
else
{
//...change/toggle the button title from "Save" to "Edit"...
jq(e.target).html('Edit');
//...get list of previous "sibling" td's...
var saveCellList = jq(e.target).parent().prevAll();
//...iterate over list and convert "input" tag value to plain html text...
saveCellList.each(function(e)
{
jq(this).html(jq(this).find(">:first-child").val());
});
jq(this).draw();
}
}
});
jq("#submitForm").click(function () {
alert(JSON.stringify(jq("#page0Form").serialize()));
jq.post("page0/submitForm", jq("#page0Form").serialize());
});
//...just hardcoded this button as a test to "see" the contents of the new row..
jq("#gridDataTest").click(function () {
var d = page0grid.row(2).data();
alert(JSON.stringify(d));
});
var page0grid = jq('#page0grid').DataTable({
"ajax": $contextPath + "/page0/testGridList",
"columns": [
{"title": "ID", "data": "id", "visible": false },
{"title": "Field A", "data": "fieldAStrg" },
{"title": "Field B", "data": "fieldBStrg" }
],
"columnDefs": [{
"targets": 3,
"data": null,
"defaultContent": "<button class='edit'>Edit</button>"
}],
"info": false,
"searching": false,
"bPaginate": false,
"scrollY": 600,
"bLengthChange": false,
"bScrollCollapse": true,
"autoWidth": true,
"order": [[ 0, 'desc' ]],
"bSort": false
});
jq('#addNew').click(function () {
var buttonTitleArray = jq('#page0grid tbody > tr > td > button').map(function(){
return jq(this).html();
}).get();
if(jq.inArray("Done", buttonTitleArray )===-1)
{
var pos = jq('#page0grid tbody > tr').length;
var rowNode = page0grid.row.add(
{
"id":"",
"fieldAStrg":"",
"fieldBStrg":""
}, pos).draw().node();
jq(rowNode).find("button").trigger("click");
}
});
});
下面是 JSP 文件，如果您认为它会有所帮助（显然不使用任何标签库）...
<%@taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<%@taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<form id="page0Form" >
<div class='panel panel-primary'>
<div class='panel-heading'>
<h6 class='panel-title'>page0grid</h6>
</div>
<div class='panel-body table-responsive' style='padding:0;'>
<table class="table table-striped table-hover" id="page0grid"></table>
</div>
</div>
<button type="button" id="addNew" class="btn btn-primary">Add New</button>
<button type="button" id="gridDataTest" class="btn btn-success">TEST</button>
</form>
将更改后的数据传递给row().data()
var tr = jq(e.target).closest("tr");
var saveCellList = jq(e.target).parent().prevAll();
page0grid.row(tr).data(saveCellList.map(function() {
return jq(this).find(">:first-child").val();
}).get()).draw();
这是我得出的解决方案（经过一些抓挠和抓挠之后）- 您可以与上面的相应代码进行比较，看看我更改了什么...
我想可以被认为是黑客攻击（我不是数据表专家）-但是，它似乎工作得很好......
（当然，欢迎提出任何让它更优雅、更高效等方面的建议）
再次感谢所有阅读和回复我的 post 的人！
-
-
-
else
{
//...change/toggle the button title from "Save" to "Edit"...
jq(e.target).html('Edit');
//...get list of previous "sibling" td's...
var saveCellList = Array.prototype.reverse.call(jq(e.target).parent().prevAll()); //...to reverse order?...
var ri = jq(e.target).closest("tr").index();
for (i=0;i<saveCellList.length;i++)
{
var cv =jq(saveCellList[i]).find(">:first-child").val();
dt.cell(ri, i+1).data(cv);
}
jq(this).DataTable().draw();
}
-
-
-
如果您觉得它有帮助，下面是整个 javascript...
var jq = jQuery.noConflict();
var $contextPath;
jq(document).ready(function ()
{
var jq = jQuery.noConflict();
$contextPath = jq("#contextPath").val();
jq('table').click(function(e) {
var dt = jq(this).DataTable();
e.preventDefault();
//...collect the clicked "tag name" and use it to determine what to do...
var tagName = e.target.tagName;
if (tagName === "BUTTON")
{
if (jq(e.target).html()=== 'Edit')
{
//...get list of previous "sibling" td's...
var editCellList = jq(e.target).parent().prevAll();
//...iterate over list and replace plain html text with "input" tag - use plain html text as initial value...
editCellList.each(function(e)
{
jq(this).html("<input type='text' value='" + jq(this).html() + "' />");
});
//...change/toggle the button title from "Edit" to "Save"...
jq(e.target).html('Done');
}
else
{
//...change/toggle the button title from "Save" to "Edit"...
jq(e.target).html('Edit');
//...get list of previous "sibling" td's...
var saveCellList = Array.prototype.reverse.call(jq(e.target).parent().prevAll()); //...to reverse order?...
var ri = jq(e.target).closest("tr").index();
for (i=0;i<saveCellList.length;i++)
{
var cv =jq(saveCellList[i]).find(">:first-child").val();
dt.cell(ri, i+1).data(cv);
}
jq(this).DataTable().draw();
}
}
});
jq("#submitForm").click(function () {
alert(JSON.stringify(jq("#page0Form").serialize()));
jq.post("page0/submitForm", jq("#page0Form").serialize());
});
jq("#gridDataTest").click(function () {
var d = page0grid.row(2).data();
alert(JSON.stringify(d));
});
var page0grid = jq('#page0grid').DataTable({
"ajax": $contextPath + "/page0/testGridList",
"columns": [
{"title": "ID", "data": "id", "visible": false },
{"title": "Field A", "data": "fieldAStrg" },
{"title": "Field B", "data": "fieldBStrg" }
],
"columnDefs": [{
"targets": 3,
"data": null,
"defaultContent": "<button class='edit'>Edit</button>"
}],
"info": false,
"searching": false,
"bPaginate": false,
"scrollY": 600,
"bLengthChange": false,
"bScrollCollapse": true,
"autoWidth": true,
"order": [[ 0, 'desc' ]],
"bSort": false
});
jq('#addNew').click(function () {
var buttonTitleArray = jq('#page0grid tbody > tr > td > button').map(function(){
return jq(this).html();
}).get();
if(jq.inArray("Done", buttonTitleArray )===-1)
{
var rowIndex = jq('#page0grid tbody > tr').length;
console.log("row index(?)...:[" + rowIndex + "]");
var rowNode = page0grid.row.add(
{
"id": "NEW" + jq.now(),
"fieldAStrg":"",
"fieldBStrg":""
}, rowIndex).draw().node();
console.log("addNew...row data at index rowIndex=" + page0grid.cell(rowIndex,0).data());
jq(rowNode).find("button").trigger("click");
}
});
});
场景：
新行添加到 table 并将单元格作为空输入字段公开给用户（即，"inline" 编辑）- 看起来像这样... 即
然后用户在输入字段中输入数据 - 看起来像这样... 即
当用户单击 "Done" 按钮时，我将输入字段转换为纯文本，以反映输入的值 - 如下所示... 即
注意 - 在视觉上 - table 出现 "updated"... - 但是，当我使用 "row().data()" 函数显示行内容时，没有与细胞。
所以，我可以看到我没有与 "datatables" 对象沟通该行的单元格值已更改。 -但是，很明显 table/html 确实包含新的单元格值。
问题：如何 "refresh" 或 "update" 数据 table object/widget 以便识别新值？
（注意：我想使用新的 API 来完成此操作 - 但是，文档不够清晰，我无法理解如何操作）
感谢您的帮助！
下面是完整的jquery/javascript - 如果您认为它可能有帮助...
var jq = jQuery.noConflict();
var $contextPath;
jq(document).ready(function ()
{
var jq = jQuery.noConflict();
$contextPath = jq("#contextPath").val();
jq('table').click(function(e) {
e.preventDefault();
//...collect the clicked "tag name" and use it to determine what to do...
var tagName = e.target.tagName;
if (tagName === "BUTTON")
{
if (jq(e.target).html()=== 'Edit')
{
//...get list of previous "sibling" td's...
var editCellList = jq(e.target).parent().prevAll();
//...iterate over list and replace plain html text with "input" tag - use plain html text as initial value...
editCellList.each(function(e)
{
jq(this).html("<input type='text' value='" + jq(this).html() + "' />");
});
//...change/toggle the button title from "Edit" to "Save"...
jq(e.target).html('Done');
}
else
{
//...change/toggle the button title from "Save" to "Edit"...
jq(e.target).html('Edit');
//...get list of previous "sibling" td's...
var saveCellList = jq(e.target).parent().prevAll();
//...iterate over list and convert "input" tag value to plain html text...
saveCellList.each(function(e)
{
jq(this).html(jq(this).find(">:first-child").val());
});
jq(this).draw();
}
}
});
jq("#submitForm").click(function () {
alert(JSON.stringify(jq("#page0Form").serialize()));
jq.post("page0/submitForm", jq("#page0Form").serialize());
});
//...just hardcoded this button as a test to "see" the contents of the new row..
jq("#gridDataTest").click(function () {
var d = page0grid.row(2).data();
alert(JSON.stringify(d));
});
var page0grid = jq('#page0grid').DataTable({
"ajax": $contextPath + "/page0/testGridList",
"columns": [
{"title": "ID", "data": "id", "visible": false },
{"title": "Field A", "data": "fieldAStrg" },
{"title": "Field B", "data": "fieldBStrg" }
],
"columnDefs": [{
"targets": 3,
"data": null,
"defaultContent": "<button class='edit'>Edit</button>"
}],
"info": false,
"searching": false,
"bPaginate": false,
"scrollY": 600,
"bLengthChange": false,
"bScrollCollapse": true,
"autoWidth": true,
"order": [[ 0, 'desc' ]],
"bSort": false
});
jq('#addNew').click(function () {
var buttonTitleArray = jq('#page0grid tbody > tr > td > button').map(function(){
return jq(this).html();
}).get();
if(jq.inArray("Done", buttonTitleArray )===-1)
{
var pos = jq('#page0grid tbody > tr').length;
var rowNode = page0grid.row.add(
{
"id":"",
"fieldAStrg":"",
"fieldBStrg":""
}, pos).draw().node();
jq(rowNode).find("button").trigger("click");
}
});
});
下面是 JSP 文件，如果您认为它会有所帮助（显然不使用任何标签库）...
<%@taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<%@taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<form id="page0Form" >
<div class='panel panel-primary'>
<div class='panel-heading'>
<h6 class='panel-title'>page0grid</h6>
</div>
<div class='panel-body table-responsive' style='padding:0;'>
<table class="table table-striped table-hover" id="page0grid"></table>
</div>
</div>
<button type="button" id="addNew" class="btn btn-primary">Add New</button>
<button type="button" id="gridDataTest" class="btn btn-success">TEST</button>
</form>
将更改后的数据传递给row().data()
var tr = jq(e.target).closest("tr");
var saveCellList = jq(e.target).parent().prevAll();
page0grid.row(tr).data(saveCellList.map(function() {
return jq(this).find(">:first-child").val();
}).get()).draw();
这是我得出的解决方案（经过一些抓挠和抓挠之后）- 您可以与上面的相应代码进行比较，看看我更改了什么...
我想可以被认为是黑客攻击（我不是数据表专家）-但是，它似乎工作得很好...... （当然，欢迎提出任何让它更优雅、更高效等方面的建议）
再次感谢所有阅读和回复我的 post 的人！
-
-
-
else
{
//...change/toggle the button title from "Save" to "Edit"...
jq(e.target).html('Edit');
//...get list of previous "sibling" td's...
var saveCellList = Array.prototype.reverse.call(jq(e.target).parent().prevAll()); //...to reverse order?...
var ri = jq(e.target).closest("tr").index();
for (i=0;i<saveCellList.length;i++)
{
var cv =jq(saveCellList[i]).find(">:first-child").val();
dt.cell(ri, i+1).data(cv);
}
jq(this).DataTable().draw();
}
-
-
-
如果您觉得它有帮助，下面是整个 javascript...
var jq = jQuery.noConflict();
var $contextPath;
jq(document).ready(function ()
{
var jq = jQuery.noConflict();
$contextPath = jq("#contextPath").val();
jq('table').click(function(e) {
var dt = jq(this).DataTable();
e.preventDefault();
//...collect the clicked "tag name" and use it to determine what to do...
var tagName = e.target.tagName;
if (tagName === "BUTTON")
{
if (jq(e.target).html()=== 'Edit')
{
//...get list of previous "sibling" td's...
var editCellList = jq(e.target).parent().prevAll();
//...iterate over list and replace plain html text with "input" tag - use plain html text as initial value...
editCellList.each(function(e)
{
jq(this).html("<input type='text' value='" + jq(this).html() + "' />");
});
//...change/toggle the button title from "Edit" to "Save"...
jq(e.target).html('Done');
}
else
{
//...change/toggle the button title from "Save" to "Edit"...
jq(e.target).html('Edit');
//...get list of previous "sibling" td's...
var saveCellList = Array.prototype.reverse.call(jq(e.target).parent().prevAll()); //...to reverse order?...
var ri = jq(e.target).closest("tr").index();
for (i=0;i<saveCellList.length;i++)
{
var cv =jq(saveCellList[i]).find(">:first-child").val();
dt.cell(ri, i+1).data(cv);
}
jq(this).DataTable().draw();
}
}
});
jq("#submitForm").click(function () {
alert(JSON.stringify(jq("#page0Form").serialize()));
jq.post("page0/submitForm", jq("#page0Form").serialize());
});
jq("#gridDataTest").click(function () {
var d = page0grid.row(2).data();
alert(JSON.stringify(d));
});
var page0grid = jq('#page0grid').DataTable({
"ajax": $contextPath + "/page0/testGridList",
"columns": [
{"title": "ID", "data": "id", "visible": false },
{"title": "Field A", "data": "fieldAStrg" },
{"title": "Field B", "data": "fieldBStrg" }
],
"columnDefs": [{
"targets": 3,
"data": null,
"defaultContent": "<button class='edit'>Edit</button>"
}],
"info": false,
"searching": false,
"bPaginate": false,
"scrollY": 600,
"bLengthChange": false,
"bScrollCollapse": true,
"autoWidth": true,
"order": [[ 0, 'desc' ]],
"bSort": false
});
jq('#addNew').click(function () {
var buttonTitleArray = jq('#page0grid tbody > tr > td > button').map(function(){
return jq(this).html();
}).get();
if(jq.inArray("Done", buttonTitleArray )===-1)
{
var rowIndex = jq('#page0grid tbody > tr').length;
console.log("row index(?)...:[" + rowIndex + "]");
var rowNode = page0grid.row.add(
{
"id": "NEW" + jq.now(),
"fieldAStrg":"",
"fieldBStrg":""
}, rowIndex).draw().node();
console.log("addNew...row data at index rowIndex=" + page0grid.cell(rowIndex,0).data());
jq(rowNode).find("button").trigger("click");
}
});
});