【layui】下拉控件dropdown 简单的使用
官方网站地址: http://test.microanswer.cn/page/dropdown.html
1.代码
layui.use(['index', 'table', 'form', 'dropdown'], function () {
var $ = layui.$
, form = layui.form
, admin = layui.admin
, table = layui.table
, dropdown = layui.dropdown;
table.render({
elem: '#table-datalist'
, url: '/Console/ECUser/GetListJson'
, limit: 10
, title: ''
, where: {}
, cols: [[
{ type: 'checkbox', fixed: 'left' }
, { field: 'id', title: '编号', width: 60 }
, { field: 'countryCode', title: '区号', width: 60 }
, { field: 'phone', title: '手机号' }
, {
field: 'statusKey', title: '状态', width: 120, templet: function (res) {
if (res.statusKey == "allow_login")
return '<input type="checkbox" name="status" lay-skin="switch" lay-text="允许登录|禁止登录" lay-filter="table-state" value="' + res.id + '" checked="checked">'
else
return '<input type="checkbox" name="status" lay-skin="switch" lay-text="允许登录|禁止登录" lay-filter="table-state" value="' + res.id + '">'
}
}
, { fixed: 'right', width: 150, title: '详情信息', toolbar: '#table-datalist-detail' }
]]
, done: function (res) {
tableData1 = res;
dropdown.suite();
for (var i = 0; i < tableData1.data.length; i++) {
dropdown.onFilter("ft" + tableData1.data[i].id, function (event) {
var arr = event.split("-");
switch (arr[1]) {
case "user":
break;
case "assets":
break;
case "target":
break;
case "funding":
break;
}
});
}
}
, page: true
});
}
2.html
<script type="text/html" id="table-datalist-detail">
<button class="layui-btn layui-btn-xs" lay-filter="ft{{d.id}}" lay-dropdown="{align:'right',menus:[{layIcon:'layui-icon-username',txt:'用户详情',event:'{{d.id}}-user'},{layIcon:'layui-icon-form',txt:'资产列表',event:'{{d.id}}-assets'},{layIcon:'layui-icon-form',txt:'标的列表',event:'{{d.id}}-target'},{layIcon:'layui-icon-form',txt:'资金记录',event:'{{d.id}}-funding'}]}">
<span>操作</span>
<i class="layui-icon layui-icon-triangle-d"></i>
</button>
</script>
【layui】下拉控件dropdown 简单的使用的更多相关文章
- scrollview嵌套下拉控件嵌套recyclerview(不动第三方原基础自定义)
相信会碰到很多类似的需求,一个列表控件,然后控件上方的一个头部需要自定义,这样就不好有时候也不能加在列表控件的头部了,那必须得嵌套一层scrollview了,没毛病,那么一般的列表控件都是有上拉下拉的 ...
- DevExpress控件GridView挂下拉控件无法对上值
下拉控件使用RepositoryItemLookUpEdit,加入如下事件进行处理. repositoryItemLookUpEdit1.CustomDisplayText += new DevExp ...
- 一不小心写了个bootstrap风格下拉控件 JqueryUI + bootstrap
受够了EasyUI的封闭,Bootstrap虽然华丽但是功能太渣,闲着无聊写个下拉控件玩玩吧,不喜勿喷哈... 第一步:先设计下我的下拉控件的样子 1.既然是bootstrap风格的,我想应该是这样的 ...
- 基于bootstrap的multiple-select下拉控件使用
multiple-select是一款优秀的下拉菜单控件,能够支持单选和多选. 详细参考文档: JS组件系列——两种bootstrap multiselect组件大比拼 multiple-select ...
- 下拉控件jQuery插件
由于后端开发需要一个下拉控件,能输入,能选择,于是自己写了一个 ;(function($,window,document,undefined){ function Select(el,opt){ th ...
- 解决easyUI下拉控件无法触发onkeydown事件
实现在combotree下拉控件中按Backspace键清除combotree选中的值 下面的代码无法获取到键盘事件 <input class="easyui-combotree&qu ...
- 使用谷歌提供的SwipeRefreshLayout下拉控件,并自定义实现下拉加载的功能
package com.loaderman.swiperefreshdemo; import android.os.Bundle; import android.os.Handler; import ...
- SDI在自定义的工具栏上添加下拉控件
0.首先到自己的工具条上新建一个控件,并命名新ID 1.拷贝FlatComboBox.h和FlatComboBox.cpp到工程目录下 2.建立新类 class CTrackerToolBar : p ...
- java 下拉控件 转自 http://www.cnblogs.com/lhb25/p/form-enhanced-with-javascript-three.html
表单元素让人爱恨交加.作为网页最重要的组成部分,表单几乎无处不在,从简单的邮件订阅.登陆注册到复杂的需要多页填写的信息提交功能,表单都让开发者花费了大量的时间和精力去处理,以期实现好用又漂亮的表单功能 ...
- 下拉框、下拉控件之Select2。自动补全的使用
参考链接: 参考一:https://blog.csdn.net/weixin_36146275/article/details/79336158 参考二:https://www.cnblogs.com ...
随机推荐
- 移动 WEB 布局方式之 rem 适配布局 ---- 苏宁首页案例制作
一.技术选型 二.搭建相关文件夹结构 三.设置视口标签以及引入初始化样式 四.设置公共common.less 文件 common.less //设置常见的屏幕尺寸大小,修改里面的html 文字大小 / ...
- 计算机网络基础08 Socket网络通信
部分内容来自:https://www.jianshu.com/p/066d99da7cbd 1 七层网络架构 在解释socket之前,先了解下七层网络架构 https://www.cnblogs.c ...
- IDEA手动导入jar包到maven本地库
第一步:下载需要的jar包 第二步:file project structure-liberaries 第三步:点击+号-选择java,再选择刚才下载的jar包,ok 此时我们把jar包加到项目了,但 ...
- VeryCapture V1.8.9.5 中文版安装使用教程
VeryCapture简介 VeryCapture中文版是一款实用的屏幕捕捉工具.VeryCapture最新版持将图钉在桌面.这个功能可以方便图片对比,在写论文或者写文章时比较方便.VeryCaptu ...
- 【KAWAKO】soundtoch-使用可执行文件对音频进行变调或变速
目录 下载 单次使用 使用python脚本批量处理 下载 从官网下载可执行文件. 单次使用 在终端中直接运行,会出现使用方法和可选参数. 变速就设置tempo,变调就设置pitch,都变就都设置.变速 ...
- 云小课|MRS数据分析-通过Spark Streaming作业消费Kafka数据
阅识风云是华为云信息大咖,擅长将复杂信息多元化呈现,其出品的一张图(云图说).深入浅出的博文(云小课)或短视频(云视厅)总有一款能让您快速上手华为云.更多精彩内容请单击此处. 摘要:Spark Str ...
- centos7 ssh服务
转载博客园: Centos7开启SSH服务 - KinwingHU - 博客园 (cnblogs.com)
- K8S 1.20 弃用 Docker 评估之 Docker 和 OCI 镜像格式的差别
背景 2020 年 12 月初,Kubernetes 在其最新的 Changelog 中宣布,自 Kubernetes 1.20 之后将弃用 Docker 作为容器运行时. 弃用 Docker 带来的 ...
- 简述cpu、gpu、fpga和asic四种人工智能芯片的性能
https://fastonetech.com/newszblog/post/25570.html 简述cpu.gpu.fpga和asic四种人工智能芯片的性能FPGA(Field Programma ...
- Linux的终端(base),进入base环境
正常界面,如下 带有(base) 一般是由于安装了conda环境管理软件,它自带一个base环境.第一次安装时出现这种情况可能是由于软件将启动base环境的命令写入-/.bashrc 文件,这就相当于 ...