jQuery EasyUI 菜单与按钮 – 创建分割按钮（Split Button）
jQuery EasyUI 的 splitbutton 组件是一种特殊的菜单按钮，它将按钮分为两个部分：
- 左侧主体：可点击执行默认主要操作（例如“保存”）。
- 右侧下拉箭头：点击显示关联的下拉菜单，提供更多相关选项。
这比 menubutton 更灵活，常用于“保存”按钮（主体保存，箭头选择“另存为”“保存并关闭”等）。
官方参考：
- 教程：https://www.jeasyui.com/tutorial/mb/splitbutton.php
- 文档：https://www.jeasyui.com/documentation/splitbutton.php
- 在线 Demo：https://www.jeasyui.com/demo/main/index.php?plugin=SplitButton
步骤 1: 引入 EasyUI 资源
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>步骤 2: 创建基本的 Split Button
在 <a> 标签上添加 class="easyui-splitbutton"，并通过 menu 属性指定关联菜单。
<!-- 保存分割按钮 -->
<a href="javascript:void(0)" id="saveBtn" class="easyui-splitbutton"
data-options="menu:'#mm-save',iconCls:'icon-save'">保存</a>
<!-- 关联菜单 -->
<div id="mm-save" class="easyui-menu" style="width:150px;">
<div data-options="iconCls:'icon-save'">保存</div>
<div data-options="iconCls:'icon-save'">另存为...</div>
<div class="menu-sep"></div>
<div data-options="iconCls:'icon-ok'">保存并关闭</div>
<div data-options="iconCls:'icon-cancel'">取消</div>
</div>
<!-- 另一个示例：打印分割按钮 -->
<a href="javascript:void(0)" class="easyui-splitbutton"
data-options="menu:'#mm-print',plain:true,iconCls:'icon-print'">打印</a>
<div id="mm-print" class="easyui-menu">
<div>直接打印</div>
<div>打印预览</div>
<div>页面设置</div>
</div>步骤 3: 处理主体点击和菜单项点击事件
<script type="text/javascript">
$(function(){
// 主体按钮点击（默认操作）
$('#saveBtn').splitbutton({
onClick: function(){
$.messager.alert('提示', '执行默认保存操作');
// 这里写主要保存逻辑
}
});
// 菜单项点击
$('#mm-save').menu({
onClick: function(item){
var text = item.text;
if (text === '保存') {
$('#saveBtn').splitbutton('options').onClick.call($('#saveBtn')[0]);
} else {
$.messager.alert('操作', '您选择了：' + text);
}
}
});
});
</script>步骤 4: 完整示例（工具栏风格 + 多种用法）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery EasyUI Split Button 示例</title>
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<h2>jQuery EasyUI 分割按钮（Split Button）示例</h2>
<p>标准分割按钮：</p>
<a id="sb-save" href="#" class="easyui-splitbutton"
data-options="menu:'#mm1',iconCls:'icon-save'">保存</a>
<div id="mm1" class="easyui-menu" style="width:150px;">
<div data-options="iconCls:'icon-save'">保存</div>
<div data-options="iconCls:'icon-save'">另存为...</div>
<div class="menu-sep"></div>
<div data-options="iconCls:'icon-ok'">保存并继续</div>
<div data-options="iconCls:'icon-reload'">保存并新建</div>
</div>
<p>工具栏风格（plain）：</p>
<div style="padding:10px;background:#eee;">
<a href="#" class="easyui-splitbutton" data-options="menu:'#mm2',plain:true">文件</a>
<a href="#" class="easyui-splitbutton" data-options="menu:'#mm3',plain:true,iconCls:'icon-edit'">编辑</a>
</div>
<div id="mm2" class="easyui-menu">
<div>新建</div>
<div>打开</div>
<div>保存</div>
</div>
<div id="mm3" class="easyui-menu">
<div>剪切</div>
<div>复制</div>
<div>粘贴</div>
</div>
<script>
$(function(){
$('#sb-save').splitbutton({
onClick: function(){
$.messager.alert('保存', '执行默认保存操作');
}
});
$('#mm1').menu({
onClick: function(item){
if (item.text === '保存') {
$('#sb-save').splitbutton('options').onClick();
} else {
$.messager.alert('操作', '选择了菜单项：' + item.text);
}
}
});
});
</script>
</body>
</html>关键说明
- 区别于 menubutton：
- menubutton：整个按钮点击都弹出菜单。
- splitbutton：左侧主体可单独点击执行默认操作，右侧箭头才弹出菜单。
- 常用属性：
menu：关联菜单 ID（必填）。onClick：主体按钮点击事件。plain:true：简洁模式（适合工具栏）。- 支持所有 linkbutton 属性（如
iconCls、disabled）。 - 菜单第一项：通常与主体操作一致，便于用户快速选择。
实际应用场景
- 富文本编辑器：加粗（主体） + 下拉更多样式。
- 数据表格：导出（主体导出 Excel） + 下拉选择 PDF、CSV 等。
- 表单：提交（主体提交） + 下拉“提交并新增”等。
更多示例：
- 官方分割按钮教程：https://www.jeasyui.com/tutorial/mb/splitbutton.php
- 与 toolbar 结合：常用于 datagrid、window、dialog 的工具栏。
如果需要将这些按钮集成到 datagrid 工具栏、动态菜单，或其他高级用法示例，请继续提问！
