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

89831265f9a80ec94429b6bbbaec91cc.png0e3ea6bd97d7c2dd9d5683a911f062c5.png

先上效果图:

7425264_1511708152985_27285.png

直接上代码

4c9be397d4c6a93417b6cc3eb4fc5952.gif

//添加样式:

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

});

}

}

4c9be397d4c6a93417b6cc3eb4fc5952.gif 刚学习JavaScript

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/397977.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

家里wifi网速越来越慢_家里的wifi信号不好?有了它再也不怕网速慢啦

夏天太热,就想宅在家里刷刷剧、打打游戏、看看新闻。可是网速却不好,看一会儿,卡一会儿,本来天气就热,这样更加烦躁!这WiFi信号怎么会这么差?有什么好办法能解决这个问题呢?只要有了…

python文件操作实验总结,[干货分享]Python文件操作技巧总结

引言小伙伴们,今天给大家讲解一下python程序下的文件操作完整技巧梳理,都是笔者总结的干货。通过本文阅读,不仅可以带来生产力提升,也可以开发小脚本为生活带来乐趣。首先不知道大家对python有没有了解,不太会用的小伙…

7价 半导体掺杂_天津大学封伟团队:新型半导体二维原子晶体锗硅烷材料的带隙调控...

xxxxxxxxxxxx【研究背景】xxxx新型二维半导体原子晶体兼具原子级厚度、纳米级层状结构、极高的载流子迁移率,是构建未来高性能纳米光电器件的核心材料。带隙是二维半导体电子器件和光电子光器件中最重要的基本参数之一,是影响二维半导体电子器件开关比和…

vs2017怎么安装python包,vs2017安装pygame,vs2017安装python第三方包

vs2017有独立的python环境;所以想在vs2017开发python并使用第三方包,需要在vs2017中操作,完成第三方包的安装。一,查看vs2017有哪些版本的python,当前使用的是哪个版本工具--》Python--》Python环境可以看到vs2017包含…

基于opencv在摄像头ubuntu根据视频获取

基于opencv在摄像头ubuntu根据视频获取 1 工具 原料 平台 :UBUNTU12.04 安装库 Opencv-2.3 2 安装编译执行步骤 安装编译opencv-2.3 參考http://blog.csdn.net/xiabodan/article/details/23547847 提前下载OPENCV源代码包 官方&am…

Flask构建微电影(二)

第三章、项目分析、搭建目录及模型设计 3.1.前后台项目目录分析 微电影网站 前台模块后台模块前台(home) 数据模型:models.py表单处理:home/forms.py模板目录:templates/home后台(admin) 数据模…

Android Studio开发第四篇版本管理Git(下)

前面一片介绍了在as下如何关联远程仓库,这篇就介绍在开发过程中怎么应用。 提交Push 如果本地开发代码有改动了或者你觉得某功能做完了,你打算把改动代码提交到远程仓库,这个时候很简单, 还是在工具栏找到VSC箭头朝上的按钮。 这时…

容器大小_无根容器内部结构浅析

随着云计算的发展,容器变得越来越流行,同时也产生了实现容器的新方案,其中之一就是无根容器。本文介绍了无根容器的内部结构,并分析了无根容器网络组件中的漏洞。随着云计算的发展,容器变得越来越流行,同时…

php layout布局文件,layout(布局) - jQuery EasyUI中文文档 - EasyUI中文站

Layout(布局)使用$.fn.layout.defaults重写默认值对象。布局容器有5个区域:北、南、东、西和中间。中间区域面板是必须的,边缘的面板都是可选的。每个边缘区域面板都可以通过拖拽其边框改变大小,也可以点击折叠按钮将面板折叠起来。布局可以进…

Bootstrap系列 -- 11. 基础表单

表单主要功能是用来与用户做交流的一个网页控件,良好的表单设计能够让网页与用户更好的沟通。表单中常见的元素主要包括:文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。其中每个控件所起的作用都各不相同,而且不同的浏览器对…

how to use webpart container in kentico

https://docs.kentico.com/k11/developing-websites/developing-websites-using-the-portal-engine/using-web-part-containers Webpart Container webpart container中的orangebox, SELECT * FROM dbo.CMS_WebPartContainer WHERE ContainerDisplayName LIKE %orange%; 把…

excel如何找到高频词_拟录取后:应届生和往届生档案哪里找;重灾院校区;高频词背诵表...

今日消息1、应届生和往届生档案哪里找?2、重灾院校区3、考研云督学班高频词背诵表汇总1、应届生和往届生档案哪里找?往年这个时候论文答辩、复试已经结束,已经进入毕业季!现在你们毕业答辩结束了吗?你们都顺利上岸吗&a…

oracle 中表,oracle中表操作

1.1:创建一表空间 TABLESPACE01,初始大小50MB,允许自动增长数据库文件,每次增长10MBCREATE TABLESPACE TABLESPACE01LOGGINGDATAFILE’F:\TABLESPACE\DATA01.DBF’ SIZE 50MREUSE AUTOEXTEND ON NEXT 10M;1.2:创建用户 (oracle12c)此处创建用户报错,原因…

放大镜_指甲钳上有放大镜?再也不怕夹到肉了

扒姬说:剪指甲钳最害怕什么,是没注意夹到肉有没有。尤其是近视的人和手脚不便的老人,或者是给较小的宝宝剪指甲时,总是看不清指甲边缘的形状、刀口的位置,一不小心就会夹到手指、脚趾。今天,扒姬推荐一个特…

linux学习规划

转载于:https://www.cnblogs.com/Alight/p/4601510.html

oracle如何在本地建库,oracle在本地建库

oracle数据库本地建库,需要使用oracle安装路径下面的-配置和移植工具-Database Configuration Assistant 通过一次点击下一步进行建库。 在库建好后,使用系统账号 User:sys password:sys Connect as SYSDBA在客户端进行登录 --创建表空间 Create tablesp…

「BZOJ1485」[HNOI2009] 有趣的数列 (卡特兰数列)

「BZOJ1485」[HNOI2009] 有趣的数列 Description 我们称一个长度为2n的数列是有趣的&#xff0c;当且仅当该数列满足以下三个条件&#xff1a; (1)它是从1到2n共2n个整数的一个排列{ai}&#xff1b; (2)所有的奇数项满足a1<a3<…<a2n-1&#xff0c;所有的偶数项满足a2…

wedo2.0编程模块介绍_能量黑科技模块系列十:RFID魔块

RFID魔块RFID此模块可以对套件配套的RFID卡或者空白RFID卡进行读写&#xff0c;用于权限验证的DIY制作。常规的公交卡、地铁卡是无法进行写入&#xff0c;但可以读取UID号。配套RFID卡内存为1K&#xff0c;有16个分区&#xff0c;每个分区有3个数据块可进行写入此模块可以对套件…

[SoapUI] 通过SoapUI发送POST请求,请求的body是JSON格式的数据

通过SoapUI发送POST请求&#xff0c;请求的body是JSON格式的数据&#xff1a; data{"currentDate":"2015-06-19","reset":true} 而且通过Fiddler抓取页面报文 Content-Type 是 application/x-www-form-urlencoded 一开始我将Content-Type appl…

oracle -239报错,解决: ./check_oracle_health --connect orcl --mode connection-time 报错的问题...

错误提示./check_oracle_health --connect orcl --mode connection-timeCRITICAL - cannot connect to orcl. install_driver(Oracle) failed: Cant locate DBD/Oracle.pm in INC (INC contains: . /usr/local/lib64/perl5 /usr/local/share/perl5 /usr/lib64/perl5/vendor_per…