大家好我有一个问题。 这是我工作的sample .. 我的任务是如何使用ajax或jquery更新此实时编辑 我不知道 有人可以帮帮我吗？ 提前谢谢..
这是实时编辑，但没有ajax表单..
var EditableTable = function () {
return {
//main function to initiate the module
init: function () {
function restoreRow(oTable, nRow) {
var aData = oTable.fnGetData(nRow);
var jqTds = $('>td', nRow);
for (var i = 0, iLen = jqTds.length; i < iLen; i++) {
oTable.fnUpdate(aData[i], nRow, i, false);
}
oTable.fnDraw();
}
function editRow(oTable, nRow) {
var aData = oTable.fnGetData(nRow);
var jqTds = $('>td', nRow);
jqTds[0].innerHTML = '<input type="text" class="form-control small" value="' + aData[0] + '">';
jqTds[1].innerHTML = '<input type="text" class="form-control small" value="' + aData[1] + '">';
jqTds[2].innerHTML = '<input type="text" class="form-control small" value="' + aData[2] + '">';
jqTds[3].innerHTML = '<input type="text" class="form-control small" value="' + aData[3] + '">';
jqTds[4].innerHTML = '<input type="text" class="form-control small" value="' + aData[4] + '">';
jqTds[5].innerHTML = '<a class="edit" href="">Save</a>';
jqTds[6].innerHTML = '<a class="cancel" href="">Cancel</a>';
}
function saveRow(oTable, nRow) {
var jqInputs = $('input', nRow);
oTable.fnUpdate(jqInputs[0].value, nRow, 0, false);
oTable.fnUpdate(jqInputs[1].value, nRow, 1, false);
oTable.fnUpdate(jqInputs[2].value, nRow, 2, false);
oTable.fnUpdate(jqInputs[3].value, nRow, 3, false);
oTable.fnUpdate(jqInputs[4].value, nRow, 4, false);
oTable.fnUpdate('<a class="edit" href=""><img src="img/edit.png"></a>', nRow, 5, false);
oTable.fnUpdate('<a class="delete" href=""><img src="img/delete.png"></a>', nRow, 6, false);
oTable.fnDraw();
}
function cancelEditRow(oTable, nRow) {
var jqInputs = $('input', nRow);
oTable.fnUpdate(jqInputs[0].value, nRow, 0, false);
oTable.fnUpdate(jqInputs[1].value, nRow, 1, false);
oTable.fnUpdate(jqInputs[2].value, nRow, 2, false);
oTable.fnUpdate(jqInputs[3].value, nRow, 3, false);
oTable.fnUpdate(jqInputs[4].value, nRow, 4, false);
oTable.fnUpdate('<a class="edit" href="">Edit</a>', nRow, 5, false);
oTable.fnDraw();
}
var oTable = $('#editable-sample').dataTable({
"aLengthMenu": [
[5, 15, 20, -1],
[5, 15, 20, "All"] // change per page values here
],
// set the initial value
"iDisplayLength": 5,
"sDom": "<'row'<'col-lg-6'l><'col-lg-6'f>r>t<'row'<'col-lg-6'i><'col-lg-6'p>>",
"sPaginationType": "bootstrap",
"oLanguage": {
"sLengthMenu": "_MENU_ records per page",
"oPaginate": {
"sPrevious": "Prev",
"sNext": "Next"
}
},
"aoColumnDefs": [{
'bSortable': false,
'aTargets': [0]
}
]
});
jQuery('#editable-sample_wrapper .dataTables_filter input').addClass("form-control medium"); // modify table search input
jQuery('#editable-sample_wrapper .dataTables_length select').addClass("form-control xsmall"); // modify table per page dropdown
var nEditing = null;
$('#editable-sample_new').click(function (e) {
e.preventDefault();
var aiNew = oTable.fnAddData(['', '', '', '',
'<a class="edit" href="">Edit</a>', '<a class="cancel" data-mode="new" href="">Cancel</a>'
]);
var nRow = oTable.fnGetNodes(aiNew[0]);
editRow(oTable, nRow);
nEditing = nRow;
});
$('#editable-sample a.delete').live('click', function (e) {
e.preventDefault();
if (confirm("Are you sure to delete this row ?") == false) {
return;
}
var nRow = $(this).parents('tr')[0];
oTable.fnDeleteRow(nRow);
alert("Deleted! Do not forget to do some ajax to sync with backend :)");
});
$('#editable-sample a.cancel').live('click', function (e) {
e.preventDefault();
if ($(this).attr("data-mode") == "new") {
var nRow = $(this).parents('tr')[0];
oTable.fnDeleteRow(nRow);
} else {
restoreRow(oTable, nEditing);
nEditing = null;
}
});
$('#editable-sample a.edit').live('click', function (e) {
e.preventDefault();
/* Get the row as a parent of the link that was clicked on */
var nRow = $(this).parents('tr')[0];
if (nEditing !== null && nEditing != nRow) {
$(".edit").bind('change', function()
{
var details_id = $(this).attr('id').replace('id','');
var detail_aa = $("#detail_aa"+details_id).val();
var detail_bb = $("#detail_bb"+details_id).val();
var detail_cc = $("#detail_cc"+details_id).val();
var dataString = 'id=' + details_id + '&firstname=' + detail_aa + '&lastname='+detail_bb + '&email='+detail_cc;
if(detail_aa != "" && detail_bb != "" && detail_cc != "")
{
$.ajax({
type: "POST",
url: "information-update.php",
data: dataString,
cache: false,
beforeSend: function()
{
$("#detail_a"+details_id).html('<img src="load.gif" />');
},
success: function()
{
$("#detail_a"+details_id).html(detail_aa);
$("#detail_b"+details_id).html(detail_bb);
$("#detail_c"+details_id).html(detail_cc);
}
});
}
else
{
alert('That field can not be completely empty. Please enter some content. Thanks...');
return false;
}
});
} else if (nEditing == nRow && this.innerHTML == "Save") {
/* Editing this row and want to save it */
saveRow(oTable, nEditing);
nEditing = null;
alert("Updated!");
} else {
/* No edit in progress - let's start one */
editRow(oTable, nRow);
nEditing = nRow;
}
});
}
};
}();
答案 0 :(得分：0)
这里的解决方案是在输入中添加id并在编辑函数中调用变量。
jqTds[0].innerHTML = '<input type="text" class="form-control small" id="dataid" value="' + aData[0] + '">';
jqTds[1].innerHTML = '<input type="text" class="form-control small" id="fname" value="' + aData[1] + '">';
jqTds[2].innerHTML = '<input type="text" class="form-control small" id="lname" value="' + aData[2] + '">';
jqTds[3].innerHTML = '<input type="text" class="form-control small" id="email" value="' + aData[3] + '">';
/* Get the row as a parent of the link that was clicked on */
var nRow = $(this).parents('tr')[0];
var id= $('#dataid').val();
var fname= $('#fname').val();
var lname= $('#lname').val();
$.ajax({
type: "POST",
url: "edit_user.php",
data: {id:id,fname:fname, lname:lname,email:email},
success: function() {
alert("Done");
}
});
/* Editing this row and want to save it */
saveRow(oTable, nEditing);
nEditing = null;