增删改查（CRUD）前端逻辑步骤

CRUD前端逻辑

一、分页查询步骤

页面加载完成直接发送 ajax 请求，获取分页数据

1. 解析并显示员工数据
   • 清空表格数据（因为发送 ajax 请求 上一次的记录若不清除 会叠加）
   • 循环获取并显示表格数据（可使用 jQuery 提供的遍历方法：$.each() ）
2. 解析并显示分页信息
   • 清空分页信息
   • 获取并显示分页信息
3. 解析并显示分页条数据
   • 清空分页条信息
   • 添加首页和上一页
   • 判断是否有上一页
     • 若没有 则首页和上一页不能点击
     • 若有 则为首页和上一页添加点击翻页事件
   • 循环添加当前页周边几个页码
     • 若当前页与查询的页码相同 则高亮显示该页码
     • 为页码添加点击事件
   • 添加下一页和尾页
   • 判断是否有下一页
     • 若没有 --> 则下一页和尾页不能点击

• 若有 --> 则为下一页和尾页添加点击翻页事件

---

二、新增步骤

1. 点击新增按钮

   • 清除表单数据
   • 发送 ajax 请求 获取下拉列表数据（写成一个方法直接调用）
   • 弹出模态框

2. 前端校验表单数据格式是否正确（可使用正则表达式）

3. 校验用户名是否可用（是否重复）–> change事件

   • 发送 ajax 请求校验用户名是否可用

4. 点击保存

   • 判断之前的 ajax 用户名校验是否成功

     (可以给保存按钮添加一个属性，来判断是否成功)

     //若成功
     $("#emp_save_btn").attr("ajax-va", "success");
     //若失败
     $("#emp_save_btn").attr("ajax-va", "error");
     

     // 判断之前的ajax用户名校验是否成功
     if ($(this).attr("ajax-va") == "error") {
         return false;
     }
     

   • 发送 ajax 请求保存员工

     • 回调函数中：
       • 假如成功：
         1. 关闭模态框
         2. 显示分页查询最后一页，显示最后添加的数据
       • 假如失败：
         1. 显示失败信息
         2. 有哪个字段的错误信息，就显示哪个字段的（有些人可能会绕过前端校验，所以后端也尽量对数据进行校验）

---

三、修改信息

1. 创建编辑按钮点击事件

   • 若直接添加点击事件会添加不上，因为直接添加是在按钮创建之前绑定

     • 解决：
       1. 在创建按钮的时候绑定，
       2. 绑定点击 .live() 事件
       3. jQuery 新版中没有 live 事件，使用 on 事件进行替代

     $(document).on("click", ".edit_btn", function () {})
     

2. 更新获取表单数据

   • 根据修改行 id 查询该行数据
   • 将所查数据绑定给修改页面元素

3. 点击修改更新按钮 更新员工列表

   • 验证修改数据的合法性
   • 发送ajax请求保存更新的员工数据（成功回调后）
     • 关闭模态框
     • 回到当前页面

---

四、删除信息

1. 单个删除
   • 点击单个删除按钮
   • 获取当前行 id
   • 弹出确认删除对话框
   • 确认删除 发送 ajax 请求 删除 返回当前页
2. 批量删除
   • 点击批量删除按钮
   • 循环遍历单选框，并拼接 id 字符串 可以 “ ，”隔离
   • 去除最后一个多余的逗号
   • 弹出确认删除对话框
   • 确认删除 发送 ajax 请求 删除 返回当前页