【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>
最新文章
- js 闭包
- [MacOS] 终端使用ssh时,中文乱码问题处理
- 小甲鱼PE详解之IMAGE_NT_HEADERS结构定义即各个属性的作用(PE详解02)
- iOS从健康app中获取步数信息
- Builder
- Intellij IDEA 14隐藏被排除的文件夹
- eclipse提交hadoop集群跑程序
- Android数据库高手秘籍(六)——LitePal的改动和删除操作
- opencv----(1) mat最好用,和IplImage,cvmat 比较
- MySql-两阶段加锁协议
- Do-Now—团队Scrum 冲刺博客五
- 使用C语言开发PHP扩展(转)
- Python中的可变、不可变对象和赋值技巧序列解包
- 获取Gitlab项目的Token
- Django——邮件发送
- Oracle 批量修改某个用户下表的表空间
- ZEDGRAPH画图心得
- [翻译] IDMPhotoBrowser
- MVC文件上传03-使用Request.Files上传多个文件
- NSURLSession---iOS-Apple苹果官方文档翻译
热门文章
- Node.js学习笔记----day01
- Selenium中的option用法实例
- vue3 h函数 h() 生成 element-plus vnode
- C# SMTP发邮件不支持465端口的解决方案
- PCL PointCloud类型介绍
- 【译】.NET 7 中的性能改进(一)
- 我做的百度飞桨PaddleOCR .NET调用库
- Ansible 多机自动化工具 初学笔记
- JZOJ 3447.摘取作物
- JZOJ 6904. 【2020.11.28提高组模拟】T3 树上询问(query)