DESCRIPCION
DJsonLoader es un plugin de jquery para la carga de datos
obtenidos en formato JSON no solo en formularios, sino también en cualquier
otro contenedor HTML (div, nav, section,
article, etc), además los datos se pueden cargar en cualquier campo de
formulario u otras etiquetas HTML(a, img, p, span, iframe, etc), de forma sencilla,
rápida y flexible.
Cuenta con otras características como:
- · Se pueden cargar datos de objetos embebidos dentro de otros y arrays simples.
- · Realizar reset de formularios y otros contenedores HTML.
- · Se pueden cargar opciones a las etiquetas select a partir de arrays simples o de objetos con múltiples opciones configurables.
- · Se pueden cargar todo tipo de etiquetas como los src de img, iframe, etc. o href para los links.
- · Se pueden cargar elementos de listas (ol, ul) a partir de arrays simples.
- · Se pueden cargar tanto objetos JSON como Strings con formato JSON.
- · Los datos se cargan donde la variable coincida con el atributo name (para campos de formulario), class para cualquier etiqueta o el atributo data-djload de manera general.
Con NPM: npm install djsonloader
Con Bower: bower install DJsonLoader --save
Descarga directa en zip
API
Uso del plugin:
$(container).djload([json],[options]);
Se invoca sobre formularios,
campos select o cualquier otro
contenedor html (div, nav, section,
article, etc.) como función a ser llamada cuando se necesite, tiene las
siguientes funciones: cargar datos JSON en su contenedor, cargar opciones de un
select, hacer reset de los datos de su contenedor y modificar los parámetros por defecto.
Parámetro
|
tipo
|
Descripción
|
json
|
Json object,
array,
string
|
·
Si se especifica un objeto json o un string
con formato json, se utilizan los datos que contienen para cargar el
contenedor sobre el que se aplica el plugin, el objeto puede contener otros
objetos y arrays simples.
·
Cuando se aplica sobre un select, este
parámetro debe ser un array o un string con formato de array, con los datos a
utilizar para cargar el select.
·
Se coloca el valor ‘reset’, para que se haga reset del contenedor sobre el que se
aplica el plugin.
·
Se colocar el valor ‘options’, para modificar de forma global los parámetros del
plugin, reemplazándolos con los pasados en el parámetro [options].
|
options
|
Json object
|
Opcional, un objeto con los parámetros del plugin (especificados en
la tabla de opciones).
|
Ejemplos:
Carga de un
formulario, obteniendo datos json mediante Ajax u otros medios:
$("#myform").djload(data);
Carga de un
formulario, especificando una función que se ejecuta al finalizar la carga de
datos:
$("#myform").djload(data,{
onLoad:function($container){
$container.find('select').
trigger('chosen:updated');
}
});
Carga de un
formulario, haciendo reset de los datos antes de cargar:
$("#myform").djload(data,{
Reset:true,
}
});
Ejemplo de datos json
utilizados:
data= {
firstname:"David",
lastname:"Jerez",
age:25,
sex:"M",
notify:true,
obs:"pending
certification",
languages:[1,4,6],
lastpost:"DJsonLoader!",
accessdata:{
login:"admin",
password:"123",
idrole:3
}
};
Carga de las opciones
de un select, mediante datos de un array:
//simple
var levels='["A","B","C","D"]';
$("#levels").djload(levels);
//object
var fruits=[{id:1,name:"banana",last:false},
{id:2,name:"pineapple",last:true},
{id:3,name:"lemon",last:false}];
$("#fruits").djload(fruits,{
slabel:'name',
svalue:'id',
sselected:'last'
});
Opciones disponibles:
Opción
|
Tipo
|
Descripción
|
Ejemplo
|
onLoad
|
function
|
Función del usuario a ejecutar cuando se terminan de cargar los
datos, para realizar operaciones adicionales.
|
onLoad:function($container){
console.log(‘load success’);
}
|
onReset
|
function
|
Función del usuario a ejecutar cuando se termina el reset de los
datos, para realizar operaciones adicionales.
|
onReset:function($container){
console.log(‘reset success’);
}
|
reset
|
boolean
|
Indica si se debe hacer reset antes de cargar los datos, por defecto
es false.
|
reset: true
reset false
|
resetchar
|
string
|
String a utilizar para hacer reset en las etiquetas que no sean de
formulario (p, span, b, h1, etc.), por defecto es una cadena vacía.
|
resetchar: ‘*’
resetchar: ‘-’
resetchar: ‘…’
|
slabel
|
string
|
Utilizado cuando se carga un select
con un array de objetos, es el
nombre del atributo a utilizar como etiqueta (option).
|
slabel:'name'
|
svalue
|
string
|
Utilizado cuando se carga un select
con un array de objetos, es el
nombre del atributo a utilizar como valor de los option.
|
svalue:'id'
|
sselected
|
string
|
Utilizado cuando se carga un select
con un array de objetos, es el
nombre del atributo a utilizar para determinar si la option debe estar seleccionada (selected).
|
sselected:'last'
|
sempty
|
boolean
|
Utilizado cuando se carga un select,
indica si se debe crear una opción adicional vacía por defecto.
|
sempty:true
|
selabel
|
string
|
Utilizado cuando se carga un select,
si sempty es true, es la
etiqueta que debe mostrar la opción vacía creada (por defecto: ‘select an option...’).
|
sempty:'select a
fruit'
|
sevalue
|
string
|
Utilizado cuando se carga un select,
si sempty es true, es el valor
que debe tener la opción vacía creada (por defecto una cadena vacía).
|
sempty:0
|
Como se cargan los datos:
Etiquetas HMTL
|
Atributo o propiedad
modificada
|
Tipo de valor esperado
|
Input de tipo radio o
checkbox
|
checked
|
Cualquier tipo excepto object
|
Input (excepto de tipos
radio o checkbox)
Textarea
Select
|
value
|
Para select multiple:
Array de tipos básicos.
Para el resto cualquier tipo excepto object
|
a
|
href
|
string
|
Img
Iframe
|
src
|
string
|
Ul
Ol
|
Genera elementos li y
agrega el html.
|
Array de tipos básicos.
|
Resto de etiquetas HTML
|
html
|
Cualquier tipo excepto object
|
No hay comentarios:
Publicar un comentario