layui框架实战案例(19)：layui-table模块表格综合应用（筛选查询导入导出群发短信一键审核照片展示隐私加密）
Posted 漏刻有时
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了layui框架实战案例(19)：layui-table模块表格综合应用（筛选查询导入导出群发短信一键审核照片展示隐私加密）相关的知识，希望对你有一定的参考价值。
系列文章目录
- layui动态表格翻页和搜索的代码分析
- layui框架实战案例(3)：layui上传错误请求上传接口出现异常解决方案
- layui框架实战案例(9)：layPage 静态数据分页组件
- layui框架实战案例(10)：短信验证码60秒倒计时
- layui框架实战案例(11)：表单自定义验证规则
- layui框架实战案例(12)：layui标签输入框inputTag
- layui框架实战案例(13)：colorpicker颜色选择器的使用
- layui框架实战案例(14)：tabs选项卡切换时echarts拉伸变形无法正常显示的解决方案
- layui框架实战案例(15)：上传提示413 request entity too large宝塔配置的解决方案
- layui框架实战案例(16)：xm-select下拉多选插件实战记录（远程搜索、过滤、翻页、单选、提示文字）
- layui框架实战案例(17)：流加载文档layui.flow组件的前后端解决方案
- layui实现定位、查询数据以及select筛选的组合功能
- layui多文件上传与PHP后端对接的解决方案
- layui内部表单互动的实战案例：根据radio单选框自动改变input内容
- layui复选框checkbox全选和获取值的解决方案
- layui和weui结合手机端select表单底部选择和被遮挡的解决方案
文章目录
前言
table 是 layui 中使用频率非常高的一个组件，用于在表格中对数据进行一系列动态化的操作，涵盖了日常业务所涉及的大部分需求。
- 模块加载名称：table
- 在实际开发应用中，table的使用牵涉前后端的配合使用，如筛选查询重载功能，翻页功能等。
一、html容器
- 查询条件表单
<div class="layui-row">
<form class="layui-form layui-col-md12 x-so">
<div class="demoTable">
<div class="layui-input-inline">
<select name="major_name" id="major_name" lay-filter="major_name" lay-verify="required" lay-search></select>
</div>
<div class="layui-input-inline">
<select name="sub_name" id="sub_name" lay-filter="sub_name" lay-verify="required" lay-search></select>
</div>
<div class="layui-input-inline"><input type="text" class="layui-input" placeholder="姓名" id="user_name" autocomplete="off"></div>
<div class="layui-input-inline"><input type="text" class="layui-input" placeholder="学号" id="user_ticket" autocomplete="off"></div>
<div class="layui-input-inline">
<select name="user_verify" lay-filter="user_verify" id="user_verify">
<option value="">报名状态</option>
<option value="0">未报名</option>
<option value="1">已报名</option>
<option value="2">已审核</option>
</select>
</div>
<div class="layui-input-inline">
<select name="user_pay" lay-filter="user_pay" id="user_pay">
<option value="">缴费状态</option>
<option value="0">未缴费</option>
<option value="1">已缴费</option>
</select>
</div>
<a class="layui-btn layui-btn-normal" data-type="reload">查询</a>
if $smarty.cookies.admin_menu eq "1"
<a class="layui-btn" onclick="x_admin_show('导入用户信息','?m=User&a=userImport','','')"><i class="layui-icon layui-icon-form"></i>导入用户信息</a>
<a class="layui-btn layui-btn-danger" onclick="x_admin_show('导入缴费信息','?m=User&a=userPayImport','','')"><i class="layui-icon layui-icon-form"></i>导入缴费信息</a>
<a class="layui-btn layui-btn-normal" onclick="x_admin_show('导入考试信息','?m=User&a=userExamImport','','')"><i class="layui-icon layui-icon-form"></i>导入考试信息</a>
/if
<span class="x-right" style="line-height:40px"></span>
</div>
</form>
</div>
- 表格容器
<table class="layui-hide" id="lockTabel" lay-filter="lockTabel"></table>
二、php后端API数据
1.核心代码
public function getUser()
global $CONF_TABLE, $db, $res;
dbc();
@$user_work = get_param("user_work");
@$user_class = get_param("user_class");
@$user_name = get_param("user_name");
@$user_ticket = get_param("user_ticket");
@$user_verify = get_param("user_verify");
@$user_pay = get_param("user_pay");
@$p = get_param('page') == "" ? 1 : get_param('page');
@$pagesize = get_param('limit') == "" ? 15 : get_param('limit');
@$limit = ($p - 1) * $pagesize;
//按学院权限设置筛选条件;
if ($_COOKIE['admin_menu'] == 1) //超级管理员
$filter_condition = " 1";
elseif ($_COOKIE['admin_menu'] == 0) //学院管理员
$filter_condition = " user_work = '" . $_COOKIE['admin_depart'] . "'";
else //禁止查询
$filter_condition = " 1 = 2";
/*用户分表 By Poleung 2023-02-26*/
$current_table = "user_" . $CONF_TABLE['current_table'];
$sql = "select user_id,user_ticket,user_name,user_gender,user_nation,user_card,user_phone,user_work,user_class,user_photo,user_verify,user_pay,user_sms,user_cet FROM " . $db->table($current_table) . " WHERE " . $filter_condition;
if ($user_ticket != "")
$sql .= " AND user_ticket like '%" . $user_ticket . "%'";
if ($user_name != "")
$sql .= " AND user_name like '%" . $user_name . "%'";
if ($user_work != "")
$sql .= " AND user_work like '%" . $user_work . "%'";
if ($user_class != "")
$sql .= " AND user_class like '%" . $user_class . "%'";
if ($user_verify != "")
$sql .= " AND user_verify = " . $user_verify;
if ($user_pay != "")
$sql .= " AND user_pay = " . $user_pay;
$sql .= " ORDER BY user_verify DESC,user_id DESC LIMIT " . $limit . "," . $pagesize;
$row = $db->queryall($sql);
//获取总记录;
$sql_c = "select user_id FROM " . $db->table($current_table) . " WHERE " . $filter_condition;
if ($user_ticket != "")
$sql_c .= " AND user_ticket like '%" . $user_ticket . "%'";
if ($user_name != "")
$sql_c .= " AND user_name like '%" . $user_name . "%'";
if ($user_work != "")
$sql_c .= " AND user_work like '%" . $user_work . "%'";
if ($user_class != "")
$sql_c .= " AND user_class like '%" . $user_class . "%'";
if ($user_verify != "")
$sql_c .= " AND user_verify = " . $user_verify;
if ($user_pay != "")
$sql_c .= " AND user_pay = " . $user_pay;
$sql_c .= " ORDER BY user_verify DESC,user_id DESC";
$row_c = $db->queryall($sql_c);
/*信息输出*/
$res['code'] = 0;
$res['msg'] = 0;
$res['count'] = count($row_c);
$res["data"] = $row;
die(json_encode_lockdata($res));
2.参数过滤
由于前端传递参数使用get方式，便于筛选和查询，但是也存在着SQL注入漏洞，因此使用get_param()函数对参数进行安全过滤，具体封装参数不做展示，根据自己系统需要增加即可。
@$user_work = get_param("user_work");
@$user_class = get_param("user_class");
@$user_name = get_param("user_name");
@$user_ticket = get_param("user_ticket");
@$user_verify = get_param("user_verify");
@$user_pay = get_param("user_pay");
@$p = get_param('page') == "" ? 1 : get_param('page');
@$pagesize = get_param('limit') == "" ? 15 : get_param('limit');
3.权限判断
后台角色权限分为超级管理员和学院管理员，为了展示对应的数据，做好限设置筛选条件。
//按学院权限设置筛选条件;
if ($_COOKIE['admin_menu'] == 1) //超级管理员
$filter_condition = " 1";
elseif ($_COOKIE['admin_menu'] == 0) //学院管理员
$filter_condition = " user_work = '" . $_COOKIE['admin_depart'] . "'";
else //禁止查询
$filter_condition = " 1 = 2";
4.获取总记录
在使用table模块翻页时，需要传递总页码，因此在后端开发时，单独增加一个数据记录的SQL查询语句。
$res['count'] = count($row_c);
三、table模块渲染
1.加载layui
layui.use(['table', 'layer', 'form'], function ()
var $ = layui.jquery,form = layui.form,table = layui.table;
//核心代码
);
2.筛选条件select表单加载
为了便于后台筛选操作，在layui中异步调用函数，快速下拉查询；同时设置<select name="major_name" id="major_name" lay-filter="major_name" lay-verify="required" lay-search></select>lay-search属性，支持下拉和输入查询。
//获取学院;
getBigCategory();
getSubCategory('', '');
form.on("select(major_name)", function ()
var major_id = $("#major_name").val().split(',')[0];
//console.log(major_id);
getSubCategory(major_id,'');
);
3.表格渲染
核心代码
//表格渲染;
table.render(
elem: '#lockTabel'
, url: './api/api.php?act=getUser&token=3cab7ce4142608c0f40c785b5ab5ca24'
, layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
, limits: [15,30, 50, 100, 200, 500, 1000]
, limit: 15
, toolbar: '#toolbarDemo'
以上是关于layui框架实战案例(19)：layui-table模块表格综合应用（筛选查询导入导出群发短信一键审核照片展示隐私加密）的主要内容，如果未能解决你的问题，请参考以下文章
PK2030-唐宇迪深度学习框架-Tensorflow案例实战视频课程