多列选择可实现选择输入，通常使用在弹出选择页面，如一个文本组件选择了多列选择，点击该文本框将会弹出选择页面，其中显示列、查询条件、是否显示详细等都可以动态设定，如下图：输入图片说明

基本操作

多列选择使用步骤：

定义多列选择;
为录入表指标选择指定已定义的多列选择。

以管理员身份登陆，点击左侧菜单【录入表自定义】>>【数据规范】如下图：输入图片说明

如上图，点击右上角【新建多列选择】按钮，实现新建功能。点击列表右侧【编辑】按钮，实现编辑功能。如下图：输入图片说明说明：

数据源包括当前数据库和从外部数据源取数两类，其中从外部数据库取值需首先在数据源管理>>外部数据库中添加创建
取值方式包括数据字典取值及从已定义录入表取值两种。
如选择数据字典取值，可从已定义的数据字典选择，读取的数据是字典子项；如选择从已定义录入表取值，可从录入表指标选择值字段及显示字段。
值字段与显示字段可以不相同，其是一一对应的。如建立性别数据字典，子项分别为：编码为 1 名称为男；编码为 2 名称为女。如果选择子项编码为值字段，选择男时数据库里存储的是“1” 。反之，选择子项名称为值字段，选择男时数据库里存储的是“男”；
单列选择、多列选择及树形选择，都需要确定值字段与显示字段，值字段只能有一个，并且值字段存储数据库中。单列选择及树形选择只能有一个显示字段，多列选择最多能有10个显示字段。

如下图：

设置多列选择输入图片说明

使用多列选择输入图片说明

根据已定义的多列选择自动生成的代码如下

生成的代码

多列选择常用于弹出选择页面

//触发弹出选择的录入指标id
if (indexid == "SubtableTest01v1")
{
	tbname = "tb_Test01";
	some = "listid as Id,inItemNo as Value,inItemNo as info1,inTradeName as info2,inCompany as info3,inProductType as info4,inSpecificationAndModel as info5,inManufacturer as info6,inProductPicture as info7";
	where = " where 1=1";
	order =" ORDER BY inItemNo";
				
	//设置的查询条件
	string _inItemNo = BasicHelp.GetTextFromList(list, indexid, "inItemNo").Trim();
	if (!string.IsNullOrEmpty(_inItemNo))
	{
		where += " and inItemNo like @inItemNo"; 
	}
	.......
					
	object param = new { inItemNo = string.Format("%{0}%", _inItemNo),inTradeName = string.Format("%{0}%", _inTradeName),inCompany = _inCompany,inColour = _inColour,inMinimumStock = ExtConvert.ToDecimalOrNull(_inMinimumStock),inMinimumStock_Exa = ExtConvert.ToDecimalOrNull(_inMinimumStock_Exa),inPresetSellingPrice = ExtConvert.ToDecimalOrNull(_inPresetSellingPrice),inPresetSellingPrice_Exa = ExtConvert.ToDecimalOrNull(_inPresetSellingPrice_Exa) };
				
	_list = tblist.GetPageList(ref total, pageInfo, some, tbname, where, order,  param);
}

前端代码，页面内打开(非弹出选择)

	$('#select_inCoding').on('click', function () {
		exLayer.open('选择编码', '/_TB/PopUpPage?tbid=_main&indexid=inCoding&id=_n&from=add' + "&fwid=" + $("#_fwid").val(), '100%', '100%', '0px', '0px', null, null);
	});
	//页面内打开(非弹出选择)
	tableSelect.render({
		elem: '#inCoding',//定义输入框input对象 必填
		checkedKey: 'Value',//表格的唯一建值，影响到选中状态 必填
		searchKey: 'keyword',//搜索输入框的id值
		searchPlaceholder: '关键词搜索',//搜索输入框的提示文字
		table: {
			url: '/_TB/GetPopUpPageList?type=1&tbid=_main&indexid=inCoding&id=_n&from=add&fwid=' + $("#_fwid").val(),
			limits: [10, 50, 100],
			limit: 10,
			page: true,
			method: "POST",
			cols: [[
				{ type: 'radio' }
				,{ type: 'numbers', title: 'NO.' }
				,{ field: "Value", hide: true  }
				,{ field: "info1", title: "编码", width: null }//可修改，如width: 100
				,{ field: "info2", title: "名称", width: null }//可修改，如width: 100
			]]
		},
		done: function (elem, data) {
			if (data.data[0] != null) {
				$('#inCoding').val(data.data[0].Value);
				$('#pu_tbid').val('_main');//_main或子表编码
				$('#pu_indexid').val('inCoding');//控件id
				$('#pu_rowid').val('_n');//子表才使用，哪一行
				$('#pu_column').val('');//子表才使用，第几列
				$('#pu_value').val($('#inCoding').val());//控件值
				readValue();//执行数据读取
			}
		}
	})

前端代码，依照触发控件id，系统自动生成单独页面处理 弹出页面数据显示 ，如Grid_inPrincipalName.cshtml，其中inPrincipalName是触发弹出页面的指标id

@using Think9.Models;
@{ ViewBag.Title = "Index";
	Layout = "~/Areas/Shared/_LayuiForm.cshtml"; }

@*弹出选择页面*@
<input style="display:none" id="_fromfw" value="bi_ContractingEntity">@*取值数据表的流程id,查看详细时需要,为空则不会触发*@
<input style="display:none" id="_flag" value="inPrincipalName">@*父页面的指标id*@
<input style="display:none" id="pu_frm" value="@ViewBag.PuFrom">@*list或者add*@
<input style="display:none" id="pu_tbid" value="@ViewBag.PuTbId">@*表id*@
<input style="display:none" id="pu_indexid" value="@ViewBag.PuIndexId">@*指标编码*@
<input style="display:none" id="pu_rowid" value="@ViewBag.PuId">@*子表弹出时使用 对应tableid 哪一行*@
<input style="display:none" id="pu_column" value="@ViewBag.PuV">@*子表弹出时使用 第几列*@
<fieldset class="table-fieldset" id="searchfield" style="display:none">
	<legend style="color:darkgrey">快速查询<span><i class="fa fa-close" style="color: #FFAB00;font-size: 18px;" id="close_searchfield"></i></span></legend>
	<div style="margin: 5px 5px 5px 5px">
		<form class="layui-form layui-form-pane" action="">
			<div class="layui-row layui-col-space10">
				<div class="layui-col-xs12 layui-col-sm6 layui-col-md6">
					<label class="layui-form-label">主体名称</label>
					<div class="layui-input-block">
						<input type='text' name="inPrincipalName" id="inPrincipalName" autocomplete='off' class='layui-input'>
					</div>
				</div>
				<div class="layui-col-xs12 layui-col-sm6 layui-col-md6">
					<label class="layui-form-label">所属行业</label>
					<div class="layui-input-block">
						<select id="Industry" name="Industry">
							<option value="">==请选择==</option>
								@foreach (valueTextEntity item in ((IEnumerable<valueTextEntity>)ViewBag.SelectList).Where(x => x.ClassID == "Industry"))
								{
									 <option value="@item.Value">@item.Text</option>
								}
						</select>
					</div>
				</div>
			 </div>
			<div class="layui-row layui-col-space10">
				<div class="layui-col-xs12 layui-col-sm6 layui-col-md6">
					<label class="layui-form-label">信用等级</label>
					<div class="layui-input-block">
						<select id="inCreditRating" name="inCreditRating">
							<option value="">==请选择==</option>
								@foreach (valueTextEntity item in ((IEnumerable<valueTextEntity>)ViewBag.SelectList).Where(x => x.ClassID == "inCreditRating"))
								{
									 <option value="@item.Value">@item.Text</option>
								}
						</select>
					</div>
				</div>
				<div class="layui-col-xs12 layui-col-sm6 layui-col-md6">
					<label class="layui-form-label">类别</label>
					<div class="layui-input-block">
						<select id="inCategory" name="inCategory">
							<option value="">==请选择==</option>
								@foreach (valueTextEntity item in ((IEnumerable<valueTextEntity>)ViewBag.SelectList).Where(x => x.ClassID == "inCategory"))
								{
									 <option value="@item.Value">@item.Text</option>
								}
						</select>
					</div>
				</div>
			 </div>
			<div class="layui-row layui-col-space10">
				<div class="layui-col-xs12 layui-col-sm6 layui-col-md6">
					<label class="layui-form-label">联系人</label>
					<div class="layui-input-block">
						<input type='text' name="inContacts" id="inContacts" autocomplete='off' class='layui-input'>
					</div>
				</div>
				<div class="layui-col-xs12 layui-col-sm6 layui-col-md6">
					<button type='button' class='layui-btn' id='search' lay-submit lay-filter='search' lay-tips='查询'><i class='layui-icon layui-icon-search'></i></button> <button type='reset' class='layui-btn layui-btn-primary' lay-tips='清空'><i class='layui-icon layui-icon-refresh'></i></button>
				</div>
			 </div>
		</form>
	</div>
</fieldset>
<table class="layui-hide" id="tableId" lay-filter="tableFilter"></table>
<script>
	layui.config({
		base: '/Self_JS/' /*自定义的js文件 wwwroot/Self_JS文件夹中*/
	});
	layui.use(["table", "form", "exLayer", "exUtils", "ContractManagement"], function () {
		let table = layui.table;
		let form = layui.form;
		let exLayer = layui.exLayer;
		let exUtils = layui.exUtils;
		let myJS = layui.ContractManagement;

		let $ = layui.$;

		form.render(); //

		let ThisTable = table.render({
			elem: "#tableId",
			url: "/_TB/GetPopUpPageList?indexid=" + $('#_flag').val() + "&from=" + $('#pu_frm').val() + "&fwid=" + $(window.parent.document).find('#_fwid').val(),
			limits: [10, 50, 100],
			limit: 10,
			method:"POST",
			page: true,
			defaultToolbar: [{ title: '搜索', layEvent: 'searchShow', icon: 'layui-bg-blue layui-icon-search' }, 'filter' ],
			toolbar: "#toolbarTpl",
			cols: [[
			{ type: "radio", fixed: 'left' }

			   ,{ type: "numbers", title: "NO.", fixed: 'left' }
			   ,{ field: "Value", hide: true  }
			   ,{ title: "详细", width: 60,  templet: "#operation_Tpl" }
				,{ field: "info1", title: "主体编号", width: layui.device().mobile ? 120 : null }
				,{ field: "info2", title: "主体名称", width: layui.device().mobile ? 120 : null }
				,{ field: "info3", title: "联系人", width: layui.device().mobile ? 120 : null }
				,{ field: "info4", title: "联系方式", width: layui.device().mobile ? 120 : null }
				,{ field: "info5", title: "类别", width: layui.device().mobile ? 120 : null }
			]],
			done: function (res, curr, count) {
                if (count == -1) {
                    layer.msg(res.msg, { icon: 5, time: 20000, btn: ['关闭'] });//显示错误
                }
			}
		});

		 //查询
		form.on("submit(search)", function (data) {
			$("#searchfield").hide();
			var _list = [];
			getControlSearch(_list);
			console.log(_list);

			ThisTable.reload({
				where: { flag: $('#_flag').val(), "list": _list, fwid: $(window.parent.document).find('#_fwid').val() },
				page: { curr: 1 }
			});
			return false;
		});

        table.on("toolbar(tableFilter)", function (obj) {
            switch (obj.event) {
                case "OK":
                    getPopUpSelect(obj);
                    break;
                case "searchShow":
                    myJS.searchShow();
                    break;
            }
        });

		//数据表格自带的监听radio事件
        table.on('radio(tableFilter)', function (obj) {
            document.body.scrollTop = document.documentElement.scrollTop = 0;
        });

		function getPopUpSelect(obj) {
			var strv = '';
			var checkStatus = table.checkStatus(obj.config.id);
			if (checkStatus.data.length > 0) {
				strv = checkStatus.data[0].Value;
			}


            //调用后台处理函数 默认什么也不做--可自定义
            exUtils.ajax('/_TB/AfterPopUpSelect', 'post', {
                tbid: $('#pu_tbid').val(), indexid: $('#pu_indexid').val(), id: $('#pu_rowid').val(), value: strv, v: $('#pu_column').val()
            }, true).done(function (response) {
            }).fail(function (error) {
                console.log(error);
            });

            //为父页面控件赋值
			$(window.parent.document).find('#pu_value').val(strv);//选择的值
			$(window.parent.document).find('#pu_tbid').val($('#pu_tbid').val());//表id
			$(window.parent.document).find('#pu_indexid').val($('#pu_indexid').val());//指标编码
			$(window.parent.document).find('#pu_rowid').val($('#pu_rowid').val());//对应table中id可确定行
			$(window.parent.document).find('#pu_column').val($('#pu_column').val());//第几列

			$(window.parent.document).find('#pu_value').click();//调用父页面事件，完成控件赋值及数据读取

			parent.layer.close(parent.layer.getFrameIndex(window.name));
		}

		//从控件读值，将查询条件push传给后端
		function getControlSearch(_list) {
			//主体名称
			_list.push({ ClassID: $('#_flag').val(), Text:$('#inPrincipalName').val(), Value:'inPrincipalName'});
			//所属行业
			_list.push({ ClassID: $('#_flag').val(), Text:$('#Industry').val(), Value:'Industry'});
			//信用等级
			_list.push({ ClassID: $('#_flag').val(), Text:$('#inCreditRating').val(), Value:'inCreditRating'});
			//类别
			_list.push({ ClassID: $('#_flag').val(), Text:$('#inCategory').val(), Value:'inCategory'});
			//联系人
			_list.push({ ClassID: $('#_flag').val(), Text:$('#inContacts').val(), Value:'inContacts'});
		}
  
       $("#close_searchfield").click(function () {
            $("#searchfield").attr("style", "display:none");
        });
	});
</script>
<!-- 头工具栏模板 -->
<script type="text/html" id="toolbarTpl">
	<button class="layui-btn layui-btn-normal layui-btn-sm" lay-event="OK" id="OK">确定选择</button>
	<span class="layui-word-aux"><i class="fa fa-angle-double-left"></i>选择后，需点击【确定】按钮</span>
</script>
<!-- 行工具栏模板 -->
<script type="text/html" id="operation_Tpl">
    <a href="/Com/RDLCReport/ExportHtml?listid={{d.Id}}&isChange=n&fwid=bi_ContractingEntity" target="_blank" id="print" class="layui-btn layui-btn-primary layui-btn-xs">
        <i class='fa fa-file-text-o'></i>
    </a>
</script>

<!-- 图片显示 -->
<script>
    function PopUpImg(id) {
        showImg(id);
    }
</script>