Layui 数据列表
Posted IronMenPHP
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Layui 数据列表相关的知识，希望对你有一定的参考价值。
html页面 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Layui</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script> <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 --> <link rel="stylesheet" href="//unpkg.com/layui@2.6.5/dist/css/layui.css"> <!-- 引入 layui.js --> <script src="//unpkg.com/layui@2.6.5/dist/layui.js"></script> </head> <body> <div class="demoTable"> 搜索： <div class="layui-inline"> <input class="layui-input" name="wheretext" id="demoReload" autocomplete="off"> </div> <button class="layui-btn" id="sou" data-type="reload">搜索</button> </div> <table class="layui-hide" id="test" lay-filter="test"></table> <script type="text/html" id="toolbarDemo"> <div class="layui-btn-container"> <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button> <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button> <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button> <a href="{:url('admin/user/createDocs')}"><button class="layui-btn layui-btn-sm" >添加es索引</button></a> <a href="{:url('admin/user/create')}"><button class="layui-btn layui-btn-sm" >添加管理员</button></a> </div> </script> <script type="text/html" id="barDemo"> <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> </script> <script> layui.use('table', function(){ var table = layui.table; //温馨提示：默认由前端自动合计当前行数据。从 layui 2.5.6 开始： 若接口直接返回了合计行数据，则优先读取接口合计行数据。 //详见：https://www.layui.com/doc/modules/table.html#totalRow table.render({ elem: '#test' ,url:"http://www.testshop.work/index.php/admin/user/userData" ,toolbar: '#toolbarDemo' ,title: '用户数据表' ,totalRow: true ,cols: [[ {type: 'checkbox', fixed: 'left'} ,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true, totalRowText: '合计'} ,{field:'username', title:'用户名', width:120, edit: 'text'} ,{field:'name', title:'姓名', width:120, edit: 'text'} ,{field:'email', title:'邮箱', edit: 'text'} ,{field:'phone', title:'手机号'} ,{field:'role_name', title:'角色'} ,{fixed: 'right', title:'操作', toolbar: '#barDemo',} ]] ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档 layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局 //,curr: 5 //设定初始在第 5 页 ,groups: 10 //只显示 1 个连续页码 ,first: false //不显示首页 ,last: false //不显示尾页 } ,id:'idTest' }); $('#sou').click(function () { //上述方法等价于 table.reload('idTest', { where: { //设定异步数据接口的额外参数，任意设 wheretext:$('#demoReload').val() } ,page: { curr: 1 //重新从第 1 页开始 } }); //只重载数据 }) table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值" var data = obj.data; //获得当前行数据 var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值） var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话） var id = data.id; if(layEvent === 'detail'){ //查看 //do somehing } else if(layEvent === 'del'){ //删除 layer.confirm('真的删除行么'+data.id, function(index){ $.ajax({ url:"http://www.testshop.work/index.php/admin/user/delete", data:{id:id}, type:'DELETE', success:(res)=>{ console.log(res) if (res.code == 413){ layer.alert(res.mag); return false; } if (res.code == 200){ layer.alert(res.mag); obj.del(); //删除对应行（tr）的DOM结构，并更新缓存 } layer.close(index); } }) //向服务端发送删除指令 }); } else if(layEvent === 'edit'){ //编辑 //do something //同步更新缓存对应的值 obj.update({ username: '123' ,title: 'xxx' }); } else if(layEvent === 'LAYTABLE_TIPS'){ layer.alert('Hi，头部工具栏扩展的右侧图标。'); } }); //工具栏事件 table.on('toolbar(test)', function(obj){ var checkStatus = table.checkStatus(obj.config.id); switch(obj.event){ case 'getCheckData': var data = checkStatus.data; layer.alert(JSON.stringify(data)); break; case 'getCheckLength': var data = checkStatus.data; layer.msg('选中了：'+ data.length + ' 个'); break; case 'isAll': layer.msg(checkStatus.isAll ? '全选': '未全选') break; }; }); }); </script> </body> </html>
后端PHP数据渲染接口
/**
* 显示资源列表
*
* @return \\think\\Response
*/
public function index()
{
return view('user/index');
}
/**
* layui 数据列表
* @param Request $request
*/
public function userData(Request $request)
{
//分页
$page = $request->param('page');
$limit = $request->param('limit');
$start = ($page-1)*$limit;
$es = new MyElasticeearch();
//搜索
$whereText = $request->param('wheretext');
if ($whereText == ''){
$user_data = UserModel::with('roles')
->limit($start,$limit)
->select()->toArray();
//总个数
$count = count(UserModel::select());
} else {
//有数据 使用ES 进行查询
$body = [
'query' => [
'fuzzy' => [
'username' => $whereText
]
],
'highlight' => [
'pre_tags' => ["<span style='color: red'>"],
'post_tags' => ["</span>"],
'fields' => [
'*' =>
new Highlighter()
]
],
'size' => $limit,
'from' => $start,
];
$res = $es->search_doc('test_index', 'users_type', $body);
//$user_data = array_column($res['hits']['hits'], '_source');
$user_data = array_column($res['hits']['hits'], 'highlight');
//获取搜索到的总个数
$count = $res['hits']['total']['value'];
}
//接口返回要素
$api = [
'code' => 0,
'mag' => '成功',
'count' => $count,
'data' => $user_data
];
$api = json_encode($api);
echo $api;
die();
}
以上是关于Layui 数据列表的主要内容，如果未能解决你的问题，请参考以下文章