<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试记录</title>
<link rel="stylesheet" href="layuiNew/css/layui.css">
</head>
<style>
#layui-layer1 > div.layui-layer-content > form > div > label{
width: 110px !important;
}
#layui-layer1 > div.layui-layer-content > form > div > div{
margin-left: 143px !important;
}
</style>
<body>
<table class="layui-hide" id="testRecordTable" lay-filter="testRecordTable"></table>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
<a class="layui-btn layui-btn-xs" lay-event="del">删除</a>
</script>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="layuiNew/layui.js"></script>
</body>
<script>
layui.use(function () {
var form = layui.form;
var table = layui.table;
var util = layui.util;
var tableData = [
{
"id": 1,
"csrq": "2023-10-23",
"csr": "张三",
"cshj": "开发环境",
"csmk": "用户管理",
"csgn": "添加用户、删除用户功能",
"wtms": "用户添加时，页面报错",
"kfcljg": "已修复",
"kfclsm": "修复了用户添加时的页面报错问题",
"csqrjg": "通过",
"csqrsm": "测试通过，功能正常",
},
{
"id": 2,
"csrq": "2023-10-22",
"csr": "李四",
"cshj": "测试环境",
"csmk": "订单管理",
"csgn": "查看订单、修改订单状态功能",
"wtms": "修改订单状态时，数据未保存",
"kfcljg": "待处理",
"kfclsm": "需要进一步调查问题原因",
"csqrjg": "",
"csqrsm": "",
},
{
"id": 3,
"csrq": "2023-10-21",
"csr": "王五",
"cshj": "生产环境",
"csmk": "支付功能",
"csgn": "支付宝、微信支付功能",
"wtms": "支付宝支付时，页面卡顿",
"kfcljg": "已优化",
"kfclsm": "优化了支付页面的性能",
"csqrjg": "通过",
"csqrsm": "测试通过，支付流畅",
}
]
// 根据返回数据中某个字段来判断开启该行的编辑
var editable = function (d) {
if (d.editable) return 'text'; // 这里假设以 editable 字段为判断依据
};
// 创建表格实例
table.render({
elem: '#testRecordTable',
page: true,
css: [
'.layui-table-view td[data-edit]{color: #16B777;}', //高亮可以编辑的单元格
'.layui-table-page{text-align: center;}' // 让分页栏居中
].join(''),
cols: [[
{field: 'id', hide: true, title: 'id', align: 'center'},
{field: 'csrq', title: '测试日期', align: 'center'},
{field: 'csr', title: '测试人', align: 'center'},
{field: 'cshj', title: '测试环境', align: 'center'},
{field: 'csmk', title: '功能模块', align: 'center'},
{field: 'csgn', title: '功能描述', align: 'center'},
{field: 'wtms', title: '问题描述', align: 'center'},
{field: 'kfcljg', title: '开发处理结果', align: 'center', edit: true},
{field: 'kfclsm', title: '开发处理说明', align: 'center', edit: true},
{field: 'csqrjg', title: '测试确认结果', align: 'center', edit: true},
{field: 'csqrsm', title: '测试确认说明', align: 'center', edit: true},
{title: '操作', align: 'center', toolbar: '#barDemo'},
]],
data: tableData,
skin: "nob",
page: true,
limits: [5, 10, 15],
limit: 15
});
// 单元格编辑后的事件
table.on('edit(testRecordTable)', function (obj) {
var field = obj.field; // 得到修改的字段
var value = obj.value // 得到修改后的值
var oldValue = obj.oldValue // 得到修改前的值 -- v2.8.0 新增
var data = obj.data // 得到所在行所有键值
var col = obj.getCol(); // 得到当前列的表头配置属性 -- v2.8.0 新增
// 值的校验
if (value.replace(/\s/g, '') === '') {
layer.tips('值不能为空', this, {tips: 1});
return obj.reedit(); // 重新编辑 -- v2.8.0 新增
}
// 编辑后续操作，如提交更新请求，以完成真实的数据更新
// …
// 显示 - 仅用于演示
layer.msg('[ID: ' + data.id + '] ' + field + ' 字段更改值为：' + util.escape(value));
});
table.on('tool(testRecordTable)', function (obj) {
var data = obj.data;
if (obj.event === 'del') {
layer.confirm('真的删除吗？', function (index) {
layer.msg(JSON.stringify(data))
layer.close(index);
});
}
if (obj.event === 'detail') {
layer.open({
type: 1, // page 层类型
area: ['700px', '850px'],
title: '测试记录',
shade: 0.6, // 遮罩透明度
shadeClose: true, // 点击遮罩区域，关闭弹层
maxmin: true, // 允许全屏最小化
anim: 0, // 0-6 的动画形式，-1 不开启
content: `<form class="layui-form" action="" lay-filter="detailForm" style="margin-top: 20px;">
<div class="layui-form-item">
<label class="layui-form-label">测试日期：</label>
<div class="layui-input-block">
<input type="text" name="csrq" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">测试人：</label>
<div class="layui-input-block">
<input type="text" name="csr" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">测试环境：</label>
<div class="layui-input-block">
<input type="text" name="cshj" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">功能模块：</label>
<div class="layui-input-block">
<input type="text" name="csmk" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">功能描述：</label>
<div class="layui-input-block">
<textarea name="csgn" placeholder="请输入内容" class="layui-textarea"></textarea>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">问题描述：</label>
<div class="layui-input-block">
<textarea name="wtms" placeholder="请输入内容" class="layui-textarea"></textarea>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">开发处理结果：</label>
<div class="layui-input-block">
<input type="text" name="kfcljg" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">开发处理说明：</label>
<div class="layui-input-block">
<textarea name="kfclsm" placeholder="请输入内容" class="layui-textarea"></textarea>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">测试确认结果：</label>
<div class="layui-input-block">
<input type="text" name="csqrjg" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">测试确认说明：</label>
<div class="layui-input-block">
<textarea name="csqrsm" placeholder="请输入内容" class="layui-textarea"></textarea>
</div>
</div>
</form>
`
,success: function(layero, index){
form.val('detailForm', data);
}
});
}
});
});
</script>
</html>主要是在layer渲染成功之后的success回调函数中调用form.val()方法
3636
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
