tableSelect联动选择框
- 实现效果
- 代码
<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); } }); } }); }); });
- 遇到的问题
在奖品搜索时,出现不把原有的where条件传过去(layui-v2.4.3出现这种情况,layui-v2.5.6未出现这种情况) - 解决方法(出处)
修改tableSelect源码,在提交表单时添加where条件form.on('submit(tableSelect_btn_search)', function (data) { $.each(tableSelect_table.config.where, function (i,v) { data.field[i] =v; }); tableSelect_table.reload({ where: data.field, page: { curr: 1 } }); return false; });
作者: JaminYe
版权声明:本文原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。