我们在用到layui时候，需要点击文本输入框调起弹出选择框并选择内容，这个要怎么操作呢？以下两种方法可以参考：
1、点击名称，弹出信息弹框，选择表格中的某一行，实现效果如下：
html页面代码
<!--计量器具弹出层-->
<div id="equipment" lay-filter="equipment" style="display: none">
<table id="equipment_result" lay-filter="equipment_result"></table>
</div>
<!-- 添加 弹出计量器具表格的 tool（里面的按钮）-->
<script type="text/html" id="equipment-table-tool">
<a class="layui-btn layui-btn-xs" lay-event="select">选择</a>
</script>
<div class="layui-form-item layui-hide">
<label class="layui-form-label">名称</label>
<div class="layui-input-block">
<input ts-selected="1" type="text" id="EQUIPMENTNAME" name="EQUIPMENTNAME" class="layui-input">
<input type="hidden" id="EQUIPMENTID" name="EQUIPMENTID" class="layui-input">
</div>
</div>
js代码部分：
// part 1: 为全局变量赋值
var form = layui.form,
$ = layui.$,
iconPickerFa = layui.iconPickerFa,
common = layui.common,
commonTable = layui.commonTable,
table = layui.table,
tableSelect = layui.tableSelect,
laydate = layui.laydate;
// part 2: 让layui渲染页面
table.render(equipment_result_table_options);
// part 3: 让 layui 为页面的元素绑定事件处理函数 为页面上的table上的tool绑定事件处理函数
table.on('tool(equipment_result)', equipment_tool_event_handler);
// part 4: 为输入框绑定光标聚焦事件的触发该函数，
$('#EQUIPMENTNAME').on("click",equipment_input_focus_handler);
//页面上隐藏的用于弹层的所有的列表的相关设置
function equipment_result_table_options()
{
debugger;
commonTable.rendertable({
elem: '#equipment_result',
id: 'equipment_result',
url: '/EquipmentManage/Equipment/GetJson',
title: '计量器具表',
toolbar: false,//工具条不显示
page: false,//分页栏不显示
cols: [[
{ field: 'KEY_DEVICECODE', title: '点值', width: 160 },
{ field: 'NAME', title: '计量器具名称', width: 200 },
{ fixed: '', title: '操作', toolbar: '#equipment-table-tool', width: 80 }
]]
})
}
// “计量器具”输入框的光标聚焦事件的触发函数， 弹出弹层，弹层上显示所有的计量器具，以供选择。
function equipment_input_focus_handler() {
layer.open({
type: 1,
area: ['440px', '500px'],
content: $('#equipment'),
success: function () {
// 重新加载表格中的数据
//table.reload('equipment_result', equipment_result_table_options);
$('#equipment').css('display', 'block');
equipment_result_table_options();
}
});
}
//点击弹出的“选择”弹层上的表格中“选中”按钮的触发函数
function equipment_tool_event_handler(obj) {
console.info(obj);
var data = obj.data;
switch (obj.event) {
case 'select':
$('#EQUIPMENTNAME').val(data.NAME);
$('#EQUIPMENTID').val(data.ID);
layer.close(layer.index);
break;
}
}
2、单选按钮的方式，实现效果如下：
html代码：只需要在触发input上添加 ts-selected=“1” 属性即可 值需与checkedKey对应
<input type="text" ts-selected="1" id="EQUIPMENTNAME" name="EQUIPMENTNAME" class="layui-input">
js代码部分：
layui.use([ 'tableSelect'], function () {
var form = layui.form,
$ = layui.$,
tableSelect = layui.tableSelect；
tableSelect.render({
elem: '#EQUIPMENTNAME',//定义输入框input对象 必填
checkedKey: 'EQUIPMENTNAME',//表格的唯一建值，非常重要，影响到选中状态 必填
searchKey: 'keyword', //搜索输入框的name值 默认keyword
searchPlaceholder: '关键词搜索',//搜索输入框的提示文字 默认关键词搜索
table: {
url: '/EquipmentManage/Equipment/GetJson',
cols: [[
{ type: 'radio' },
{ field: 'CODE', title: '编号', width: 135 },
{ field: 'KEY_DEVICECODE', title: '点值', width: 135 },
{ field: 'NAME', title: '计量器具名称', width: 135 },
//{ fixed: '', title: '操作', toolbar: '#equipment-table-tool', width: 80 }
]]
},
done: function (elem, data) {
//选择完后的回调，包含2个返回值 elem:返回之前input对象；data:表格返回的选中的数据 []
//拿到data[]后 就按照业务需求做想做的事情啦~比如加个隐藏域放ID...
$('#EQUIPMENTNAME').val(data.data[0].NAME);
$('#EQUIPMENTID').val(data.data[0].ID);
}
})
【网站声明】本站部分内容来源于互联网,旨在帮助大家更快的解决问题，如果有图片或者内容侵犯了您的权益，请联系我们删除处理，感谢您的支持！