jQuery EasyUI Cuadrícula de datos - crear barras de herramientas complejas
Data Grid (cuadrícula de datos) barra de herramientas (barra de herramientas) puede contener botones y otros componentes. Puede pasar a un etiquetas DIV existentes a disposición de la barra fácilmente personalizado, la etiqueta DIV se convertirá en el contenido de la barra de herramientas de cuadrícula de datos (cuadrícula de datos). Este tutorial le mostrará cómo crear barra de herramientas de componentes complejos de cuadrícula de datos (DataGrid).
Crear una barra de herramientas (barra de herramientas)
<Id = estilo "tb" Div = "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> Desde la fecha: <class = estilo "easyui-datebox" entrada = "width: 80px"> A: <class = estilo "easyui-datebox" entrada = "width: 80px"> idioma: <Class = estilo "easyui-cuadro combinado" Entrada = "width: 100px" url = "data / combobox_data.json" campo de Valor = "id" textField = "text"> <a href="#" class="easyui-linkbutton" iconCls="icon-search"> Buscar </a> </ Div> </ Div>
Creación de una cuadrícula de datos (DataGrid)
<Class = estilo "easyui-cuadrícula de datos" Tabla = "width: 600px; altura: 250px" url = "data / datagrid_data.json" title = "DataGrid - Barra de herramientas Complejo" barra de herramientas = "# tb" singleSelect = "true" fitColumns = "true"> <Culata en T> <Tr> <Campo Th = "Itemid" width = "60"> ID del elemento </ th> <Campo Th = "ProductID" width = "80"> Identificación del producto </ th> <Th Campo = "Precio de la lista" align = ancho "derecho" = "70"> Lista de Precios </ th> <Campo Th = "unitcost" align = "right" width = "70"> Costo unitario </ th> <= Th Campo "attr1" width = "200"> Dirección </ th> <Campo Th = "status" width = "50"> Estado </ th> </ Tr> </ Culata en T> </ Table>
Como se puede ver, el cuadro de cuadrícula de datos (DataGrid) Los campos barra de herramientas de diálogo (diálogo) similar. No necesitamos que escribir ningún código Javascript, puede crear una barra de herramientas con la red de datos complejos (cuadrícula de datos).