tableSelect联动选择框

标签：extend   module   label   div   dna   方法   com   date   效果   

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

tableSelect联动选择框

标签：extend   module   label   div   dna   方法   com   date   效果   

原文地址：https://www.cnblogs.com/JaminYe/p/14476415.html