Jquery 无需按回车键即可更新数据表 makeEditable

Question

这是我现在的代码：

   $('#positionsCapteurs').dataTable({

                "paging":   false,
                "ordering": false,
                "info":     false,
                "bJQueryUI": true,
                "bFilter": false,

                "columnDefs": [{
                    "targets": 0,
                    "orderable": false
                }]
            }).makeEditable(
            {


                sUpdateURL:"/Appareils/UpdateData",


            });

我创建了一个数据表并使其可编辑，它像那样工作得很好，但我想允许用户更新数据而无需按回车键，我找到了一个属性来做到这一点：onblur : 'submit'。我试图将其添加到我的选项（dataTable 或 makeEditable）中，但没有成功。

如何添加此选项并允许用户按回车键或不按回车键来更新数据？

提前致谢

Answer 1

编辑： 我帮你想好了。[=11=]

以下代码添加了自定义处理程序。您可以在 onblur 中创建您的 ajax 请求。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Datatable Save on blur</title>
    <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
    <script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.12.3.min.js">
    </script>
    <script type="text/javascript" language="javascript" src="http://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js">
    </script>
    <script type="text/javascript" language="javascript" class="init">

        $(document).ready(function() {
            $('#positionsCapteurs').DataTable( {
                 "paging":   false,
                "ordering": false,
                "info":     false,
                "bJQueryUI": true,
                "bFilter": false,

                "columnDefs": [{
                    "targets": 0,
                    "orderable": false
                }]
            });

            $('#positionsCapteurs').on('click', 'tbody td', function (e) {
                // check if inout does not already exist
                if ( $(this).html().indexOf('input') == -1 ) {
                    var rel = $(this).attr('rel');
                    var fieldname = $(this).attr('fieldname');
                    var val = $(this).html();
                    $(this).html(inlineEdit(this, rel, fieldname, val));
                    var myTd = this;
                    // implement the blur
                    $("#" + rel + '_' + fieldname ).on('blur', function() {
                        // create ajax call to save data
                        /*
                        $.ajax({
                          url: "backendscript.php",
                          method: "POST",
                          data: { id : rel, fieldname: fieldname, val: $(this).val() }
                        }).done(function( html ) {
                            stopEdit(this, myTd);
                        });
                        */
                        stopEdit(this, myTd); // comment this out when ajax call is impleneted stopEdit should be done when ajax call is done
                    });
                    // implement the enter press
                    $("#" + rel + '_' + fieldname ).on('keypress', function(event) {
                        if ( event.keyCode == 13 ) {
                            $(this).trigger('blur');
                        }
                    });
                    // focus the input
                    $("#" + rel + '_' + fieldname ).focus();
                    // put the cursor on the end
                    var tmpStr = $("#" + rel + '_' + fieldname ).val();
                    $("#" + rel + '_' + fieldname ).val('');
                    $("#" + rel + '_' + fieldname ).val(tmpStr);
                }
            });
        });
        // generate input
        function inlineEdit(td, rel, fieldname, val) {
            return $('<input/>').attr({ type: 'text', rel: rel, name: fieldname, autofocus: 'true', value: val, id: rel + '_' + fieldname})
        }

        // stop input
        function stopEdit(input, myTd) {
            $(myTd).html($(input).val());
        }
    </script>
</head>
<body>
<div class="container">
    <table id="positionsCapteurs" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Col3</th>
                <th>Col4</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rel="1" fieldname="name">Olivier</td>
                <td rel="1" fieldname="pos">Developer</td>
                <td rel="1" fieldname="col3">val3</td>
                <td rel="1" fieldname="col4">val4</td>
            </tr>
            <tr>
                <td rel="2" fieldname="name">Olivier2</td>
                <td rel="2" fieldname="pos">Developer2</td>
                <td rel="2" fieldname="col3">val32</td>
                <td rel="2" fieldname="col4">val42</td>
            </tr>
        </tbody>
    </table>
</div>
</body>
</html>

Answer 2

这里有一个简单的解决方案，说明如何在文本字段失去焦点时提交数据。

Solution

onblur="document.getElementById('autopass').submit();"

Jquery 无需按回车键即可更新数据表 makeEditable

Jquery datatable makeEditable update without pressing enter

javascript

jquery

jquery-ui

jeditable

datatables