表格+分页+筛选
layui.use(['table'], function () {
var table = layui.table;
table.render({
elem: '#order_data'
, url: "{:url('rateData')}"
, size: 'lg'
, cols: [[
{ type: 'checkbox', fixed: 'left' }
, { field: 'order_number', title: '订单编号', align: 'center' }
, { field:'createDate', title: '退货日期',templet:'<div>{{ layui.util.toDateString(d.createDate*1000, "yyyy-MM-dd HH:mm:ss") }}</div>',minWidth:150}
]]
, id: 'idTest'
, page: true
, height: 'full-300'
, limits: [5, 10, 20, 50, 100, 150]
, limit: 10
});
var $ = layui.$, active = {
reload: function () {
table.reload('idTest', {
page: {
curr: 1
}
, where: {
order_number: $("#order_number").val()
}
});
}
};
}
图片上传
var uploadInst = upload.render({
elem: '#test1'
, url: "{:url('Common/Common/imgupdate')}"
, before: function (obj) {
obj.preview(function (index, file, result) {
$('#product_pic').attr('src', result);
});
layer.msg('图片上传中...', {
icon: 16,
shade: 0.01,
time: 0
})
}
, done: function (res) {
layer.close(layer.msg());
if (res.code > 0) {
return layer.msg('上传失败');
}
$("#goods_image").val(res.file);
}
, error: function () {
var demoText = $('#demoText');
demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
demoText.find('.demo-reload').on('click', function () {
uploadInst.upload();
});
}
});
});
时间组件
laydate.render({
elem: '.laydate-format'
, type: 'time'
, min: '01:00:00'
, format: 'H点M分'
});
laydate.render({
elem: '#test11'
, min: '01:00:00'
, format: 'yyyy年MM月dd日'
});
弹窗
layer.msg(data.msg, {
skin: "#ff0080",
icon: 1,
time: 1000,
}, function () {
location.reload();
});
弹出层
layer.open({
type: 2,
title: '弹出层',
shadeClose: true,
shade: 0.8,
anim: -1,
id: 'layadmin-layer-skin-test',
skin: 'layui-anim layui-anim-upbit',
area: ['600px', '700px'],
content: ["http://www.baidu.com"],
end: function () {}
});
关闭弹出层
yes: function (index, layero) {
layer.close(index);
}
确认层
layer.confirm('确认放弃该订单的评价?', {
btn: ['确认', '关闭']
}, function () {
}, function () {
});
提示层
layer.tips('11111', '.demo-component-layer', {
tips: 3, time: 5000
});
图片展示层
layer.photos({
photos: { "data": [{ "src": data.goods_image }] }
, anim: 5
});
tab切换
<div class="layui-tab">
<ul class="layui-tab-title">
<li class="layui-this">网站设置</li>
<li>用户管理</li>
<li>权限分配</li>
<li>商品管理</li>
<li>订单管理</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">内容1</div>
<div class="layui-tab-item">内容2</div>
<div class="layui-tab-item">内容3</div>
<div class="layui-tab-item">内容4</div>
<div class="layui-tab-item">内容5</div>
</div>
</div>
<script>
layui.use('element', function(){
var element = layui.element;
});
</script>