EasyUI数据表格之二

张哥编程

发布于 2024-12-17 15:10:22

1090

toolBar属性：datagrid 的toolbar能包含的不仅仅只是按钮(button)也可以是其他的任何的组件,你可以简单的定义一个toolbar布局通过一个已存在的DIV 标记它将成datagrid 的toolbar内容。在<div>标签上定义工具栏：

<div id="tb">

<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add,plain:true"/a>

<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cut',plain:true"/ass>

<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true"/a>

</div>

效果如图所示：

同样也可以通过JS数组形式来实现：

$('#tb').datagrid({

               toolbar: [{

                               iconCls: 'icon-add,

                               handler: function(){alert('增加按钮')}

               },{

                               iconCls: 'icon-cut',

                               handler: function(){alert('剪切按钮')}

               }]'-',{

                 iconCls: 'icon-save,

                               handler: function(){alert('保存按钮')}

}

});

既然可以实现简单的toolBar形式，按照在div上实现UI显示的思路，是否可以实现按照日期、语言等复合属性查找的呢？

即如下效果：

只需要在刚才Div下面加入日期、语言、查找按钮的div即可，参考代码如下：

<div>

                            Date From: <input class="easyui-datebox" style="width:80px">

                            To: <input class="easyui-datebox" style="width:80px">

                            Language:

                            <select class="easyui-combobox" panelHeight="auto" style="width:100px">

                                     <option value="java">Java</option>

                                     <option value="c">Android</option>

                                     <option value="basic">R</option>

                                     <option value="perl">Perl</option>

                                     <option value="python">Python</option>

                            </select>

                            <a href="#" class="easyui-linkbutton" iconCls="icon-search">Search</a>

                   </div>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-03-16，如有侵权请联系 cloudcommunity@tencent.com 删除

easyui