先上效果圖：

直接上代碼

//添加樣式：

.table-select-icon{position:absolute;right:10px;line-height:34px;color:#d3d3d3}

.table-select-selected dl{display:block}

.table-select dl{position:absolute;left:0;padding:5px 0;z-index:999;min-width:100%;border:1px solid #d2d2d2;max-height:300px;

overflow-y:auto;background-color:#fff;border-radius:2px;box-shadow:0 2px 4px rgba(0,0,0,.12);box-sizing:border-box}

.table-select dl dd{cursor:pointer}

.table-select dl dd,.table-select dl dt{padding:0 10px;line-height:36px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.table-select dl dd.layui-this{background-color:#5FB878;color:#fff}

.table-select dl dd,.table-select dl dt{padding:0 10px;line-height:36px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.table-select dl dd:hover{background-color:#f2f2f2}

//表格 field 需要配置 event 和 templet

商品類型

//模版

{{d.type}}

//代碼部分

layui.use(['layer', 'element', 'table', 'form', 'upload'], function(exports){

var $ = layui.jquery,

form = layui.form,

element = layui.element,

upload = layui.upload,

table = layui.table;

//這里才是重點...

(function($,doc,o){

var tk;

var obj;

var otd;

var callback;

o.show = function(h,e,c){

callback = c;

var d = doc.getElementById('table_type_select');

if(d){

d.remove();

}

otd = e;

var s = '

for(var k in h.data){

if(h.value == h.data[k].value){

s += '

'+ h.data[k].text + '';

}else{

s += '

'+ h.data[k].text + '';

}

}

s += '

';

otd.innerHTML = s + otd.innerHTML;

obj = doc.getElementById('table_type_select');

//console.log($(obj));

obj.onmouseout = function(){

tk = 1;

setTimeout(function() {

if(tk){

if(obj){

ke = 0;

obj.remove();

}

}

}, 200);

}

obj.onmouseover = function(){

tk = 0;

}

obj.addEventListener('click', function(e){

var value = $(e.srcElement).attr('lay-value');

var text = e.srcElement.innerHTML;

obj.remove();

callback({value:value,text:text});

});

}

})($,document, window.type_select = {});

//監聽表格事件

table.on('tool(goods_table)',function(obj){

if(obj.event === 'type'){

//顯示下拉框框

type_select.show({

//設置當前選擇的id

value:obj.data.type_id,

//下拉選擇數據

data:[{

value: '0',

text: '實物'

},{

value: '1',

text: '積分'

},{

value: '2',

text: '虛擬卡'

},{

value: '3',

text: '充值'

}]}, this, function(e){

//回調函數 返回結果

obj.data.type_id = e.value;

obj.data.type = e.text;

obj.update(obj.data);

form.render();

});

}

}

?剛學習JavaScript

自己折騰了這個。不知道有沒有更好的

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的php table 下拉框,LayerUI的table 里面加 select 下拉框 – Fly社区-Mikel的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。