jquery easyui 怎么动态控制toolbar的显示

Posted 2023-03-14

①要控制toolbar的显示状态，首先要获取到toolbar内的每个按钮对象，然后通过设置css属性即可实现显示和隐藏，所以只要在每个toolbar按钮添加id属性即可控制显示
@比如 设置了
toolbar[
id:'edit',
iconCls: 'icon-edit',
handler: function()alert('编辑按钮')

]
然后通过$("#edit").show();$("#edit").hide();即可显示和隐藏 参考技术A

目标：动态控制toolbar的显示

用到的js插件 : jquery easyui

方式一 : 

实例代码:

$('#dg').datagrid(
   toolbar: '#tb'
);
<div id="tb">
   <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"/a>
   <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true"/a>
</div>

隐藏或者显示toolbar：$('#tb').toggle();

方式二：

$('#dg').datagrid(
    toolbar: [
        iconCls: 'icon-edit',
        handler: function()alert('添加')
    ,'-',
        iconCls: 'icon-help',
        handler: function()alert('删除')
    ]
);
隐藏或者显示toolbar：$('#tb').toggle();

注 : toggle() 方法用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件.该方法也可用于切换被选元素的 hide() 与 show() 方法。