因为项目基于layui库,并且需要在表格里面嵌入select表单元素,选择改变数据之后需要提交改变后的数据,所以记录一下实现的方法。
以下是实现的一个小测试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="layui/css/layui.css">
<style>
.layui-form-select .layui-input {
height: 28px;
width: 100%;
}
.wrap_button{
text-align: center;
margin-top:20px;
}
</style>
</head>
<body>
<table class="layui-table" id="demo" lay-filter="test"></table>
<div class="wrap_button">
<button type="button" class="layui-btn commit">提交</button>
<button type="button" class="layui-btn">取消</button>
</div>
<script src="jquery/jquery-2.2.4.min.js"></script>
<script src="layui/layui.js"></script>
<script>
var data = [
{
"studentId":"20191117747",
"name":"lisa",
"sex":"女",
"major":"计算机",
"direction":"",
},
{
"studentId":"20191117735",
"name":"bonnie",
"sex":"女",
"major":"计算机",
"direction":"",
},
{
"studentId":"20191117727",
"name":"mark",
"sex":"男",
"major":"计算机",
"direction":"",
},
{
"studentId":"20191117712",
"name":"tom",
"sex":"男",
"major":"计算机",
"direction":"",
},{
"studentId":"20191117714",
"name":"Selena",
"sex":"女",
"major":"计算机",
"direction":"",
},{
"studentId":"20191117736",
"name":"jackson",
"sex":"男",
"major":"计算机",
"direction":"",
}
]
layui.use(['table','form'], function(){
var table = layui.table,
form = layui.form;
table.render({
elem: '#demo'
,data:data
,cols: [[ //表头
{type: 'checkbox'}
,{field: 'studentId', title: '学号'}
,{field: 'name', title: '姓名'}
,{field: 'sex', title: '性别'}
,{field: 'major', title: '专业'}
,{field: 'direction', title: '方向选择',templet: '<div><select name="direction" lay-filter="choice"><option value="">请选择</option><option value="前端">前端</option><option value="后台">后台</option></div>'
}
]]
,done: function(res){
form.render();
// 让被遮住的option显示
$(".layui-table-body,.layui-table-box,.layui-table-body td:nth-child(6) .layui-table-cell").css('overflow', 'visible');
}
});
// 监听select选择改变对应table的值
form.on('select(choice)', function(data){
var selectData = data.value; //得到被选中的值
var inx = $(this).parents('tr').index(); // 操作那一行数据的index
var tableData = table.cache['demo']; //获取表格缓存数据
tableData[inx].direction = selectData //将选择的值赋值给表格对应行的对应字段
})
$('.layui-btn.commit').click(function(){
var checkStatus = table.checkStatus('demo');
console.log(checkStatus.data);
});
});
</script>
</body>
</html>
效果: