tableSelect联动选择框

  1. 实现效果
    测试
  2. 代码
    <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);
    							}
    						});
    				}
    			});
    		});
    	});
    
  3. 遇到的问题

    在奖品搜索时,出现不把原有的where条件传过去(layui-v2.4.3出现这种情况,layui-v2.5.6未出现这种情况)
  4. 解决方法(出处)
    修改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;
            });
    
posted @ 2021-03-03 19:26  JaminYe  阅读(327)  评论(0编辑  收藏  举报