jQuery EasyUI DataGrid -Crear barra de herramientas compleja

La barra de herramientas (toolbar) del DataGrid (datagrid) puede contener botones y otros componentes. Puede definir fácilmente el diseño de la barra de herramientas utilizando una etiqueta DIV existente; dicha etiqueta DIV se convertirá en el contenido de la barra de herramientas del DataGrid (datagrid). Este tutorial le mostrará cómo crear la barra de herramientas compleja del componente DataGrid (datagrid).

Crear barra de herramientas (Toolbar)

    <div id="tb" style="padding:5px;height:auto">
        <div style="margin-bottom:5px">
            <a href="../index.html" class="easyui-linkbutton" iconCls="icon-add" plain="true"></a>
            <a href="../index.html" class="easyui-linkbutton" iconCls="icon-edit" plain="true"></a>
            <a href="../index.html" class="easyui-linkbutton" iconCls="icon-save" plain="true"></a>
            <a href="../index.html" class="easyui-linkbutton" iconCls="icon-cut" plain="true"></a>
            <a href="../index.html" class="easyui-linkbutton" iconCls="icon-remove" plain="true"></a>
        </div>
        <div>
            Date From: <input class="easyui-datebox" style="width:80px">
            To: <input class="easyui-datebox" style="width:80px">
            Language: 
            <input class="easyui-combobox" style="width:100px"
                    url="data/combobox_data.json"
                    valueField="id" textField="text">
            <a href="../index.html" class="easyui-linkbutton" iconCls="icon-search">Search</a>
        </div>
    </div>

Crear DataGrid

    <table class="easyui-datagrid" style="width:600px;height:250px"
            url="data/datagrid_data.json" 
            title="DataGrid - Complex Toolbar" toolbar="#tb"
            singleSelect="true" fitColumns="true">
        <thead>
            <tr>
                <th field="itemid" width="60">Item ID</th>
                <th field="productid" width="80">Product ID</th>
                <th field="listprice" align="right" width="70">List Price</th>
                <th field="unitcost" align="right" width="70">Unit Cost</th>
                <th field="attr1" width="200">Address</th>
                <th field="status" width="50">Status</th>
            </tr>
        </thead>
    </table>

Como puede ver, la barra de herramientas del DataGrid (datagrid) es similar al cuadro de diálogo (dialog). No necesitamos escribir ningún código JavaScript para crear un DataGrid (datagrid) con una barra de herramientas compleja.

Descargar ejemplos de jQuery EasyUI

jeasyui-datagrid-datagrid19.zip