Documentación de AnexGRID

Configuración

La configuración base de AnexGRID recibe la siguiente lista de parámetros.

Propiedad Descripción Por defecto Ejemplo
class Especifica clases adicionales para la tabla de Boostrap 3. vacío
  • .table-condensed
  • .table-bordered
  • .table-striped
  • otros
columnas Especifica las columnas que va a contener la grilla. [ ] Se especifica un array
Columnas
leyenda Especifica el nombre que va a mostrar esta columna en la cabecera. Vacío 'Nombre'
style Especifica los estilos que se le puede asignar a esta columna. Vacío 'width:100px;background:red;'

{ width: '100px', background: 'red' }
class Especifica una clase CSS. Vacío '.info'
columna Especifica el nombre de la columna, esta información es enviada al servidor por lo tanto debería coincidir con la consulta SQL actual. Vacío 'Profesion_id'
ordenable Especifica si la columna actual puede ser ordenada o no. false true || false
filtro Especifica si la columna actual puede ser filtrable o no. false boolean || function
formato Muestra un valor personalizado mediante una cadena que reemplazará a la leyenda de nuestra cadena. Si se ha especificado un formato personalizado no hace falta definir la leyenda, porque esta será omitada. Vacío return '<i class="glyphicon glyphicon-user"></i> Nombre';
modelo Especifica el modelo actual de la información a consumir, es decir los registros que se obtiene desde el servidor para que AnexGRID pueda generar la grilla. [ ] Se especifica un array
Modelo
propiedad Especifica el nombre que va a mostrar en la celda, este debe coincidir con la información obtenida del servidor. Vacío 'Nombre'
formato Especifica un valor personalizado que se va a mostrar en la celda mediante una función, la función espera 3 parámetros de entrada: tr, obj, celda. Vacío function(tr, obj, celda){
return obj.Nombre + ' ' + obj.Apellido;
}
tr Hace referencia al <tr> actual de la fila que esta recorriendo.
Si queremos obtener el ID de la fila actual, hacemos un: var id = tr.attr('fila');
tr.css('background', 'red');
obj Hace referencia al objeto actual que se esta recorriendo en la colección de registros obtenida del servidor. Podemos acceder a cualquier de las propiedades de nuestro modelo actual. obj.Nombre
celda Hace referencia al valor que se le ha definido por defecto, siempre y cuando, la propiedad "propiedad" haya sido definido previamente. 'Mi nombre es ' + celda;
class Especifica una clase CSS. Vacío '.info'
style Especifica los estilos que se le puede asignar a esta fila. Vacío 'background:red;height:60px;'
url Especifica la ruta URL del servicio que AnexGRID debe usar para consumir la información. vacío 'alumnos/listar'
type Especifica bajo que método va a realizarce la petición AJAX. POST POST || GET
dataType Especifica en que formato debe estar la información obtenida del servidor. JSON JSON || JSONP (Sin probar)
parametros Agrega información adicional a la petición AJAX realizada. [] {desde: '1989/02/11'},
{hasta: '2015/02/11'}


ASP.NET MVC
{clave: 'desde',valor: '1989/02/11'},
{clave: 'desde',valor: '1989/02/11'}
paginable Especifica si la grilla debe ser paginable o no. false true || false
filtrable Especifica si la grilla va implementar filtros a las columnas que se le haya especificado previamente como filtrable. false true || false
limite Especifica la cantidad de registros a mostrar por página. 20 20 || [20, 40, 60]
columna Especifica la columna por defecto que debe considerar para ordenar los registros. vacío id
columna_orden Especifica el orden que debe tener la columna, ya sea ascedente o descendente. vacío DESC

Después de configurar

Después de haber realizado la configuración, AnexGRID retorna un objeto que contiene ciertas propiedades. Para esto, vamos a guardar la inicialización en una variable llamada anexGrid.

var anexGrid = $("#list").anexGrid({ ... });
Propiedad Descripción Ejemplo
total() Retorna la cantidad de registros encontrados en la última petición al servidor. anexGrid.total()
tabla() Retorna una instancia de la tabla que ha AnexGRID ha generado, $("<table />"). anexGrid.tabla()
refrescar() Hace que AnexGRID vuelva a consultar al servidor regresando la página actual a la primera. anexGrid.refrescar()
parametros(param) Especifica parámetros adicionales que AnexGRID debe considerar dentro de cada petición que realice al servidor. anexGrid.parametros({ fecha_inicio: '2020-09-27' })
obtener(indice) Retorna dentro de nuestro colección actual el indice especificado. var fila = anexGrid.obtener(4);
alert('Hola soy: ' + fila.Nombre);

Controles AnexGRID

Se han implementado una serie de funciones que nos permite generar ciertas etiquetas HTML de manera más ágil.

Propiedad Descripción Por defecto Ejemplo
Propiedades en común, todas las funciones implementan propiedades básicas.
contenido Especifica el nombre o contenido que va a visualizar el control. Por ejemplo, si hablamos de una etiqueta de botón, es el texto que va a contener dicha etiqueta. Vacío Editar
<i class="glyphicon glyphicon-pencil"></i>
class Especifica la clase CSS que va implementar el control. Vacío .btn-primary .btn-lg
style Especifica las reglas CSS que va implementar el control. Vacío width:100px;background:red;
attr Especifica atributos adicionales que debe implementar el control. [ ] [
'disabled',
'readonly',
'maxlength="1"'
]
anexGrid_boton
type Especifica el tipo del control. button submit
value Especifica el valor del control. Vacío 4
anexGrid_link
href Especifica la URL que debe apuntar el control. Vacío http://anexsoft.com
target Especifica donde se va abrir el enlace. _self _blank
anexGrid_input
type Especifica el tipo del control. text email
value Especifica el valor del control. Vacío 4
anexGrid_imagen
src Especifica la ruta que debe usar para mostrar como imagen. Vacío http://anexsoft.com/anexgrid/anexgrid.jpg
anexGrid_select
selected Especifica la opción por defecto que debe estar seleccionada. Vacío 4
data Especifica las opciones disponibles para el control. [ ] [
{ valor: 1, contenido: 'Doctor'},
{ valor: 2, contenido: 'Músico'},
{ valor: 3, contenido: 'Abogado'}
]
valor Especifica el valor que tiene la opción. 1
contenido Especifica el texto que va a mostrar la opción. Doctor
anexGrid_dropdown
id Especifica el ID que debe contener el control. Vacío dropdown-1
data Especifica las opciones disponibles para el control. [ ] [
{ href: 'alumno/editar/1', contenido: 'Editar'},
{ href: 'alumno/eliminar/1', contenido: 'Eliminar'}
]
href Especifica la URL que debe apuntar la opción. alumno/editar/1
contenido Especifica el texto que va a mostrar la opción. Editar

Dudas y/o sugerencias deja un comentario ..

Desarrollado por Anexsoft.