下拉菜单(主要解决table中的下拉菜单不显示)

分享 未结
2 880
凉宫
凉宫 2018-11-8
悬赏:20飞吻
1. 单独使用的下拉菜单

<div class="urp-dropdown">
<button class="layui-btn urp-dropdown-btn">
Action
<i class="layui-icon layui-icon-down"></i>
</button>
<ul class="urp-dropdown-menu">
<li>
<a href="javascript:;">
<i class="layui-icon layui-icon-senior"></i>
action
</a>
</li>
<li>
<a href="javascript:;">
<i class="layui-icon layui-icon-website"></i>
Another action
</a>
</li>
</ul>
</div>
说明:
1. 默认左对齐,给 .urp-dropdown添加 .urp-dropdown-right类右对齐
2. 默认为关闭状态,给 .urp-dropdown添加 .open类则初始打开
2. table中使用


/*表格toolbar模板*/
<script type="text/html" id="barDemo">
<div class="urp-dropdown urp-dropdown-table">
<button class="layui-btn layui-btn-primary layui-btn-xs urp-dropdown-btn">
操作<i class="layui-icon layui-icon-down"></i>
</button>
</div>
</script>
table.render({
elem: "#demo"
// ...
, done: function (res) {
// 表格下拉菜单初始化
dropdown("#demo", res.data, function (data) {
// 拼接数组(几个数组代表几个按钮)
var options = [
{
title: "查看", // 按钮显示内容
icon: "layui-icon-form", // 图标样式
url: "http://baidu.com", // 按钮跳转地址(与event二选一)
event: function () {
// 按钮触发事件
}
}
];
return options;
})
}
});
说明:
1. 引入dropdown模块和css文件
2. 以 urp- 开头的class为必需的
3. dropdown参数
第一个参数为table选择器,若页面只有一个表格下拉菜单则可省略
第一个参数为table的数据,参数必需
第一个参数为回调函数,可以编辑按钮信息,函数需返回一个数组options,参数必需
3. dropdown(options):
4. options返回值为数组,数组中的每个对象代表一个按钮:
{
title: "查看", // 按钮显示内容
icon: "layui-icon-form", // 图标样式
url: "http://baidu.com", // 按钮跳转地址(与event二选一)
event: function () {
// 按钮触发事件
}
}
源码
演示地址
回帖
  • TeAmo
    2018-11-12
    前排支持一下。。。
    0 回复
  • 谢谢楼主分享····很实用的功能····
    0 回复