代码拉取完成,页面将自动刷新
LayUI的下拉菜单组件
基于LayUI模块化组件
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鼠标经过时(非必填)
elem:".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');
}
},
//(新增)菜单点击回调事件,返回false不关闭菜单面板,menuObj点击对象、title菜单标题、event事件名称
menuClick(menuObj, title, event, value) { return false; },
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标签动态显示菜单内容,没有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>
//要在table渲染完成之后,done()方法里面渲染dropMenu
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({
elem:".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'},
]
});
}
});
//跟input文本框结合使用,做成下拉文本框
layui.dropMenu.render({
elem: $(layero).find("#domainurl"),
type: 1,
location: "r",
width: "160px",
data: [
{ title: '192.168.2.56 : 9102', event: 'event1', value:'192.168.2.56:9102'},
{ title: '测试服务器1', event: 'event2', value:'127.0.0.1:9102' },
{ title: '测试服务器2', event: 'event3', value:'127.0.0.1:9002' },
],
menuClick(menuObj, title, event, value) {
var ip = value.split(":")[0];
var port = value.split(":")[1];
$(layero).find("#domainurl").val(ip);
$(layero).find("#domainport").val(port);
}
});
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。