<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>品牌管理</title>
<link rel="stylesheet" href="../lib/layui/css/layui.css" media="all">
</head>
<body>
<div>
<form class="layui-form">
<label class="left">输入身份证:</label>
<div class="layui-inline">
<input class="layui-input" name="IdCard" id="demoReload" autocomplete="off">
</div>
<div class="layui-inline">
<button class="layui-btn" id="search" data-type="reload">搜索</button>
</div>
<div style="display:inline-block; width:20%;"></div>
<label class="left">选择时间:</label>
<div class="layui-inline">
<input type="date" value="2019-05-06" id="time1" class="layui-input" id="time" placeholder="yyyy-MM-dd">
</div>
至
<div class="layui-inline">
<input type="date" value="2019-05-10" id="time2" class="layui-input" id="time" placeholder="yyyy-MM-dd">
</div>
<div class="layui-inline">
<div id="btn" class="layui-btn"> 搜索</div>
</div>
</form>
<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>
</div>
</script>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
<a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="edit">审核</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<!-- 表格 -->
<table class="layui-table" id="test" lay-filter="demo">
</table>
</div>
<script src="../js/jquery-3.3.1.min.js"></script>
<script src="../lib/layui/layui.js" charset="utf-8"></script>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
layui.use('table', function () {
var table = layui.table;
//监听表格复选框选择
table.on('checkbox(demo)', function (obj) {
// console.log(obj)
});
//头工具栏事件
table.on('toolbar(demo)', 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;
};
});
//监听行工具条
table.on('tool(demo)', function (obj) {
//tool是工具条事件名,demo是table原始容器的属性 lay - filter="对应的值"
var data = obj.data;
var layEvent = obj.event; //获得 lay-event 对应的值(也可以是表头的 event 参数对应的值)
var tr = obj.tr; //获得当前行 tr 的DOM对象
// console.log(data);
if (obj.event === 'detail') {//查看
// layer.msg('ID:' + data.ID + ' 的查看操作');
layer.open({
// id:"detailid",
type: 2, //可传入的值有:Layer提供了5种层类型。可传入的值有:0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)
title: ['大车申请详情', 'font-size:18px; color: #009688;font-size:20px;font-weight:600;'],//数组第二项可以写任意css样式;如果你不想显示标题栏,你可以title: false
area: ['700px', '600px'],
content: 'iframe.html',
closeBtn: 1, //关闭按钮是否显示 1显示0不显示
shadeClose: true, //点击遮罩区域是否关闭页面
maxmin: true, //最大最小化
btn: ['关闭'],
success: function (layero, index) {//参数layero, index为当前层DOM,当前层索引
}
})
} else if (obj.event === 'edit') {//审核
//json.stringfy()将对象、数组转换成字符串;json.parse()将字符串转成json对象。
// layer.alert('编辑行:<br>' + JSON.stringify(data))
layer.open({
type: 2,
title: ['大车进城审核', 'font-size:18px; color: #FFB800;font-size:20px;font-weight:600;'],
area: ['1000px', '700px'],
content: 'shenhe.html',
shadeClose: true,
maxmin: true,
resize: true,//是否允许拉伸
success: function (layero, index) {
//把当前行数据存到浏览器中
// JSON.stringify(data)
localStorage.setItem("ID", data.ID);
// console.log("========" + id);
},
});
} else if (obj.event === 'del') {//删除
layer.confirm('真的要删除这条记录么', { icon: 3, title: '确定删除' }, function (index) {
obj.del();
$.post('http://192.168.1.146:8080/car/delete?ID=' + data.ID, function (res) {
var tableIns = table.render({});
tableIns.reload();
});
layer.close(index);
});
}
});
table.render({
elem: '#test',
id: 'test',
url: 'http://192.168.1.136/goods/icon',
//一定要加 method:'POST',contentType: 'application/json',以POST方式,json格式提交page和limit到后端
method:'POST',
contentType: 'application/json',
cellMinWidth: 80, //全局定义常规单元格的最小宽度
toolbar: '#toolbarDemo',
text: {
none: '暂无相关数据' //默认:无数据。
},
even: true, //开启隔行背景
page: true,
limit: 10, //每页默认显示的数量,laypage将会借助 count 和 limit 计算出分页数
limitName: 'limit', //每页数据量的参数名,默认:limit
pageName: 'page',//页码的参数名称,默认:page
// limits: [10, 20, 50], //每页条数的选择项,默认:[10,20,30,40,50,60,70,80,90]
// count: count,//数据总数,从服务端得到
prev: '上一页',
next: '下一页',
layout: ['prev', 'page', 'next', 'count', 'limit'],
loading: false,
cols: [
[
{
type: 'checkbox',
fixed: 'left'
},
{ field: 'id', width: 80, title: 'ID', sort: true }
, { field: 'brand_name', width: 80, title: '品牌名' }
, { field: 'brand_icon', width: 80, title: '图标' }
, { field: 'category_id', width: 80, title: '类别' }
, { field: 'gmt_create', title: '修改时间', width: '30%', minWidth: 100 }
, { field: 'gmt_update', title: '更新时间', sort: true }
, {
field: 'right',
title: '操作',
minwidth: 200,
toolbar: "#barDemo"//工具栏指向具体的标签元素
}
]
],
parseData: function (res) { //res 即为原始返回的数据,将原始数据解析成 table 组件所规定的数据
console.log(res);
return {
"code": 0, //解析接口状态 数据状态要设置为0
// msg: res.msg, //解析提示文本
"count": res.count, //解析数据长度
"data": res.data //解析数据列表
};
},
done: function (res, curr, count) {//数据渲染之前的回调
//如果是异步请求数据方式,res即为你接口返回的信息。
//如果是直接赋值的方式,res即为:{data: [], count: 99} data为当前页数据、count为数据总长度
// console.log('接口返回的信息'+res);
// console.log('接口返回的data'+res.data);
// //得到当前页码
// console.log('当前页码'+curr);
// //得到数据总量
// console.log('数据总量'+count);
},
});
var $ = layui.$, active = {
reload: function () {
var demoReload = $('#demoReload').val();//获取搜索框的内容
console.log(demoReload);
//执行重载
table.reload('test', {
page: {
curr: 1 //重新从第 1 页开始
},
where: {
IdCard: demoReload //设定异步数据接口的额外参数
}
});
}
};
$('#search').on('click', function () {
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
});
</script>
</body>
</html>
layui数据表格的使用
最新推荐文章于 2024-04-09 14:30:35 发布