php table 下拉框,LayerUI的table 里面加 select 下拉框 – Fly社区-Mikel

先上效果图：

直接上代码

//添加样式：

.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

自己折腾了这个。不知道有没有更好的