zoukankan      html  css  js  c++  java
  • 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;
              });
      
    作者: JaminYe
    版权声明:本文原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
  • 相关阅读:
    黑盒测试用例设计-功能图法和场景法(八)
    黑盒测试用例设计-正交试验方法(七)
    Linux 的档案权限与目录配置
    maven常用技巧
    SQL Server登录 18456错误
    How do I remove javascript validation from my eclipse project?
    解决Cannot change version of project facet Dynamic web module to 2.5
    An error occurred while filtering resources
    Java Servlet完全教程
    eclipse 使用指南
  • 原文地址:https://www.cnblogs.com/JaminYe/p/14476415.html
Copyright © 2011-2022 走看看