Question

我创建了以下php文件来模仿ajax请求：

<?php

$data=[
"key0"=>["item1"=>1,"item2"=>2],
"key1"=>["item1"=>11,"item2"=>21],
"key3"=>["item1"=>101,"item2"=>221],
];

header('Content-Type: application/json');
echo json_encode($data);

我用javascript创建了以下html：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8"/>
  <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script
              src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
              integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
              crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

  <link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet"/>
  <script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>

  <script src="//cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
  <script type="text/javascript">

   var datatable=null;

   var initDatatable=function(){

     if(datatable===null){
        datatable=$("#t1").DataTable({
          createdRow:function(row,data,dataIndex){

                var item=data[data.length-1];
                var editableItem=document.createElement("a");
                $(editableItem).text(item);

                var lastChild=$(row).children().last();
                lastChild.text("");
                lastChild.append(editableItem);

                $(editableItem).editable(function(data){
                  console.log("Hello");
                });
          }
        });

     } else {
       datatable.clear();
     }
   }

    $(document).ready(function(){
      $.ajax({
        method:"GET",
        data:{},
        url:"api.php",
        success:function(data){
          initDatatable();
          Object.keys(data).forEach(function(key,index){
            datatable.row.add([key,data[key]['item1'],data[key]['item2']]);
          });
          datatable.draw(false);
        }
      })
    })
  </script>
</head>
<body>
  <table id="t1">
    <thead>
      <tr>
        <th>Column 1</th>
        <th>Columnt 2</th>
        <th>Column 3</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
</body>
</html>

我想要做的是当我在列的最后一个表上更改一个值时，在控制台上打印“你好”字样。如下所示：

    $(editableItem).editable(function(data){
         console.log("Hello");
    });

但由于某种原因，我无法使其发挥作用，我无法弄清楚原因。你能救我吗？

Answer 1

在createdRow回调中替换：

 $(editableItem).editable(function(data){
         console.log("Hello");
    });

使用：

 $(editableItem).editable({
  mode: "inline"//OPtional PArameter
 });

 $(editableItem).on('save',function(e,params){
   console.log("Hello);
  // For cleaner code use external function.
 })

数据表的X可编辑在值更改时执行操作

1 个答案: