<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="/static/css/layui.css">
</head>
<body>
<table id="userinfo" lay-filter="lay-filter-userinfo"></table>
<script type="text/html" id="barDemo">
<div class="layui-clear-space">
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">
更多
<i class="layui-icon layui-icon-down"></i>
</a>
</div>
</script>
</body>
<script src="/static/js/layui.js"></script>
<script type="text/html" id="city">
{% raw %}
{{# if(d.info.city){ }}
{{ d.info.city }}
{{# } else { }}
none
{{# } }}
{% endraw %}
</script>
<script type="text/html" id="addr">
{% raw %}
{{# if(d.info.addr){ }}
{{ d.info.addr }}
{{# } else { }}
none
{{# } }}
{% endraw %}
</script>
<script id="operation" type="text/html">
<!-- 动态显示按钮 -->
{% raw %}
{{# if(d.info.city == "北京"){ }}
<button type="button" lay-on="marksuccess" class="layui-btn layui-btn-xs">标记成功</button>
{{# } else { }}
<button type="button" class="layui-btn layui-btn-xs layui-btn-disabled">标记成功</button>
{{# } }}
{% endraw %}
</script>
<script>
{% raw %}
layui.use(['table', 'dropdown', 'util', 'form'], function(){
var table = layui.table;
var dropdown = layui.dropdown;
var util = layui.util;
var form = layui.form;
var $ = layui.$
//渲染table表
table.render({
elem: '#userinfo' // table的i
,height: 312
,url: '/aaa' //数据接口
,method: 'POST' // 请求方式
,cols: [[ //表头
{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
,{field: 'name', title: '用户名', width:80, sort: true}
,{field: 'sex', title: '性别', width:80, sort: true}
,{field: 'city', title: '城市', width:80, templet: '#city'}
,{field: 'addr', title: '地址', width: 177, templet: '#addr'}
,{title:'操作', width: 100, minWidth: 80, toolbar: '#barDemo'}
,{ title:'操作2(动态)', width: 100, minWidth: 80, templet: '#operation'}
]],
});
// tool里面的不是table的ID,而是table中设置的属性:lay-filter的值,如果没有此属性需要增加
table.on('tool(lay-filter-userinfo)', function(obj) { // 双击 toolDouble
var data = obj.data; // 获得当前行数据
console.log(data)
console.log(obj)
if (obj.event === 'edit') {
// 更多 - 下拉菜单
dropdown.render({
elem: this, // 触发事件的 DOM 对象
show: true, // 外部事件触发即显示
data: [{
title: '标记成功',
id: 'success',
templet: '<button type="button" class="layui-btn layui-btn-xs">{{= d.title }}</button>',
}, {
title: '标记失败',
id: 'failed',
templet: '<button type="button" class="layui-btn layui-bg-red layui-btn-xs">{{= d.title }}</button>'
}],
click: function (menudata) {
if (menudata.id === 'success') {
console.log(data)// 这个data是后端穿过来的内容
layer.msg('查看操作,当前行 ID:' + data.id + ',name' + data.name + ',city' + data.info.city);
} else if (menudata.id === 'failed') {
layer.confirm('真的删除行 [id: ' + data.id + '] 么', function (index) {
obj.del(); // 删除对应行(tr)的DOM结构
layer.msg("删除成功")
// layer.close(index);
console.log(index)
// 向服务端发送删除指令
});
}
},
align: 'right', // 右对齐弹出
style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' // 设置额外样式
})
} else if (obj.event === 'markfailed2') {
layer.confirm('真的删除行 [id: ' + data.id + '] 么', function (index) {
console.log(index)
// 向服务端发送删除指令
});
}
});
// 标记TaskRun回调函数
util.on('lay-on', {
'marksuccess': function(){
layer.open({
type: 1,
area: '350px',
resize: false,
shadeClose: true,
title: '标记TaskRun',
content: `
<div class="layui-form" lay-filter="filter-test-layer" style="margin: 16px;">
<div class="demo-login-container">
<div class="layui-form-item">
<div class="layui-input-wrap">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-username"></i>
</div>
<textarea name="aone_url_1" placeholder="输入aone bug url,回车输入多个url" class="layui-textarea" lay-verify="required"></textarea>
<!-- <input type="text" name="aone_url" value="" lay-verify="required" placeholder="aone bug url" lay-reqtext="请填Aone Bug Url" autocomplete="off" class="layui-input" lay-affix="clear">-->
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-wrap">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-password"></i>
</div>
<input type="text" name="reason" value="" lay-verify="required" placeholder="标记成功说明" lay-reqtext="请填标记成功原因" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-login">提交</button>
</div>
</div>
</div>
`, // 表格内容
success: function(){
// 对弹层中的表单进行初始化渲染
form.render();
// 表单提交事件
form.on('submit(demo-login)', function(data){
var field = data.field; // 获取表单字段值
// 此处可执行 Ajax 等操作
$.ajax({
type: "POST",
url: '/test', // 服务器处理地址
dataType: 'json', // 返回类型为 JSON
contentType: "application/json", // 指定请求头部信息
data: JSON.stringify(field), // 将表单序列化为 JSON 字符串
success: function (res) {
// 根据code来判断是否成功
if (res.code === 0) {
layer.msg("提交成功!");
} else {
layer.msg("提交失败:" + res.message);
}
},
error: function () {
layer.msg("网络错误,请重试!");
}
});
return false; // 阻止默认 form 跳转
});
}
});
}
});
});
{% endraw %}
</script>
</html>
layui
发布时间 2024-01-09 01:10:10作者: lxd670