Question

大家好我有一个问题。这是我工作的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;
            }
        });
    }

};

}();

Answer 1

这里的解决方案是在输入中添加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;

bootstrap live edit提交ajax表单

1 个答案: