Ajax实现无刷新表格实时编辑

• 2016-02-20 20:13:37 • 前端开发 • 阅读 1226 • 评论 0

　　简单的jQuery Ajax表格实时编辑功能，点击单元格数据即可实时编辑更新数据，无需刷新跳转页面。

　　index.html

<!DOCTYPE html>
<html lang="utf-8">
	<head>
		<meta charset="UTF-8">
		<title>Ajax 表格实时编辑</title>
		<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
		<style>
			table {
				width: 600px;
				margin: 30px;
				border-collapse: collapse;
			}

			td,
			th {
				border: 1px solid #ccc;
				padding: 8px;
				text-align: left;
			}

			input {
				width: 90%;
				padding: 4px;
				font-size: 14px;
			}
		</style>
	</head>
	<body>

		<h3 style="margin:30px;">表格实时编辑（点击编辑）</h3>
		<table id="dataTable">
			<thead>
				<tr>
					<th>ID</th>
					<th>姓名</th>
					<th>部门</th>
					<th>工资</th>
				</tr>
			</thead>
			<tbody id="tableBody"></tbody>
		</table>

		<script>
			$(function() {
				loadTable();
			});

			// 加载表格数据
			function loadTable() {
				$.get("edit_api.php?action=list", function(res) {
					$("#tableBody").html(res);
				});
			}

			
			// 点击单元格变输入框
			$(document).on("click", "td[field]", function() {
				let td = $(this);

				if (td.find('input').length > 0) {
					return;
				}

				let field = td.attr("field");
				let id = td.parent().data("id");
				let oldVal = td.text().trim();

				td.html('<input type="text" value="' + oldVal + '" data-id="' + id + '" data-field="' + field + '">');
				td.find("input").focus().select();
			});

			// 失去焦点保存
			$(document).on("blur", "td input", function() {
				let input = $(this);
				let id = input.data("id");
				let field = input.data("field");
				let val = input.val().trim();

				$.post("edit_api.php", {
					action: "update",
					id: id,
					field: field,
					value: val
				}, function(res) {
					input.parent("td").html(val);
				});
			});
		</script>
	</body>
</html>

　　edit_api.php

<?php
header("Content-type:text/html; charset=utf-8");

// 数据文件
$dataFile = 'data.txt';

// 文件不存在时创建数据
function initData() {
    global $dataFile;
    $defaultData = [
        1 => ['name' => '张三', 'dept' => '技术部', 'salary' => '8000'],
        2 => ['name' => '李四', 'dept' => '市场部', 'salary' => '7500'],
        3 => ['name' => '王五', 'dept' => '人事部', 'salary' => '6500'],
        4 => ['name' => '赵六', 'dept' => '财务部', 'salary' => '9000'],
        5 => ['name' => '孙七', 'dept' => '运营部', 'salary' => '7000']
    ];

    if (!file_exists($dataFile)) {
        file_put_contents($dataFile, json_encode($defaultData, JSON_UNESCAPED_UNICODE));
    }

    $data = json_decode(file_get_contents($dataFile), true);
    return is_array($data) ? $data : $defaultData;
}

// 保存数据到文件
function saveData($data) {
    global $dataFile;
    file_put_contents($dataFile, json_encode($data, JSON_UNESCAPED_UNICODE));
}

// 读取数据
$data = initData();
$action = $_REQUEST['action'] ?? '';

// 输出表格
if ($action == 'list') {
    foreach ($data as $id => $row) {
        echo "<tr data-id='$id'>
                <td>$id</td>
                <td field='name'>{$row['name']}</td>
                <td field='dept'>{$row['dept']}</td>
                <td field='salary'>{$row['salary']}</td>
              </tr>";
    }
    exit;
}

// 实时更新并写入 data.txt
if ($action == 'update') {
    $id = $_POST['id'];
    $field = $_POST['field'];
    $value = $_POST['value'];

    $data = initData();
    $data[$id][$field] = $value; // 修改对应字段
    saveData($data); // 写入文件

    echo "success";
    exit;
}

本站原创内容，转载请注明来源：https://www.liutonghui.com/129