layui 第三方组件平台

返回首页 发布组件

基于LayUI的下拉菜单组件,可以和layui.table组合使用

更新:2021-1-11 创建:2021-1-15

文档

安装教程
layui.config({
base: '/js/', //拓展模块的根目录
})
.extend({
dropMenu: '/dropMenu/dropMenu'
});
使用说明
<input type='button' class='layui-btn rowmoreBtn layui-icon layui-icon-more' value="更多"/>

layui.dropMenu.render({
type:0, //默认0,单击和鼠标经过时都生效,1点击时,2鼠标经过时(非必填)
ele:".rowmoreBtn", //$(".rowmoreBtn")
width:"120px", //菜单宽度(非必填)
css:{"background":"red"}, //菜单样式(非必填)
location:"c", //下拉菜单依靠位置,c居中、l左、r右(非必填)
align: "c", //菜单内容文本对齐方式,c居中、l左、r右(非必填)
//菜单数据,isShow是否显示,可配合权限来显示
data:[
{title:'选项1', icon:'layui-icon-set', event:'more1', isShow:true},
{title:'选项2', icon:'layui-icon-notice', event:'more2'},
{title:'选项3', icon:'layui-icon-search', event:'more3'},
{title:'选项1', icon:'layui-icon-friends', event:'more1'},
{title:'选项2', icon:'layui-icon-console', event:'more2'},
{title:'选项3', icon:'layui-icon-app', event:'more3'},
{title:'选项1', icon:'layui-icon-home', event:'more1'},
{title:'选项2', event:'more2'},
{title:'选项3', icon:'layui-icon-face-smile', event:'more3', isShow:false}
],
//触发的事件(非必填)
event:{
more1: function(){
alert('触发了事件1');
},
more2: function(){
alert('触发了事件2');
},
more3: function(){
alert('触发了事件3');
}
},
done:function(dropM){ } //菜单渲染完成后触发事件,dropM下拉菜单对象
});

//事件可以单独用util.event来处理
layui.util.event('lay-event', {
more1: function(){
alert('触发了事件1');
},
more2: function(){
alert('触发了事件2');
},
more3: function(){
alert('触发了事件3');
}
});

//事件可以使用table.on('tool')工具条事件来处理
layui.table.on(`tool(mytable)`, function(obj){
var layEvent= obj.event; //获得 lay-event 对应的值(也可以是表头的 event 参数对应的值)
var row = obj.data; //获得当前行数据
var tr = obj.tr; //获得当前行 tr 的 DOM 对象(如果有的话)
if(layEvent === 'more1'){
alert('触发了事件1');
}
else if(layEvent === 'more2'){
alert('触发了事件2');
}
});

//跟layui.table结合,用lay-events标签动态显示菜单内容
<!-- 行操作栏 -->
<script type="text/html" id="rowtool">
<div class='layui-inline'>
<input type='button' class='layui-btn' value="编辑" lay-event="edit"/>
</div>
{{# if(d.is_canDel){ }}
<input type='button' class='layui-btn layui-btn-xs layui-btn-primary rowmoreBtn' value='更多' lay-events="viewinfo,delete"/>
{{# } else { }}
<input type='button' class='layui-btn layui-btn-xs layui-btn-primary rowmoreBtn' value='更多' lay-events="neworder,recycle"/>
{{# } }}
</script>

layui.table.render({
elem: '#demo',
url: '/demo/table/user/',
page: true,
cols: [[
{ field: 'button', title: '操作', align:'center', width: "110", fixed: true, toolbar: '#rowtool' },
{ field: 'id', title: 'ID', align: 'center', width: 120},
{ field: 'name', title: '名称', align: 'center', width: 180 },
]],
done(){
layui.dropMenu.render({
ele:".rowmoreBtn",
data:[
{title:'查看', icon:'layui-icon-set', event:'viewinfo'},
{title:'删除', icon:'layui-icon-delete', event:'delete'},
{title:'新建订单', icon:'layui-icon-add-circle', event:'neworder'},
{title:'放入回收站', icon:'layui-icon-cart', event:'recycle'},
]
});
}
});
效果图