先上效果圖：

直接上代碼

//添加樣式：

.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;

//這里才是重點(diǎn)...

(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 = {});

//監(jiān)聽表格事件

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

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

//顯示下拉框框

type_select.show({

//設(shè)置當(dāng)前選擇的id

value:obj.data.type_id,

//下拉選擇數(shù)據(jù)

data:[{

value: '0',

text: '實(shí)物'

},{

value: '1',

text: '積分'

},{

value: '2',

text: '虛擬卡'

},{

value: '3',

text: '充值'

}]}, this, function(e){

//回調(diào)函數(shù) 返回結(jié)果

obj.data.type_id = e.value;

obj.data.type = e.text;

obj.update(obj.data);

form.render();

});

}

}

?剛學(xué)習(xí)JavaScript

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

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。