按钮与linkbutton
大约 1 分钟easyui
linkbutton
要隐藏按钮在 data-options 中使用 hidden
// 模板代码制作 linkbutton
<a id="linkBtn" href="#" class="easyui-linkbutton" data-options="hidden:true,plain:true">保存</a>
// 为 linkbutton 绑定点击事件
$('#linkBtn').linkbutton({
iconCls: 'icon-search',
onClick: function (){
alert('linkbutton');
}
});
// 通过 onclick 调用点击事件
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#dlg').dialog('open')">Open</a>
初始化
使用纯 DOM 方法(document.createElement('a'))创建的 <a class="easyui-linkbutton" data-options="...">,只会生成了 HTML 结构,但并没有被 EasyUI 初始化为真正的 linkbutton 组件。
EasyUI 的组件(linkbutton、combobox、datebox 等)都需要通过 jQuery 插件方式显式初始化,例如:
$('.easyui-linkbutton').linkbutton();
或者更常见的是在页面加载时统一初始化,或者在动态创建后手动调用 .linkbutton() 来“激活”它。例如在 xzy 项目中文件 utils.js 中通过 HelpButton 对象初始化 linkbutton 的做法
控制按钮是否可用
旭纸业项目序时表的工具栏按钮使用的按钮,通过下面方法控制按钮是否可用
function showToolBtns(){
const inspect = parseInt($("#jiancha").combobox('getValue'));
if(inspect === 0){// 未检查
$("#btn_add").linkbutton("enable");
$("#btn_purchase_gen").linkbutton("disable");
}else if(inspect === 1){// 已检查
$("#btn_add").linkbutton("disable");
$("#btn_purchase_gen").linkbutton("enable");
}else{
$("#btn_add").linkbutton("enable");
$("#btn_purchase_gen").linkbutton("enable");
}
}
