先上效果图:
直接上代码
//添加样式:
.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
自己折腾了这个。不知道有没有更好的