跳至主要內容

按钮与linkbutton

chanchaw大约 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 的组件(linkbuttoncomboboxdatebox 等)都需要通过 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");
    }
}