已解决-求助bootstrap-table x-editable 修改值之后如何通过ajax用PHP传到数据库

最新推荐文章于 2022-12-26 07:33:13 发布

arbsteven

最新推荐文章于 2022-12-26 07:33:13 发布

阅读量462

点赞数

分类专栏：笔记文章标签： ajax bootstrap php mysql

本文链接：https://blog.youkuaiyun.com/arbsteven/article/details/114122671

版权

笔记专栏收录该内容

1 篇文章

订阅专栏

目的：通过bootstrap table x-editable 实现数据可以页面直接更新，数据直接从后台拉出显示，问题出在如何把更新的值传递到后台。求助大神如何写ajax来把值传到后台，以及PHP代码。

架构

前端HTML代码：

<!DOCTYPE html>
<html>
	<head>
	    <meta charset="utf-8">
	    <link rel="icon" href="img/favicon.ico">
	    <title>Bootstrap 模板</title>	   
	    <link rel="stylesheet" href="js/bootstrap_above/bootstrap/css/bootstrap.min.css" />
	    <link rel="stylesheet" href="js/bootstrap_above/bootstrap-table-develop/dist/bootstrap-table.css"/>	    
	    <script src="js/bootstrap_above/jquery-1.9.1/jquery.min.js"></script>
	    <script src="js/bootstrap_above/bootstrap/js/bootstrap.min.js"></script>
	    <script type="text/javascript" src="js/bootstrap_above/bootstrap-table-develop/dist/bootstrap-table.js"></script>
		<script type="text/javascript" src="js/bootstrap_above/bootstrap-table-develop/dist/locale/bootstrap-table-zh-CN.js"></script>
        <script src="https://unpkg.com/tableexport.jquery.plugin/tableExport.min.js"></script>
		<script type="text/javascript" src="js/bootstrap_above/bootstrap-table-develop/dist/extensions/export/bootstrap-table-export.min.js"></script>
	  
		<script src="js/bootstrap_above/tableExport/libs/pdfmake/vfs_fonts.js"></script>
		<script type="text/javascript" src="js/bootstrap_above/tableExport/libs/FileSaver/FileSaver.min.js"></script>
		
		<script type="text/javascript" src="js/bootstrap_above/tableExport/tableExport.js"></script> 	   
        <link href="js/bootstrap_above/x-editable-develop/dist/bootstrap-editable/css/bootstrap-editable.css" rel="stylesheet">
		<script src="js/bootstrap_above/x-editable-develop/dist/bootstrap-editable/js/bootstrap-editable.js"></script>
		<script src="js/bootstrap_above/bootstrap-table-develop/dist/extensions/editable/bootstrap-table-editable.js"></script>			
		<script src="js/table.js"></script>
	</head>
<body>
		<table id="db_dependences"
        data-toolbar: '#toolbar'
        ></table>
<script>
$('#db_dependences').bootstrapTable({
  url:'./data.php',
  method:'POST',
  dataType:'json',
  <!--contentType: "application/x-www-form-urlencoded",-->
  cache: true,
  search: true,
  showRefresh: true,
  striped: true,        //是否显示行间隔色
  sidePagination: "client",   //分页方式：client客户端分页，server服务端分页（*）
  showColumns:true,
  pagination:true,
  minimumCountColumns:2,
  pageNumber:1,      //初始化加载第一页，默认第一页
  pageSize: 10,      //每页的记录行数（*）
  pageList: [10, 15, 20, 25],  //可供选择的每页的行数（*）
  uniqueId: "id",      //每一行的唯一标识，一般为主键列
  showExport: true,     
  exportDataType: 'all',
  exportTypes:[ 'csv', 'txt', 'sql', 'doc', 'excel', 'xlsx', 'pdf'], //导出文件类型
  onEditableSave: function (field, row, oldValue, $el) {
	
   $.ajax({			
		success: function (data, status) {
			 if (status == "success") {
				 alert("编辑成功");	
				alert(JSON.stringify(row));
			 }
			},
			error: function () {
			 alert("Error");
			},
			complete: function () {
			}
		   });
  },

  columns: [{
   field: 'country',
   title: 'country',
   editable: {
    type: 'text', 
    validate: function (value) { if ($.trim(value) == '') {return '姓名不能为空!'; } }} 
	},{
   field: 'ws',
   title: 'WS',
   editable: {
		type: 'select', 
		pk: 1,
		source: [
		 {value: 1, text: 'ws1'},
		 {value: 2, text: 'ws2'},] } 
  }, {
   field: 'title',
   title: 'title',
   editable: {
    type: 'text', 
    validate: function (value) { if ($.trim(value) == '') {return '姓名不能为空!'; } }} 
	}, {
   field: 'priority',
   title: 'Priority',
   editable: {
    type: 'select',
    pk: 1,
    source: [
     {value: 1, text: 'H'},
     {value: 2, text: 'M'},
    ],

   }
  }, {
   field: 'owner',
   title: 'Owner',
   editable: {
    type: 'text', 
    validate: function (value) { if ($.trim(value) == '') {return '姓名不能为空!'; } }} 
	},{
   field: 'status',
   title: 'Status',
   editable: {
		type: 'select', 
		pk: 1,
		source: [
		 {value: 1, text: 'ongoing'},
		 {value: 2, text: 'done'},] } 
  },   
  
  {
   field: 'start_date',
   title: 'startdate',
   editable: {
    type: 'date',
    format: 'yyyy-mm-dd', 
    viewformat: 'yyyy-mm-dd', 
    datepicker: { weekStart: 1},  
   }},{
	   field: 'end_date',
	   title: 'EndDate',
	   editable: {
		type: 'date',
		format: 'yyyy-mm-dd', 
		viewformat: 'yyyy-mm-dd', 
		datepicker: { weekStart: 1},}
	},{
   field: 'content',
   title: 'Content',
   editable: {
    type: 'text', 
    validate: function (value) { if ($.trim(value) == '') {return '姓名不能为空!'; } }} 
	}
   ]
 });
</script>
	</body>
	
</html>