Question

这是我现在的代码：

   $('#positionsCapteurs').dataTable({

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

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


                sUpdateURL:"/Appareils/UpdateData",


            });

我创建了一个dataTable并使其可编辑，它运行良好，但我想让用户更新数据而不按Enter键，我找到了一个属性来执行此操作：onblur : 'submit'。我试图将它添加到我的选项（dataTable或makeEditable），但它没有用。

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

提前致谢

Answer 1

修改我想你了。

以下代码添加了自定义处理程序。您可以在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更新，无需按Enter键

2 个答案: