Layui + jQuery无刷新增删改查功能

　　使用Layui框架可以让后台管理功能开发更高效，UI风格更统一美观。简单介绍一下Layui+jQuery开发无刷新数据操作功能的原理，支持数据查询，增加，修改，删除（包括批量删除）。

　　index.html

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<title>Layui 无刷新增删改查</title>
		<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/layui/2.4.3/css/layui.css">
		<script src="https://cdn.bootcdn.net/ajax/libs/layui/2.4.3/layui.js"></script>
		<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
	</head>
	<body>
		<div style="padding:20px;">
			<fieldset class="layui-elem-field layui-field-title">
				<legend>Layui + AJAX 无刷新增删改查</legend>
			</fieldset>

			<div class="layui-form-item">
				<button class="layui-btn layui-btn-normal" id="addBtn">添加数据</button>
				<button class="layui-btn layui-btn-danger" id="batchDel">批量删除</button>
			</div>

			<table class="layui-table" lay-size="sm">
				<thead>
					<tr>
						<th><input type="checkbox" lay-skin="primary" id="checkAll"></th>
						<th>ID</th>
						<th>姓名</th>
						<th>部门</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody id="dataList"></tbody>
			</table>
		</div>

		<script>
			layui.use(['layer', 'form'], function() {
				const layer = layui.layer;
				const form = layui.form;

				$(function() {
					loadList();
				});

				// 加载列表
				function loadList() {
					$.get('lay_api.php?action=list', function(res) {
						$('#dataList').html(res);
						form.render('checkbox');
					});
				}

				// 全选
				$('#checkAll').click(function() {
					let ck = $(this).prop('checked');
					$('.ids').prop('checked', ck);
					form.render('checkbox');
				});

				// 添加数据
				$('#addBtn').click(function() {
					layer.open({
						type: 1,
						title: '添加数据',
						area: ['350px', '250px'],
						content: `<div style="padding:20px;">
        <div class="layui-form-item">
          <label class="layui-form-label">姓名</label>
          <div class="layui-input-block">
            <input type="text" id="name" class="layui-input" placeholder="请输入姓名">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">部门</label>
          <div class="layui-input-block">
            <input type="text" id="dept" class="layui-input" placeholder="请输入部门">
          </div>
        </div>
        <div style="text-align:center;">
          <button class="layui-btn" id="submitAdd">确认添加</button>
        </div>
      </div>`
					});

					// 提交添加
					$(document).on('click', '#submitAdd', function() {
						let name = $('#name').val();
						let dept = $('#dept').val();
						if (!name || !dept) {
							layer.msg('请填写完整', {
								icon: 2
							});
							return;
						}
						$.post('lay_api.php', {
							action: 'add',
							name: name,
							dept: dept
						}, function() {
							layer.msg('添加成功', {
								icon: 1
							});
							loadList();
							layer.closeAll();
						});
					});
				});

				// 修改数据
				$(document).on('click', '.editBtn', function() {
					let id = $(this).data('id');
					let oldName = $(this).data('name');
					let oldDept = $(this).data('dept');

					layer.open({
						type: 1,
						title: '修改',
						area: ['350px', '250px'],
						content: `<div style="padding:20px;">
        <div class="layui-form-item">
          <label class="layui-form-label">姓名</label>
          <div class="layui-input-block">
            <input type="text" id="edit_name" value="${oldName}" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">部门</label>
          <div class="layui-input-block">
            <input type="text" id="edit_dept" value="${oldDept}" class="layui-input">
          </div>
        </div>
        <div style="text-align:center;">
          <button class="layui-btn" id="submitEdit">确认修改</button>
        </div>
      </div>`
					});

					$(document).on('click', '#submitEdit', function() {
						let name = $('#edit_name').val();
						let dept = $('#edit_dept').val();
						$.post('lay_api.php', {
							action: 'edit',
							id: id,
							name: name,
							dept: dept
						}, function() {
							layer.msg('修改成功', {
								icon: 1
							});
							loadList();
							layer.closeAll();
						});
					});
				});

				// 删除数据
				$(document).on('click', '.delBtn', function() {
					let id = $(this).data('id');
					layer.confirm('确定删除？', function() {
						$.post('lay_api.php', {
							action: 'del',
							id: id
						}, function() {
							layer.msg('删除成功', {
								icon: 1
							});
							loadList();
						});
					});
				});

				// 批量删除
				$('#batchDel').click(function() {
					let ids = [];
					$('.ids:checked').each(function() {
						ids.push($(this).val());
					});
					if (ids.length == 0) return layer.msg('请选择数据', {
						icon: 2
					});

					layer.confirm('确定删除选中项？', function() {
						$.post('lay_api.php', {
							action: 'batchdel',
							ids: ids
						}, function() {
							layer.msg('批量删除成功', {
								icon: 1
							});
							loadList();
						});
					});
				});
			});
		</script>
	</body>
</html>

　　lay_api.php

<?php
header("Content-type:text/html; charset=utf-8");
$file = 'data.txt';

// 初始化数据
function initData(){
  global $file;
  $default = [
    1 => ['name'=>'张三','dept'=>'技术部'],
    2 => ['name'=>'李四','dept'=>'市场部'],
    3 => ['name'=>'王五','dept'=>'人事部'],
    4 => ['name'=>'赵六','dept'=>'财务部'],
  ];
  if(!file_exists($file)){
    file_put_contents($file, json_encode($default, JSON_UNESCAPED_UNICODE));
  }
  $data = json_decode(file_get_contents($file), true);
  return is_array($data) ? $data : $default;
}

// 保存
function saveData($arr){
  global $file;
  file_put_contents($file, json_encode($arr, JSON_UNESCAPED_UNICODE));
}

$data = initData();
$action = $_REQUEST['action'] ?? '';

// 列表
if($action == 'list'){
  foreach($data as $id=>$row){
    echo "
    <tr>
      <td><input type='checkbox' class='ids' lay-skin='primary' value='$id'></td>
      <td>$id</td>
      <td>{$row['name']}</td>
      <td>{$row['dept']}</td>
      <td>
        <button class='layui-btn layui-btn-xs editBtn' data-id='$id' data-name='{$row['name']}' data-dept='{$row['dept']}'>编辑</button>
        <button class='layui-btn layui-btn-xs layui-btn-danger delBtn' data-id='$id'>删除</button>
      </td>
    </tr>";
  }
  exit;
}

// 添加
if($action == 'add'){
  $name = $_POST['name'];
  $dept = $_POST['dept'];
  $id = time();
  $data[$id] = [
    'name' => $name,
    'dept' => $dept
  ];
  saveData($data);
  exit('ok');
}

// 修改
if($action == 'edit'){
  $id = $_POST['id'];
  $data[$id]['name'] = $_POST['name'];
  $data[$id]['dept'] = $_POST['dept'];
  saveData($data);
  exit('ok');
}

// 删除
if($action == 'del'){
  $id = $_POST['id'];
  unset($data[$id]);
  saveData($data);
  exit('ok');
}

// 批量删除
if($action == 'batchdel'){
  $ids = $_POST['ids'];
  foreach($ids as $id){
    unset($data[$id]);
  }
  saveData($data);
  exit('ok');
}

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