layui表格内下拉框联动的实现
可把下列代码在https://www.layui.com/demo地址内演示
<!DOCTYPE html>
<html>
<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">
<title>layui在线调试</title>
<link rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css?t=1586046995308" media="all">
<style>
body{margin: 10px;}
.demo-carousel{height: 200px; line-height: 200px; text-align: center;}
/* 防止下拉框的下拉列表被隐藏---必须设置--- */
.layui-table-cell {
overflow: visible;
}
</style>
</head>
<body>
<table class="layui-hide" id="demo" lay-filter="test"></table>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="checkChildTypeTpl">
<select name="{{d.name}}" lay-filter="{{d.filter}}">
<option value=""></option>
{{# layui.each(d.data, function(index,item){ }}
<option value="{{item.value}}" {{item.value == d.value ? 'selected' : ''}}>{{item.name}}</option>
{{# }) }}
</select>
</script>
<script src="//res.layui.com/layui/dist/layui.js?t=1586046995308"></script>
<script>
layui.config({
version: '1586046995308' //为了更新 js 缓存，可忽略
});
layui.use(['laydate', 'laypage', 'layer', 'laytpl', 'table', 'carousel', 'upload', 'element', 'slider'], function () {
var layer = layui.layer //弹层
, table = layui.table //表格
var laytpl = layui.laytpl;
var $ = layui.$;
var form = layui.form;
//模拟ajax 同步获取数据
var checkChildTypeData = [{name: '男', value: '男'}, {name: '女', value: '女'}]
//根据性别获取职业
function getClassifyData(value) {
if (value == '男') {
return [{name: '作家', value: '作家'}, {name: '词人', value: '词人'}]
} else if (value == '女') {
return [{name: '画家', value: '画家'}, {name: '舞蹈', value: '舞蹈'}]
}
return [];
}
//执行一个 table 实例
table.render({
elem: '#demo'
, height: 420
, url: '/demo/table/user/' //数据接口
, title: '用户表'
, page: true //开启分页
, toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
, totalRow: true //开启合计行
, cols: [[ //表头
{type: 'checkbox', fixed: 'left'}
, {field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left', totalRowText: '合计：'}
, {field: 'username', title: '用户名', width: 80}
, {field: 'experience', title: '积分', width: 90, sort: true, totalRow: true}
, {
event: 'sex', title: '性别', width: 80, sort: true, templet: function (d) {
return laytpl($('#checkChildTypeTpl').html()).render({
name: 'sex',
filter: 'sex',
value: d.sex,
data: checkChildTypeData
});
}
}
, {
event: 'classify', title: '职业', width: 80, templet: function (d) {
var classifyData = getClassifyData(d.sex)
return laytpl($('#checkChildTypeTpl').html()).render({
name: 'classify',
filter: 'classify',
value: d.classify,
data: classifyData
});
}
}
, {field: 'city', title: '城市', width: 150}
]], done: function () {
layui.form.render();
}
});
//操作栏操作按钮的事件
table.on('tool(test)', function (obj) {
switch (obj.event) {
case 'sex':
form.on('select(sex)', function (data) {
//得到被选中的值
obj.update({sex: data.value});
var classifyData = getClassifyData(data.value)
//级联更新下拉
obj.tr.find('td[lay-event="classify"]>.layui-table-cell').html(laytpl($('#checkChildTypeTpl').html()).render({
name: 'classify',
filter: 'classify',
data: classifyData
})
);
form.render();
});
break;
}
});
});
</script>
</body>
</html>