jEasyUI 创建复杂工具栏学习笔记

简介

jEasyUI是一个简单易用的jQuery UI组件库，其中包含了众多易于使用的UI控件和常用的JS插件。jEasyUI中的Toolbar控件提供了便捷的工具栏创建功能，可以轻松实现各种复杂的工具栏。

创建工具栏

jEasyUI的Toolbar控件支持两种创建方式，一种是通过HTML元素创建，另一种则是通过JavaScript代码动态创建。

通过HTML元素创建

使用HTML元素创建工具栏，可以在HTML文件中直接添加一个div元素，并设置class属性为“easyui-toolbar”，然后在该元素中添加各个工具按钮即可。例如：

htmlCopy Code
<div class="easyui-toolbar">
    <a href="#" class="easyui-linkbutton" iconCls="icon-add">添加</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-edit">编辑</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-remove">删除</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-reload">刷新</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-search">搜索</a>
</div>

上述代码会生成一个包含五个工具按钮的工具栏。

通过JavaScript代码创建

通过JavaScript代码创建工具栏，需要对Toolbar控件进行初始化，并使用add方法添加各个工具按钮。例如：

javascriptCopy Code
$('#toolbar').toolbar({
    items:[{
        text:'添加',
        iconCls:'icon-add',
        handler:function(){/*添加操作*/},
    },{
        text:'编辑',
        iconCls:'icon-edit',
        handler:function(){/*编辑操作*/},
    },{
        text:'删除',
        iconCls:'icon-remove',
        handler:function(){/*删除操作*/},
    },{
        text:'刷新',
        iconCls:'icon-reload',
        handler:function(){/*刷新操作*/},
    },{
        text:'搜索',
        iconCls:'icon-search',
        handler:function(){/*搜索操作*/},
    }]
});

上述代码会生成一个包含五个工具按钮的工具栏，并将其附加到id为“toolbar”的div元素上。

示例

下面是一个复杂的工具栏示例，包含了按钮、文本框、下拉菜单等多种类型的控件。

htmlCopy Code
<div class="easyui-toolbar">
    <a href="#" class="easyui-linkbutton" iconCls="icon-add">添加</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-edit">编辑</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-remove">删除</a>
    <a href="#" class="easyui-separator"></a>
    <span>搜索：</span>
    <input class="easyui-searchbox" style="width:200px;">
    <a href="#" class="easyui-linkbutton" iconCls="icon-search">搜索</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-undo">撤销</a>
    <a href="#" class="easyui-menubutton" iconCls="icon-redo">重做</a>
    <div id="menu">
        <div data-options="iconCls:'icon-save'">保存</div>
        <div data-options="iconCls:'icon-cut'">剪切</div>
        <div data-options="iconCls:'icon-copy'">复制</div>
        <div data-options="iconCls:'icon-paste'">粘贴</div>
        <div class="menu-sep"></div>
        <div data-options="iconCls:'icon-add'">添加</div>
        <div data-options="iconCls:'icon-remove'">删除</div>
        <div data-options="iconCls:'icon-edit'">编辑</div>
    </div>
</div>

<script>
    $('#menu').menu();
    $('#toolbar').toolbar({
        items:[{
            text:'添加',
            iconCls:'icon-add',
            handler:function(){/*添加操作*/},
        },{
            text:'编辑',
            iconCls:'icon-edit',
            handler:function(){/*编辑操作*/},
        },{
            text:'删除',
            iconCls:'icon-remove',
            handler:function(){/*删除操作*/},
        },{
            text:'-',
        },{
            text:'搜索：',
        },{
            text:'',
            width:200,
            menu:'#menu',
            prompt:'请输入搜索关键字',
            searcher:function(value){/*搜索操作*/},
        },{
            text:'搜索',
            iconCls:'icon-search',
            handler:function(){/*搜索操作*/},
        },{
            text:'撤销',
            iconCls:'icon-undo',
            handler:function(){/*撤销操作*/},
        },{
            text:'重做',
            iconCls:'icon-redo',
            menu:'#menu',
        }]
    });
</script>

上述代码会生成一个包含了各种类型的控件的复杂工具栏，其中搜索框拥有下拉菜单，可以选择多个操作，同时支持搜索关键字输入。