Personalizar las plantillas Editar cuadrícula

Este tutorial te ayuda a personalizar las plantillas de encabezado y fila de una cuadrícula de edición para mejorar su atractivo visual. Aprenderás a ampliar el ancho de una columna específica y a aplicarle una clase bg-success CSS.

Prerrequisitos:

1. Instala Persistence.Activities versión 1.4.8 o superior.
2. Selecciona Formularios avanzados para la actividad Crear tarea de formulario .

1. Ve a la pestaña Plantillas de Editar cuadrícula.
2. En la plantilla de encabezado , reemplaza el contenido con el siguiente fragmento de código:

   <div class="row">
         <div class="col-sm-2">{{ components[0].label }}</div>
         <div class="col-sm-6 bg-success">{{ components[1].label }}</div>
         <div class="col-sm-2">{{ components[2].label }}</div>
   </div>

   En el fragmento de código, modificamos la fila <div class="col-sm-2">{{ component.label }}</div> para representar la primera columna en Editar cuadrícula. Hemos sustituido component por components[0] para poder identificar las columnas por sus números de índice. Duplicamos esta fila para cada columna en Editar cuadrícula. A continuación, añadimos la clase bg-success al componente deseado y cambiamos la clase col-sm-2 a col-sm-6 para una apariencia más amplia.
3. En la Plantilla de fila , reemplaza el contenido con el siguiente fragmento de código:

   <div class="row">
             <div class="col-sm-2">
               {{ isVisibleInRow(components[0]) ? getView(components[0], row[components[0].key]) : ''}}
             </div>
           <div class="col-sm-6 bg-success">
             {{ isVisibleInRow(components[1]) ? getView(components[1], row[components[1].key]) : ''}}
             <div class="col-sm-2">
             {{ isVisibleInRow(components[2]) ? getView(components[2], row[components[2].key]) : ''}}
            
           <div class="row">
         {% util.eachComponent(components, function(component) { %}
           {% if (displayValue(component)) { %}
             <div class="col-sm-2">
               {{ isVisibleInRow(component) ? getView(component, row[component.key]) : ''}}
             </div>
           {% } %}
         {% }) %}
         {% if (!instance.options.readOnly && !instance.disabled) { %}
           <div class="col-sm-2">
             <div class="btn-group pull-right">
               <button class="btn btn-default btn-light btn-sm editRow"><i class="{{ iconClass('edit') }}"></i></button>
               {% if (!instance.hasRemoveButtons || instance.hasRemoveButtons()) { %}
                 <button class="btn btn-danger btn-sm removeRow"><i class="{{ iconClass('trash') }}"></i></button>
               {% } %}
             </div>
           </div>
         {% } %}
       </div>

   En el fragmento de código, actualizamos la fila <div class="col-sm-2" {{ isVisibleInRow(components[0]) ? getView(components[0], row[components[0].key]) : ''}} </div> para representar la primera columna. Y luego reemplazó component con components[0], para que podamos identificar las columnas por su número de índice. Duplicamos esta fila para cada columna en Editar cuadrícula. Y luego, para la misma columna que modificamos en la Plantilla de encabezado , cambiamos la clase col-sm-2 a col-sm-6 y añadimos la clase bg-success en la Plantilla de fila.
   
   

   

   
   

Estos pasos amplían el ancho de la columna designada y aplican la clase bg-success , haciendo que la columna ocupe el 60 % del espacio de Editar cuadrícula y dándole un fondo verde.

Ejemplo de flujo de trabajo

Para seguir los pasos y probar este tutorial, descarga el flujo de trabajo de muestra aquí.