jQuery EasyUI Data Grid - erstellen komplexe Symbolleisten
Data Grid (Datagrid) Symbolleiste (Toolbar) können Schaltflächen und andere Komponenten enthalten. Sie können einen eine vorhandene DIV-Tags auf einfache Weise benutzerdefinierte Symbolleiste Layout übergeben, das DIV-Tag wird der Inhalt des Datengitter (Datagrid) Symbolleiste wird geworden. Dieses Tutorial zeigt Ihnen, wie Sie komplexe Datenraster-Symbolleiste (Datagrid) Komponenten zu erstellen.
Erstellen Sie eine Symbolleiste (Toolbar)
<Div id = "tb" style = "padding: 5px; height: auto"> <Div style = "margin-bottom: 5px"> <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true"> </a> <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true"> </a> <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true"> </a> <a href="#" class="easyui-linkbutton" iconCls="icon-cut" plain="true"> </a> <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true"> </a> </ Div> <Div> Datum Ab: <input class = "easyui-datebox" style = "width: 80px"> An: <input class = "easyui-datebox" style = "width: 80px"> Sprache: <Input class = "easyui-Combobox" style = "width: 100px" url = "data / combobox_data.json" Valuefield = "id" textfield = "text"> <a href="#" class="easyui-linkbutton" iconCls="icon-search"> Suche </a> </ Div> </ Div>
Erstellen eines Data Grid (Datagrid)
<Table class = "easyui-Datagrid" style = "width: 600px; height: 250px" url = "data / datagrid_data.json" title = "Datagrid - Komplexe Toolbar" Symbolleiste = "# tb" singleSelect = "true" fitColumns = "true"> <Thead> <Tr> <Th Feld = "itemid" width = "60"> Item ID </ th> <Th Feld = "productid" width = "80"> Product ID </ th> <Th Feld = "gelisteter" align = "right" width = "70"> Listenpreis </ th> <Th Feld = "Unitcost" align = "right" width = "70"> Kosten pro Einheit </ th> <Th Feld = "attr1" width = "200"> Adresse </ th> <Th Feld = "Status" width = "50"> Status </ th> </ Tr> </ Thead> </ Table>
Wie Sie sehen können, das Datenraster (Datagrid) Symbolleiste Dialogfeld Felder (Dialog) ähnlich sehen. Wir brauchen keine JavaScript-Code zu schreiben, können Sie eine Symbolleiste mit komplexen Datenraster erstellen (Datagrid).