Admite múltiples tipos de conjuntos de datos para cooperar como fuentes de datos
JQGRID puede vincular tres tipos de datos: XML, JSON y Matrices. El uso de diferentes tipos de datos es principalmente para establecer el atributo de tipo de datos, sus valores son 'XML', 'JSON', 'LOCAL' (Array)
$ ("#grid1"). JqGrid (........ DataType: "xml", .......);Los siguientes enumera los formatos de varios tipos de datos
Formato XML:
<ShowS> <page> </page> <otal> </total> <grogs> </lo registros> <fila id = "rowid"> <cell> value1 </cell> ......... <cell> valuen </cell> </ow> </shows>
formato json
{"página": "número de página", "filas": [{name1: 'value1', name2: 'value2', .... namen: 'valuen'}, .... {..}], "total": registro de registro, "registros: recuento total de registros}
Formato de matriz
var datas = [{name1: 'value1', name2: 'value2', ...... namen: 'valuen'}, .... {....}]; // Agregar datos a jqGrid para (var i = 0; i <= myData.length; i ++) {jQuery ("#grid1"). jqgrid ('addrowdata', i+1, myData [i]);O establecer el atributo de datos
$ ("#grid1"). jqgrid (...... datos: mydata, tipo de datos: 'local', .......);La función de las operaciones estadísticas
Establezca Footerrow en verdadero y ata al evento GridComplete.
$ ("#grid1"). JqGrid (...... Footerrow: true, gridComplete: completaMethod, .......); functionEmethod () {var sum_amount = $ ("#grid1"). getCol ('cantidad', falso, 'sum'); var sum_tax = $ ("#grid1"). sum_total = $ ("#grid1"). getCol ('total', falso, 'suma'); $ ("#grid1"). FooterData ('set', {name: 'total:', cantidad: sum_AMOUNT, Tax: sum_tax, total: sum_total});}Cuando estadísticas, use el método GetCol. El primer parámetro es el valor de nombre de ColMode, y el segundo parámetro se establece en False. De lo contrario, se devolverá una matriz en lugar de datos. El tercero es establecer el método de estadística, incluyendo 'suma', 'AVG' y 'contar'.
Clasificar
Simplemente haga clic en el título de la columna y ordene la columna en orden ascendente o descendente. Establezca si la columna permite la clasificación, establezca en las propiedades de la columna. Al mismo tiempo, para los diferentes tipos de datos, el SortyPe correspondiente debe establecerse, incluidos Int/Integer Integer, Float/Number/Currency Floating Point Tipo, fecha de fecha, texto de texto y función Definir funciones para implementar reglas de clasificación personalizadas.
$ ("#grid1"). jqGrid (........ colmodel: [...... {nombre: 'id', índice: 'id', ancho: 60, myExport: true, editable: true, sorttype: "int", sortable: true}, ............], ......);Agrupamiento
var myData = [{id: "1", Invdate: "2010-05-24", nombre: "Prueba", nota: "Nota", Tax: "10.00", Total: "2111.00"} , {id: "2", Invdate: "2010-05-25", nombre: "test2", nota: "nota2", impuesto: "20.00", total: "320.00"}, {id: "3", invdeado: "2007-09-01", nombre: "test3", nota: "nota 3", fiscal: "30.00", total: total:: total:: "430.00"}, {id: "4", Invdate: "2007-10-04", nombre: "Test", Nota: "Nota", Tax: "10.00", Total: "210.00"}, {id: "5", Invdate: "2007-10-05", nombre: "Test2", nota: "Nota 2", impuestos: "20.00" "20.00" "" 20.00 "" , Total: "320.00"}, {id: "6", Invdate: "2007-09-06", nombre: "test3", nota: "nota3", impuesto: "30.00", total: "430.00"}, {id: "7", invedate: "2007-10-04", nombre: "Test", nota: "Nota", Tax ", Tax", Tax ", Tax "10.00", Total: "210.00"}, {id: "8", Invdate: "2007-10-03", nombre: "test2", nota: "nota 2", cantidad: "300.00", impuestos: "21.00", total: "320.00"}, {id: "9", invdate: "2007-09-09", nombre: nombre: nombre: "Test3", Nota: "Nota3", Cantidad: "400.00", Tax: "30.00", Total: "430.00"}, {id: "11", Invdate: "2007-10-01", Nombre: "Prueba", nota: "Nota", Cantidad: "200.00", Impuesto: "10.00", Total: "210 .00 "}, {id:" 12 ", Invdate:" 2007-10-02 ", nombre:" test2 ", nota:" nota2 ", monto:" 300.00 ", impuestos:" 20.00 ", total:" 320.00 "}, {id:" 13 ", Invdate:" 2007-09-01 ", nombre:" Test3 ", nota: nota:" No: "No:" No: "No TE3 ", Cantidad:" 400.00 ", Impuesto:" 30.00 ", Total:" 430.00 "}, {id:" 14 ", Invdate:" 2007-10-04 ", Nombre:" Test ", Nota:" Nota ", Cantidad:" 200.00 ", Tax:" 10.00 ", Total:" 210.00 "}, {id:" 15 ", I I nvdate: "2007-10-05", nombre: "test2", nota: "nota2", monto: "300.00", impuesto: "20.00", total: "320.00"}, {id: "16", invada: "2007-09-06", nombre: "test3", nota: "nota 3", cantidad: "400 .00 ", impuesto:" 30.00 ", total:" 430.00 "}, {id:" 17 ", Invdate:" 2007-10-04 ", nombre:" prueba ", nota:" nota ", monto:" 200.00 ", impuestos:" 10.00 ", total:" 210.00 "}, {id:" 18 ", Invdate:" 2007-10- 03 ", Nombre:" Test2 ", Nota:" Nota2 ", Cantidad:" 300.00 ", Impuesto:" 20.00 ", Total:" 320.00 "}, {id:" 19 ", Invdate:" 2007-09-01 ", Nombre:" Test3 ", nota:" Nota3 ", Cantidad:" 400.00 ", Tax:" 30.00 "" , Total: "430.00"}, {id: "21", Invdate: "2007-10-01", Nombre: "Prueba", nota: "Nota", cantidad: "200.00", Tax: "10.00", Total: "210.00"}, {id: "22", Invdate: "2007-10-02", nombre: "Test2" , NOTA: "Nota2", Cantidad: "300.00", Impuesto: "20.00", Total: "320.00"}, {id: "23", Invdate: "2007-09-01", nombre: "test3", nota: "nota3", monto: "400.00", impuesto: "30.00", total: "430.00"} , {id: "24", Invdate: "2007-10-04", nombre: "prueba", nota: "nota", cantidad: "200.00", impuesto: "10.00", total: "210.00"}, {id: "25", Invdate: "2007-10-05", nombre: "Test2", nota: nota 2 ", AM" OUNT: "300.00", Tax: "20.00", Total: "320.00"}, {id: "26", Invdate: "2007-09-06", nombre: "Test3", "Nota:" Nota ", Cantidad:" 400.00 ", Impuesto:" 30.00 ", Total:" 430.00 "}, {id:" 27 ", Invdat E: "2007-10-04", Nombre: "Prueba", nota: "Nota", Cantidad: "200.00", Tax: "10.00", Total: "210.00"}, {id: "28", Invdate: "2007-10-03", nombre: "Test2", nota: "Nota 2", Monto: "300.00", TA X: "20.00", Total: "320.00"}, {id: "29", Invdate: "2007-09-01", nombre: "test3", nota: "nota3", cantidad: "400.00", impuestos: "30.00", total: "430.00"}]; jQuery ("#list48"). "Local", altura: 'Auto', Rownum: 30, RowList: [10,20,30], Colnames: ['Inv No', 'Date', 'Cliente', 'Monto', 'Impuesto', 'Total', 'Notas'], ColModel: [{Nombre: 'id', índice: 'id', ancho: 60, 60, 60, sortType: "int"}, {name: 'Invdate', index: 'Invdate', width: 90, sortType: "date", formatter: "date"}, {name: 'name', index: 'name', width: 100, editable: true}, {nombre: 'cantidad', índice: 'monta formatter:"number", editable:true},{name:'tax',index:'tax', width:80, align:"right", sorttype:"float", editable:true}, {name:'total',index:'total',width:80, align:"right", sorttype:"float"}, {name:'note',index:'note',width:150, Ordenable: False}], Pager: "#Plist48", ViewRecords: True, SortName: 'Name', Grouping: True, GroupingView: {Groupfield: ['Name']}, subtítulos: "Datos de matriz de agrupación"});También hay una clasificación más complicada, ¡así que echemos un vistazo a JQGrid Demos!
filtrar
El filtrado de JQGRID no está filtrando contenido en la cuadrícula, pero en realidad filtra los datos en la base de datos.
HTML:
<table id = "s2list"> </table> <div id = "s2pager"> </div>
JavaScript:
jQuery ("#S3List"). JqGrid ('NavGrid', '#S3Pager', {Editar: False, ADD: FALSE, DEL: FALSE, Search: FALSE, REFRESH: FALSE}); jQuery ("#S3List"). JqGrid ('NavButtonAdd', "#S3Pager", {subtition: "Toggle", Title: "Toggle Búsqueda de herramientas", Buttonicon: 'Ui-Icon-Pin-S', onClickButton: function () {Mygrid [0] .Toggletoolbar () }}); jQuery ("#S3List"). JqGrid ('NavButtonAdd', "#S3Pager", {Cuttion: "Clear", Title: "Clear Search", ButtoneCon: 'Ui-Icon-Refresh', OnClickButton: function () {MyGrid [0] .ClaroolBar ()}); jQuery ("#S3List"). JqGrid ('FilterToolBar');Agregar, eliminar, modificar y verificar la barra de herramientas y la barra de paginación
JQGrid viene con una barra de paginación, donde puede agregar, modificar, eliminar y consultar botones.
Agregue una capa más a HTML, y esta capa almacena la barra de paginación:
<div id = "perra"> </div> $ ("#grid1"). jqGrid (...... perra: "#perra", // Esta propiedad también puede establecer la lista de rana rosa de tamaño de página opcional: [10, 20, 30], ......); // La edición, agregada, etc. aquí se corresponde con la edición y la adición de los botones. Al establecer el valor booleano, determina si se debe mostrar jQuery ("#grid1"). JqGrid ('NavGrid', '#Pager', {editar: true, add: true, del: true, búsqueda: true, refresh: true}); // o usar esta forma jQuery ("#grid1"). Jqgrid ('NavGrid', '#pager', {},////options:/altura:/options:/altura:/altura:/:/options:/altura::/opciones:/altura::/:/options:/alturas:/options://altura://altura:/:/altura:/:/options:/:/altura:/option 280, reloadaftersubmit: false}, // editar opciones {altura: 280, reloadaftersubmit: false}, // Agregar opciones {reloadaftersubmit: false}, // opciones {} // opciones de búsqueda);Recuerde asignar el valor editable a verdadero para columnas editables en Colmodel antes de editar.
Leer datos en páginas
Desde la paginación mencionada anteriormente, el siguiente introduce otro método de paginación, que es convertir las páginas a través de barras de desplazamiento. En este método de paginación, todos los datos en la base de datos no se leen y se llenan en la cuadrícula a la vez, sino que se utiliza para obtener qué página de datos está navegando actualmente a través de la barra de desplazamiento, y luego esa parte de los datos se lee de la base de datos.
$ ("#grid1"). JqGrid (...... // Solo después de configurar esto leerá datos de acuerdo con el desplazamiento de la paginación de desplazamiento: 1, // Establezca el tamaño de la página ROWNUM: 10, ......);El siguiente ejemplo solo usa datos locales, lo que también logra el efecto de desplazamiento y giro de páginas.
jQuery ("#scrolling"). jqgrid ({scroll: 1, dataType: "local", data: myData, Height: 100, width: 600, colnames: ['index', ' Nombre: 'Nota', índice: 'nota', ancho: 100}], Rownum: 5, GridView: verdadero, Pager: '#pscrolling', sortName: 'item_id', ViewRecords: true, sortOrder: "asc", tittice: "Carging data mientras se desplaza"});Mesa de padre e hijo
Los subtables se pueden usar mediante la siguiente configuración
$ ("#grid1"). JqGrid (...... // Enable Subgrid de subtables: true, subgridurl: '.........', // Establezca los atributos de subtable subgridModel: [{name: ['name1', 'name2', ......, 'namen'], width: [width1, width2, ......, widthn]}], .......);La configuración de los subtables aquí es solo la más básica. Para obtener más información sobre los atributos, consulte http://www.trirand.com/jqgridwiki/doku.php?id=wiki:subgrid
Obtener/establecer el valor de la celda
Para obtener el valor de una determinada celda, se llama a GetCell (RowID, ICOL). ICOL puede ser el índice de posición actualmente enumerado en el colmodel o el valor del nombre. Nota: Este método no se puede usar al editar filas o celdas. En este momento, el valor devuelto no es el valor cambiado, sino el valor original.
Configuración del valor de una determinada celda SetCell (RowID, Colname, Data, Clase, Propiedades). ROWID: ID de fila actual; colname: nombre de columna o índice de posición de columna, a partir de 0; Datos: cambie el contenido de la celda, y si está vacío, no se actualizará; Clase: si es una cadena, se agregará al CSS de la celda utilizando el método AddClass, y si es una matriz, se agregará directamente a la propiedad de estilo; Propiedades: Establezca la propiedad celular ColModel.
Por supuesto, también puede obtener/establecer filas o columnas. Aquí puede verificar más métodos para obtener/establecer/agregar http://www.trirand.com/jqgridwiki/doku.php?
id = wiki: métodos
Verificación de datos
Al establecer la propiedad Editrules de ColModel, puede verificar los datos de entrada
jQuery ("#grid_id"). jqGrid ({... colmodel: [... {name: 'precio', ..., edittRules: {edithidden: true, requerido: true ....}, editable: true}, ...] ...});A continuación se muestran las opciones de verificación disponibles
Establecer columnas a rayas
jQuery ("#ghcs"). jqGrid ('setGroufeaders', {// set si habilita el efecto colspan usando colspanstyle: false, groufeaders: [{startColumnName: 'colname', // el nombre de la primera columna de la columna de la columna de merma de la columna de columna de columna: número, // el número de member columna de columna: 'Título de la columna de la columna del título de la columna de la columna de la merma, el número de columna de la columna de la merma, el número de la columna Merge de la columna Merge, el número de columna de la columna del título: .....]}Editor
La columna de plantilla de JqGrid viene con algunos editores muy básicos, que incluyen: 'Text' Single-Line Tette TEXT, 'TextAREA' Cadena de texto de múltiples líneas, 'Seleccionar' Casilla de desplazamiento 'Casabía de verificación,' Casilla de verificación 'Password', botón 'Botón', 'Imagen' Botón de imagen, 'Archivo' Archivo de carga y editor 'personalizado' personalizado.
Establecer edittype en colmodel
jQuery ("#grid_id"). jqGrid ({... colmodel: [... {nombre: 'precio', ..., editable: true, edittype: 'text', editOptions: {size: 10, maxlength: 15} ......}, ...] ...});La edición es una configuración para el editor, y el cuadro de texto puede establecer tamaño, maxlength, etc.; La casilla de verificación puede establecer el valor;
ditOptions: {valor: "Sí: no"}
El cuadro desplegable está en este formulario
editOptions: {valor: "val1: text1; val2: text2; val3: text3"}
Para obtener más información, consulte http://www.trirand.com/jqgridwiki/doku.php?id=wiki:common_rule#edittype
La columna de plantilla llama a otros editores
El editor introducido anteriormente usa solo los elementos de formulario de HTML, y el que se introduce a continuación llama al complemento.
<script src = "js/my97datepicker/wdatepicker.js" type = "text/javaScript"> </script> <script type = "text/javaScript"> función initDatePicker (cl) {$ (cl) .Click (function () {WDatePicker ();});} .... jQuery ("#grid_id"). JqGrid ({... colmodel: [... {nombre: 'date', ..., editable: true, editType: 'text', editToPions: {datainit: initDatePicker} ......}, ...];Aquí, el complemento My97DatePicker se llama editor de calendario.
Si desea colocar múltiples controles en una columna de plantilla, puede usar los siguientes métodos
jQuery ("#grid_id"). jqGrid ({... afterInserTrow: function (rowID, adata) {var controls = ""; // control colocado en la plantilla ...... $ ("#grid_id"). jqGrid ('setCell', rowId, 'etiqueta', controles);} ...});Esto en realidad se logra editando su HTML en la celda de la cuadrícula.
Mover la selección de células IMitation Excel
Después de configurar el modo de edición de celda, puede saltar a la celda que debe editar a través de las teclas de navegación hacia arriba, hacia abajo, izquierda y derecha, presione ENTER para ingresar para ingresar al estado de edición, presione la tecla ESC para no guardar los cambios, presione Entrar para guardar los cambios
jQuery ("#grid_id"). jqGrid ({... Celledit: true, cellsubmit: 'clientArray', // define el valor predeterminado de la ubicación de almacenamiento de contenido de celda 'remoto' ...});Lo anterior es un resumen del uso de JQGrid presentados por el editor. Espero que te sea útil. Si tiene alguna pregunta, déjame un mensaje y el editor le responderá a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!