EasyUI數據表格之二

視頻課：https://edu.csdn.net/course/play/7621

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>