📖 File Reader
<?php /*a:3:{s:54:"D:\XiangMu\hecheng\app\admin\view\copy\layui_list.html";i:1740191722;s:49:"D:\XiangMu\hecheng\app\admin\view\public\top.html";i:1723193413;s:49:"D:\XiangMu\hecheng\app\admin\view\public\vue.html";i:1677287072;}*/ ?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>在线测试</title>
<link href="/public/layui-v2.9.14/layui/css/layui.css" rel="stylesheet">
</head>
<style>
.demoTable {padding:1rem 1rem 0rem 1rem;}
/*列表自定义样式*/
body {background-color: transparent!important;}
@media (max-width: 767px) {
/* 手机 */
.list_left{width:25%;margin-right:1%;float:left;height:100%;min-height:840px;background-color:#FFFFFF;}
.list_right{width:74%;float:left;background-color:#FFFFFF;height:100%;min-height:840px;}
}
@media (min-width: 768px) {
/* 电脑 */
.list_left{width:15%;margin-right:0.5%;float:left;height:100%;min-height:840px;background-color:#FFFFFF; }
.list_right{width:84%;float:left;background-color:#FFFFFF;height:100%;min-height:840px;}
}
.list_left{overflow: hidden;}
/*定义滚动条高宽及背景*/
.left_cat{height: 93%;overflow:scroll;overflow:hidden;overflow:auto;white-space: nowrap; }
.left_cat::-webkit-scrollbar {width: 4px;height: 8px;}
.left_cat::-webkit-scrollbar-track{background-color: #FFFFFF;}
.left_cat::-webkit-scrollbar-thumb {background-color: #dcdcdc;border-radius: 10px;}
/*列表搜索*/
.layui-form-checkbox[lay-skin="primary"] > div {padding-left: 4px;padding-right: 0px;}
/*树组件*/
.layui-tree-iconClick{display: none!important;} /*多选图标隐藏*/
.layui-form-checkbox[lay-skin=primary] i{left: 9px;}
.layui-tree-entry{height: auto;}
.layui-tree-txt {margin-left: 10px;}
/*使用小技巧*/
.layui-collapse{margin-right:0.4%;margin-bottom:0.5%;border-style: none;}
.layui-colla-title{background: #ffffff;}
</style>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="renderer" content="webkit" />
<title><?php echo htmlentities($config['name']); ?></title>
<meta name="keywords" content="" />
<meta name="description" content=""/>
<!--[if lt IE 9]>
<meta http-equiv="refresh" content="0;ie.html" />
<![endif]-->
<link rel="shortcut icon" href="favicon.ico" />
<link href="/public/admin/css/jquery.contextMenu.min.css" rel="stylesheet"/>
<link href="/public/admin/css/font-awesome.css?v=4.4.0" rel="stylesheet">
<link href="/public/admin/css/plugins/jsTree/style.min.css" rel="stylesheet">
<link rel="shortcut icon" href="favicon.ico">
<link href="/public/admin/css/plugins/iCheck/custom.css" rel="stylesheet">
<link href="/public/admin/css/plugins/summernote/summernote.css" rel="stylesheet" />
<link href="/public/admin/css/plugins/summernote/summernote-bs3.css" rel="stylesheet" />
<link href="/public/admin/css/bootstrap.min.css?v=3.3.7" rel="stylesheet">
<link href="/public/admin/css/font-awesome.css?v=4.4.0" rel="stylesheet">
<link href="/public/admin/css/style.css?v=4.1.0" rel="stylesheet">
<script src="/public/layui-v2.9.14/layui/layui.js"></script>
<script src="/public/admin/js/jquery-2.2.0.min.js"></script>
<script>
layui.use('upload', function(){
var $ = layui.jquery,upload = layui.upload;
});
</script>
<style>
/*分页样式*/
.pagination{width: 100%;display: flex;align-items: center;justify-content: flex-end;}
</style>
</head>
<script src="/public/admin/js/jquery-2.2.0.min.js"></script>
<script src="/public/vue/vue.js"></script>
<script src="/public/vue/axios.min.js"></script>
<script src="/public/vue/vue-resource.min.js"></script>
<script src="/public/vue/request_admin.js"></script>
<body>
<!--使用小技巧-->
<div class="layui-collapse">
<div class="layui-colla-item">
<div class="layui-colla-title">使用小技巧？</div>
<div class="layui-colla-content">
哈哈哈，莫有 想撒尼
</div>
</div>
</div>
<!--左侧列表-->
<div class="list_left">
<h2 style="margin-left:10px;margin-right: 10px;font-size: 17px;text-align: center;">所属分类</h2>
<div class="left_cat" id="ID-tree-demo-showCheckbox"></div>
</div>
<!--右侧列表-->
<div class="list_right">
<!--搜索栏-->
<div class="demoTable">
<fieldset class="layui-elem-field">
<legend style="margin-bottom:0px;">搜索栏</legend>
<div class="layui-field-box">
<form class="layui-form layui-row layui-col-space16" onkeydown="if(event.keyCode==13)return false;" onSubmit="return checkSubmit();">
<div class="layui-col-md4">
<div class="layui-input-wrap">
<input class="layui-input" id="keyword" placeholder="请输入产品名称" autocomplete="off">
</div>
</div>
<div class="layui-col-md4" style="width: 150px;">
<div class="layui-input-wrap" >
<select class="layui-select" id="canteen_id_sousuo" lay-filter="canteen_id_sousuo" name="canteen_id_sousuo">
<option value="0">请选择</option>
<option value="1">下拉菜单1</option>
<option value="2">下拉菜单2</option>
</select>
</div>
</div>
<div class="layui-col-md4">
<div class="layui-input-wrap layui-input" >
<label class="layui-form">推荐勾选</label>
<input class="layui-input" type="checkbox" name="data_tuijian" value="1" title="选1" style="padding-left: 29px">
<input class="layui-input" type="checkbox" name="data_tuijian" value="2" title="选2">
<input class="layui-input" type="checkbox" name="data_tuijian" value="3" title="选3">
</div>
</div>
<div>
<button type="button" class="layui-btn" data-type="reload" lay-filter="demo-table-search">搜索</button>
</div>
</form>
</div>
</fieldset>
</div>
<!--表格处理-->
<div style="margin-left:1.1rem!important;margin-right:1.1rem!important;">
<table class="layui-hide" id="demo" lay-filter="test"></table>
</div>
<script type="text/html" id="table_zidingyi">
<ul style="text-align: left">
<li><strong>ID:</strong>1 </li>
<li><strong>用户:</strong> 2</li>
<li><strong>性别:</strong> 3 </li>
<li><strong>城市:</strong> 4 </li>
</ul>
</script>
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="add" style="width: 100px;">创建</button>
<button class="layui-btn layui-btn-sm layui-btn-warm" lay-event="layui_form_update" style="width: 100px;background-color: #428bca;border:1px #428bca solid;color:#ffffff;">layui创建</button>
<button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="derive" style="width: 100px;">导出excel</button>
</div>
</script>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<!--判断处理-->
{{# if(d.goods_id != 64){ }}
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
{{# } }}
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
<a class="layui-btn layui-btn-xs" lay-event="more">更多 <i class="layui-icon layui-icon-down"></i></a>
<!--字段值循环处理-->
{{# var cityList = d.img}}
{{# layui.each(cityList,function(index,item){ }}
<!--内容-->
{{# }); }}
</script>
<script type="text/html" id="switchTpl">
<input type="checkbox" name="is_sold" value="{{d.goods_id}}" lay-skin="switch" lay-text="是|否" lay-filter="is_sold_Demo" {{d.is_sold == 1?'checked' : '' }} />
</script>
<!--列表缩略图-->
<script type="text/html" id="img">
<img src="{{d.img}}" style="" width="28" height="21" onclick="showBigImage('{{d.img}}','{{d.goods_id}}')" alt=""/>
</script>
</div>
<script>
layui.use(function(){
//定义全局变量
window.check_reload = function () {
table.reload('demo');
return true;
};
// 得到需要的内置组件
var layer = layui.layer; //弹层
var table = layui.table
,form = layui.form; //表格
var dropdown = layui.dropdown; //下拉菜单
var checkedValues = {};
// 执行一个 table 实例
table.render({
elem: '#demo'
,height: 600
,lineStyle: 'height: 150px;' //定义表格的多行样式
,url: "<?php echo Url('Copy/layui_list_ajax'); ?>" //数据接口（此处为静态数据，仅作演示）
,title: '用户表'
,page: true //开启分页
,limit:20
//,where:{'user_id':1}//参数
,toolbar: '#toolbarDemo' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
//,toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
//,defaultToolbar: ['filter', 'exports']//自定义右侧
,defaultToolbar: ['filter',{title:'提示',layEvent: 'derive',icon: 'layui-icon-export'}]//自定义右侧
,totalRow: true //开启合计行
,cols: [[ //表头
{type: 'checkbox', fixed: 'left'}
,{field: 'goods_id', title: 'ID', width:80, sort: true,totalRowText: '合计：'}
,{field:'', width:180, title: '自定义信息',align:'center',templet: '#table_zidingyi'}
,{field: 'img', title: '缩略图', minWidth: 10,width:80,align: 'center',templet:'#img' ,hide: true}//默认隐藏
,{field: 'name', title: '产品名称', width:400}
,{field: 'price', title: '本店售价', width: 150, sort: true, totalRow: true}
,{field:'is_sold', title:'是否上架', width:100,align: 'center', templet: '#switchTpl', unresize: true}
,{field: 'is_competitive', title: '是否精品', width: 130,templet:field_is_competitive}
,{field: 'is_new', title: '是否新品', width:130}
,{field: 'is_discounts', title: '是否特惠', width: 130}
,{field: 'stocks', title: '库存数量', width: 100,templet:field_custom}
,{field: 'add_time', title: '创建时间', width: 155, sort: true}
,{fixed: 'right', title: '操作', width: 240, align:'center', toolbar: '#barDemo'}
]],response: {
statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
}, done: function (res, curr, count) {
//循环 table 中的数据
res.data.forEach(function(item,index,self){
//判断想要改变的条件
if (item.is_sold == 0){
//给表格设置背景色
$('.layui-table').find('tr[data-index ='+index+']').css("background-color","#da4a40");
$('.layui-table').find('tr[data-index ='+index+']').css("color","#ffffff");
}
});
//隐藏列
//$("[data-field='name']").css('display', 'none');
// table.hideCol('demo', [
// {field: 'shop_name', hide: false}, //false展示 true隐藏
// ]);
//修改标题名称
//$("[data-field='name']").find('span').text('修改列名[备注]');
/*自定义统计数据（先开启统计数据）*/
console.log($('#keyword').val());
//...自定义统计逻辑 并修改显示
this.elem.next().find('.layui-table-total td[data-field="price"] .layui-table-cell').text("自定义统计：12");
this.elem.next().find('.layui-table-total td[data-field="price"] .layui-table-cell').css("color","red");
this.elem.next().find('.layui-table-total td[data-field="price"] .layui-table-cell').css('width','10000');
//this.elem.next().find('.layui-table-total td[data-field="img"] .layui-table-cell').remove();//移除(会有边框)
//this.elem.next().find('.layui-table-total td[data-field="img"]').remove();//移除(都消失)
}
});
/*设置字段*/
function field_custom(data){
if (data.stocks == 0){
return "<span style='color:red;'>0</span>"
}else{
return data.stocks;
}
}
function field_is_competitive(data){
if (data.is_competitive == 0){
return '<button type="button" class="layui-btn layui-btn-xs layui-btn-radius" style="width: 70px;height: 22px;line-height: 21px;transform: scale(0.9);background-color:#da4a40">未显示</button>';
}else{
return '<button type="button" class="layui-btn layui-btn-xs layui-btn-radius" style="width: 70px;height: 22px;line-height: 21px;transform: scale(0.9);">已显示</button>';
}
}
/*是否上架*/
form.on('switch(is_sold_Demo)', function(obj){
/*手动修改状态*/
// obj.elem.checked = false;
// form.render();
req_post("<?php echo Url('Goods/is_sold_ajax'); ?>",{'goods_id':this.value}).then(res=>{
});
});
/*单元格编辑监听事件*/
table.on('edit(test)',function(obj){
var stocks = obj.data.stocks;
var reg = /(^-?\d+$)/;
if(!reg.test(stocks)){
parent.layer.msg('格式错误', {shift: 2});
return false;
}else{
req_post("<?php echo Url('Ad/act_sort_edit'); ?>",{'id':obj.data.goods_id,'sort':stocks}).then(res=>{
});
}
})
/*选项改变*/
form.on('select(canteen_id_sousuo)', function (data) {
var value = data.value;
console.log(value);
// 如果想修改select值则渲染数据
// var html = '';
// $("#canteen_id_sousuo").html(html);
// form.render();
});
/*搜索处理*/
var $ = layui.$, active = {
reload: function(){
//执行重载
table.reload('demo', {
page: {
curr: 1 //重新从第 1 页开始
}
,where: {
keyword:$('#keyword').val(),
}
});
},
};
$('.demoTable .layui-btn').on('click', function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
/*左侧多选列表*/
layui.use(function(){
var tree = layui.tree
var data = [
{title:'早餐',id:1,spread:true,children:[
{title:'拌粉',id:5},
{title:'蒸饺',id:6},
{title:'豆浆',id:7}]
},
{title:'午餐',id:2,spread:true,children:[
{title:'藜蒿炒腊肉',id:8},{title:'西湖醋鱼',id:9},{title:'小白菜',id:10},{title:'海带排骨汤',id:11}]
},
{title:'夜宵',id:4,spread:true,children:[
{title:'小龙虾',id:14},{title:'香辣蟹',id:15},{title:'烤鱿鱼',id:16}]
},
{title:'夜宵2',id:12,spread:true}
];
//渲染
tree.render({
elem: '#ID-tree-demo-showCheckbox',
data: data,
showCheckbox: true,
showLine:true,//是否开启节点连接线
edit: [] // 开启节点的右侧操作图标
});
});
/*左侧多选列表-选中处理*/
layui.use(['form'], function() {
var form = layui.form;
// 获取已选中的值
form.on('checkbox', function(data){
let name = data.elem.name;
let value = data.elem.value;
if (data.elem.value != 'on') {
if (name != 'data_tuijian'){
if (data.elem.checked) {
checkedValues[data.value] = data.value;
} else {
delete checkedValues[data.value];
}
//执行重载
table.reload('demo', {
page: {
curr: 1 //重新从第 1 页开始
}
, where: {
checked_act_id: checkedValues,
}
});
}
}
});
});
/*头工具栏事件*/
table.on('toolbar(test)', function(obj){
//根据userAgent判断是否是手机
var mobile_flag = false;
var mobileAgents = [ "Android", "iPhone", "SymbianOS", "Windows Phone", "iPad","iPod"];
var userAgentInfo = navigator.userAgent;
for (var v = 0; v < mobileAgents.length; v++) {
if (userAgentInfo.indexOf(mobileAgents[v]) > 0) {
mobile_flag = true;
break;
}
}
if (mobile_flag == true){
var form_w = '21rem';
var form_h = '48rem';
}else{
var form_w = '70rem';
var form_h = '40rem';
}
var checkStatus = table.checkStatus(obj.config.id)
,data = checkStatus.data; //获取选中的数据
switch(obj.event){
case 'add':
var isClose = false;
parent.layer.open({
type: 2,
title: '创建',
shadeClose: true,
shade: 0.5,
maxmin: true, //开启最大化最小化按钮
area: ['70%','80%'],
content: '/admin/Copy/create',
end:function(res,err) {
}
});
break;
case 'layui_form_update':
parent.layer.open({
type: 2,
title: 'layui表单处理',
shadeClose: true,
shade: 0.5,
maxmin: true, //开启最大化最小化按钮
area: ['70%','80%'],
content: '/admin/Copy/layui_form_update',
end:function(res,err) {
}
});
break;
case 'update':
if(data.length === 0){
layer.msg('请选择一行');
} else if(data.length > 1){
layer.msg('只能同时编辑一个');
} else {
parent.layer.open({
type: 2,
title: '编辑',
shadeClose: true,
shade: 0.5,
maxmin: true, //开启最大化最小化按钮
area: [form_w,form_h],
content: '/admin/Copy/create?id='+data[0].goods_id,
end:function() {
}
});
}
break;
case 'delete':
if(data.length === 0){
layer.msg('请选择一行');
} else {
var id = '';//获取全部ID
data.forEach(function(value,index,array){
id += value["goods_id"]+",";
})
id = id.substring(0, id.length - 1);
console.log('执行删除');
}
break;
case 'derive':
/*导出逻辑*/
layer.msg("请写导出处理逻辑", {icon: 2,time:1800});
break;
};
});
/*表格工具事件*/
table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
var data = obj.data //获得当前行数据
,layEvent = obj.event; //获得 lay-event 对应的值
if(layEvent === 'edit'){
parent.layer.open({
type: 2,
title: '编辑',
shadeClose: true,
shade: 0.5,
maxmin: true, //开启最大化最小化按钮
area: ['70%','80%'],
content: '/admin/Copy/create?id='+data.goods_id,
end:function() {
}
});
}else if(layEvent === 'del'){
parent.layer.confirm('您确定删除么？', {
btn: ['确定', '取消'], //按钮
shade: false //不显示遮罩
}, function () {
//执行关闭
var index = parent.layer.confirm();
parent.layer.close(index);
console.log('删除成功');
table.reload('demo');
}, function () {
parent.layer.msg('已取消', {shift: 2});
});
}else if(layEvent === 'more'){
//下拉菜单
dropdown.render({
elem: this //触发事件的 DOM 对象
,show: true //外部事件触发即显示
,data: [{
title: '编辑2'
,id: 'edit'
},{
title: '删除2'
,id: 'del'
}]
,click: function(menudata){
if(menudata.id === 'del'){
} else if(menudata.id === 'edit'){
console.log('编辑处理2');
}
}
,align: 'right' //右对齐弹出
,style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' //设置额外样式
})
}
});
});
/*缩略图点击放大*/
function showBigImage(img,id) {
layer.open({
type: 1,
title: false,
closeBtn: 0,
shadeClose: true, //点击阴影关闭
content: "<img src=" + img + " />"
});
}
/*表单提交成功*/
function Fromsucceed(){
check_reload();
}
</script>
</body>
</html>