我們在用到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);
}
})
【網站聲明】本站部分內容來源于互聯網,旨在幫助大家更快的解決問題，如果有圖片或者內容侵犯了您的權益，請聯系我們刪除處理，感謝您的支持！