Video class: https://edu.csdn.net/course/play/7621
ToolBar attribute: The toolbar of the datagrid can contain not only buttons but also any other components. You can simply define a toolbar layout and mark it as the toolbar content of the datagrid through an existing DIV mark. Define the toolbar on the <div> tag:
<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> |
The effect is shown in the figure:
The same can also be achieved in the form of JS array:
$('#tb').datagrid({ toolbar: [{ iconCls: 'icon-add, handler: function(){alert('Add button')} },{ iconCls: 'icon-cut', handler: function(){alert('cut button')} }]'-',{ iconCls: 'icon-save, handler: function(){alert('Save button')} } }); |
Now that a simple toolBar form can be realized, according to the idea of realizing UI display on div, can it be realized according to compound attributes such as date and language?
That is, the following effects:
Just add the date, language, and search button div below Div. The reference code is as follows:
<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> |