layui点击按钮查看图片、视频,图片预览,状态改文字

<script>
layui.use(['form', 'table', 'tablePlug', 'kpForm'], function () {
var $ = layui.jquery,
form = layui.form,
table = layui.table,
kpForm = layui.kpForm,
tabePlug = layui.tablePlug;

 

// 表格渲染
table.render({
elem: '#currentTableId',
url: FParam.WebApi + url.getJournalismInfo,
method: 'post',
where: {
data: JSON.stringify(obj)
},
toolbar: '#toolbarDemo',
defaultToolbar: ['', '', ''],
cols: [[ //表头
//{ field: 'Picture', title: '图片', templet: '<div><img src="{{d.JournalismPicture}}" onclick="imgcli(this)" /></div>', sort: true },
//{ field: 'Video', title: '新闻视频', templet: '<div><video src="{{d.JournalismVideo}} " /></div>', sort: true },
{
field: 'JournalismStatus', title: '审批状态', sort: true, templet: function (d) {
if (d.JournalismStatus == 1) {
res = "<span class=\"layui-badge\">正在审核</span>"
} else if (d.JournalismStatus == 0) {
res = "<span class=\"layui-badge layui-bg-blue\">审核通过</span>"
}
return res;
}},
{ title: '操作', width: 300, toolbar: '#currentTableBar', fixed: "right", align: "center" }
]],
limit: 10, //每页默认显示的数量
limits: [10, 20, 25, 50, 100],
page: { //支持传入 laypage 组件的所有参数(某些参数除外,如:jump/elem) - 详见文档
layout: ['limit', 'prev', 'page', 'next'] //自定义分页布局
//,curr: 5 //设定初始在第 5 页
, groups: 3 //只显示 1 个连续页码
, first: false //不显示首页
, last: false //不显示尾页
},
});

table.on('toolbar(currentTableFilter)', function (obj) {if (obj.event === 'video') {

//点击按钮查看视频
var loadstr = '<video width="100%" height="100%" controls="controls" autobuffer="autobuffer" autoplay="autoplay" loop="loop"><source src="' + data.Video + '" type="video/mp4"></source></video>'
layer.open({
type: 1,
area: ['800px', '600px'],
title: '播放视频',
content: loadstr,
});
} else if (obj.event === 'image') {
//点击按钮查看图片
layer.open({
type: 1,
title: false,
closeBtn: 1,
shadeClose: true,
area: ['800px', '600px'], //宽高
content: '<img width="100%" height="100%" src="' + data.Picture + '" />'
});
}

});
});
//点击图片预览
$('#divimg').click(function () { $(this).fadeOut(200) })
function imgcli(obj) {
$('#divimg').fadeIn(200);
$('#divimg img').attr('src', $(obj).attr("src"));
$('#divimg img').css("margin-top", "-" + $('#divimg img').height() / 2 + "px")
}
</script>

posted @   疾风回荡寻真途  阅读(1761)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· 三行代码完成国际化适配,妙~啊~
· .NET Core 中如何实现缓存的预热?
· 如何调用 DeepSeek 的自然语言处理 API 接口并集成到在线客服系统
点击右上角即可分享
微信分享提示