标签：name layui tableSelect 选择 where 联动 data id

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;
           });
   

标签：name,layui,tableSelect,选择,where,联动,data,id
来源： https://www.cnblogs.com/JaminYe/p/14476415.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。