代码<form class="layui-form">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">活动名称:</label>
<div class="layui-input-inline">
<input type="text" id="activityName" readonly="readonly" />
<input type="text" id="activityId" />
</div>
</div>
<div class="layui-inline" id="activityDiv">
<label class="layui-form-label">奖品:</label>
<div class="layui-input-inline">
<input type="text" id="awardName" readonly="readonly" />
<input type="text" id="awardId" readonly="readonly" />
</div>
</div>
</div>
</form>
// 加载tableSelect
layui.config({
base: 'layui-v2.5.6/layui/lay/modules/' //假设这是test.js所在的目录 可以把你需要扩展的js插件都放在一个文件夹内
}).extend({ //设定组件别名
tableSelect: 'tableSelect'
});
layui.use(['tableSelect'], function() {
var table = layui.table,
layer = layui.layer,
laydate = layui.laydate,
tableSelect = layui.tableSelect,
form = layui.form, //form表单
$ = layui.$;
$(function() {
tableSelect.render({
elem: '#activityName', //定义输入框input对象
checkedKey: 'id', //表格的唯一建值,非常重要,影响到选中状态 必填
searchKey: 'activityName', //搜索输入框的name值 默认keyword
searchPlaceholder: '活动名称搜索', //搜索输入框的提示文字 默认关键词搜索
table: { //定义表格参数,与LAYUI的TABLE模块一致,只是无需再定义表格elem
url: 'http://localhost:8080/activityList',
// where:keyword
cols: [
[{
type: 'radio'
},
{
title: '活动名称',
field: 'name',
align:'center'
}
]
]
},
done: function(elem, data) {
//监听活动选择加载奖品列表
//活动id
var id = data.data[0].id;
var name = data.data[0].name;
// $("#activityDiv").show();
$("#activityId").val(id);
$("#activityName").val(name);
tableSelect.render({
elem: '#awardName', //定义输入框input对象
checkedKey: 'id', //表格的唯一建值,非常重要,影响到选中状态 必填
searchKey: 'awardName', //搜索输入框的name值 默认keyword
searchPlaceholder: '奖品名称搜索', //搜索输入框的提示文字 默认关键词搜索
table: { //定义表格参数,与LAYUI的TABLE模块一致,只是无需再定义表格elem
url: 'http://localhost:8080/awardList',
where: {
"activityId": $("#activityId").val()
},
cols: [
[{
type: 'radio'
},
{
title: '奖品名称',
align:'center',
field: 'name'
}
]
]
},
done: function(elem, data) {
//活动id
var id = data.data[0].id;
var name = data.data[0].name;
$("#awardId").val(id);
$("#awardName").val(name);
}
});
}
});
});
});