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信号怎么会这么差?有什么好办法能解决这个问题呢?只要有了…

html - meta name=viewport content=XX/ 标签常见属性及说明

<meta name"viewport" content"widthdevice-width, initial-scale1.0, minimum-scale0.5, maximum-scale2.0, user-scalableyes" />在网页的<head>中增加以上这句话&#xff0c;可以让网页的宽度自动适应手机屏幕的宽度。其中&#xff1a;widt…

数据权限设计(原创)

数据权限是针对数据表中行级和列级的控制&#xff0c;相对操作权限&#xff0c;颗粒度更细&#xff0c;复杂度更高&#xff0c;因为在项目中也有相关需求&#xff0c;是直接通过硬编码sql查询条件控制的&#xff0c;后期维护起来比较困难。所以有了一些想法&#xff0c;后期也将…

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

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

触摸事件

•如果想监听一个view上面的触摸事件&#xff0c;之前的做法是自定义一个view实现view的touches方法&#xff0c;在方法内部实现具体处理代码•通过touches方法监听view触摸事件&#xff0c;有很明显的几个缺点必须得自定义view由于是在view内部的touches方法中监听触摸事件&am…

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

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

面向对象下

面向对象下 多态的定义是什么&#xff1f; 在同一个方法中&#xff0c;参数的类型相同但是由于运行的环境不同而表现出来的不同形式。&#xff08;父类引用指向子类对象&#xff09; 什么叫对象转型&#xff0c;什么叫向上转型&#xff0c;什么叫向下转型&#xff1f; 向上转型…

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

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

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

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

yum 安装 phpmyadmin

1.安装apache yum -y install httpd httpd-devel 2.安装phpmyadmin yum -y -install phpmyadmin 3.配置phpmyadmin 修改/etc/httpd/conf.d/phpmyadmin.conf <Directory "/usr/share/phpmyadmin"> Order Deny,Allow # Deny from all Allow from All <…

我机器人里面的匡威照片_威尔史密斯在《我,机器人》里面穿的是匡威的那款鞋啊...

匡威的经典款&#xff0c; 有高帮跟低帮的&#xff0c;我见有人买过款号&#xff1a;NS05-V085 货号&#xff1a;15087006 性别&#xff1a;中性 零售价&#xff1a;338 尺码&#xff1a;3-11 上市时间&#xff1a;2005.01.01/02.01 材质&#xff1a;牛皮 颜色&#xff1a;黑 的…

Flask构建微电影(二)

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

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

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

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

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

windows7使用Sphinx+PHP+MySQL详细介绍

安装&#xff08;Windows&#xff09; 1.官方下载 Sphinx下载地址&#xff1a; 下载 2.解压并重命名 此处下载版本为3.0.3&#xff0c;将 sphinx 文件夹命名为sphinx 3.文件夹目录介绍 sphinx --api(各语言支持的api) --bin&#xff08;二进制程序&#xff09; --doc&#xff0…

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

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

Bootstrap系列 -- 11. 基础表单

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

python excel centos_centos中使用python遇到的几个问题

用python搞了一个从excel中读取cobbler节点信息并加入cobbler中的脚本&#xff0c;运行的过程中出了不少问题&#xff0c;这里记录下来&#xff0c;方便日后查找&#xff01;一、yum install python&#xff0c;我通过这个命令安装python&#xff0c;默认安装的是2.6的版本&…

oracle集群监听启动,在RAC中lsnrctl和srvctl操作监听区别

朋友今天询问了一个问题RAC中使用srvctl 操作监听和lsnrctl 操作监听结果不一样&#xff0c;下面我通过实验说明问题0.listener.ora文件内容LISTENER_RAC1 (DESCRIPTION_LIST (DESCRIPTION (ADDRESS (PROTOCOL TCP)(HOST rac1-vip)(PORT 1521)(IP FIRST))(ADDRESS (PROTO…

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%; 把…