行内编辑 不使用插件实现(php)

此例子为参加 Datatables中文网第一期交流学习活动 网友 Amazing Grace 提供的Demo
演示了把Datatables表格变成一个可以实时编辑的效果,没有使用额外的插件,本站另一个 行内编辑的例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
$(function(){
       var table = $('#table').DataTable({
           "ajax": {
               "url": "/example/resources/user_share/inline_edit_no_plugin/data.php",
               //"dataSrc": "data",//默认为data
               "type": "post",
               "error":function(){alert("服务器未正常响应,请重试");}
           },
           "columns": [
               { "data": "id", "title":"序号","defaultContent":""},
               { "data": "username", "title":"用户名","defaultContent":""},
               { "data": "name", "title":"姓名","defaultContent":""},
               { "data": "phone", "title":"电话","defaultContent":""},
               { "data": null, "title":"操作","defaultContent": "<button class='edit-btn' type='button'>编辑</button>"}
           ],
           "language": {
               "sProcessing": "处理中...",
               "sLengthMenu": "显示 _MENU_ 项结果",
               "sZeroRecords": "没有匹配结果",
               "sInfo": "显示第 _START_ 至 _END_ 项结果,共 _TOTAL_ 项",
               "sInfoEmpty": "显示第 0 至 0 项结果,共 0 项",
               "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
               "sInfoPostFix": "",
               "sSearch": "搜索:",
               "sUrl": "",
               "sEmptyTable": "表中数据为空",
               "sLoadingRecords": "载入中...",
               "sInfoThousands": ",",
               "oPaginate": {
                   "sFirst": "首页",
                   "sPrevious": "上页",
                   "sNext": "下页",
                   "sLast": "末页"
               },
               "oAria": {
                   "sSortAscending": ": 以升序排列此列",
                   "sSortDescending": ": 以降序排列此列"
               }
           }
       });
 
       $("#table tbody").on("click",".edit-btn",function(){
           var tds=$(this).parents("tr").children();
           $.each(tds, function(i,val){
               var jqob=$(val);
               if(i < 1 || jqob.has('button').length ){return true;}//跳过第1项 序号,按钮
               var txt=jqob.text();
               var put=$("<input type='text'>");
               put.val(txt);
               jqob.html(put);
           });
           $(this).html("保存");
           $(this).toggleClass("edit-btn");
           $(this).toggleClass("save-btn");
       });
 
       $("#table tbody").on("click",".save-btn",function(){
           var row=table.row($(this).parents("tr"));
           var tds=$(this).parents("tr").children();
           $.each(tds, function(i,val){
               var jqob=$(val);
               //把input变为字符串
               if(!jqob.has('button').length){
                   var txt=jqob.children("input").val();
                   jqob.html(txt);
                   table.cell(jqob).data(txt);//修改DataTables对象的数据
               }
           });
           var data=row.data();
           $.ajax({
               "url":"/example/resources/user_share/inline_edit_no_plugin/edit.php",
               "data":data,
               "type":"post",
               "error":function(){
                   alert("服务器未正常响应,请重试");
               },
               "success":function(response){
                   alert(response);
               }
           });
           $(this).html("编辑");
           $(this).toggleClass("edit-btn");
           $(this).toggleClass("save-btn");
       });
 
       //批量点击编辑按钮
       $("#batch-edit-btn").click(function(){
           $(".edit-btn").click();
       });
       $("#batch-save-btn").click(function(){
           $(".save-btn").click();
       });
   });
1
2
3
<button type="button" id="batch-edit-btn">批量编辑</button>
  <button type="button" id="batch-save-btn">批量保存</button>
  <table id="table" class="display" width="100%"></table>
F12查看
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?php
                    /**
                    *数据
                    */
$con = mysql_connect("localhost", "root", "");
mysql_select_db("test", $con);
if (!$con) {
    //数据库连接则失败显示demo数据
    die('{"data":[{"id":"1","username":"demo",
                    "name":"\u59d3\u540d","phone":"13882500000"},
                    {"id":"2","username":"user","name":"\u540d\u5b57",
                    "phone":"0731-8888888"}]}');
}
$result = mysql_query("SELECT id,username,name,phone FROM user");
$data = array();
while ($row = mysql_fetch_array($result)) {
    array_push($data, $row);
}
$json['data'] = $data;
echo json_encode($json);
mysql_close($con);
?>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?php
                    /**
                    *编辑
                    */
$con = mysql_connect("localhost", "root", "");
mysql_select_db("test", $con);
if( !$con ){
    die('数据库连接失败');
}
$id       = $_POST['id'];
$username = $_POST['username'];
$name     = $_POST['name'];
$phone    = $_POST['phone'];
$result=mysql_query("UPDATE user SET username = '".$username."',name = '".$name."',phone = '".$phone."' WHERE id = ".$id);
if($result){
    echo "修改成功";
}else{
    echo "修改失败";
}
mysql_close($con);
?>