¿Cómo vincular el complemento JQuery JQgrid?
lt; link href=".../.../Scripts/JQgrid/jquery-ui-1.8.23.custom/css/ui - ligereza/jquery-ui-1.8.23.custom.css" rel="stylesheet" type="text/css" /gt;
lt; link href="... lt; enlace href = ".../.../Scripts/JQgrid/jquery.jqGrid-4.4.1/css/ui.jqgrid.css" rel="stylesheet" type="text/css" /gt;
lt;script src=".../.../Scripts/JQgrid/jquery.jqGrid-4.4.1/js/i18n/grid.locale-en.js" type="text/javascript"gt;lt ; /scriptgt;
lt;scriptrc=".../.../Scripts/JQgrid/jquery.jqGrid-4.4.1/js/jquery.jqGrid.min.js "type="texto / javascript"gt;lt;/scriptgt;
A continuación, podemos comenzar a escribir el siguiente código en el archivo de vista que desee. Por supuesto, puede configurar sus propiedades según sus preferencias, JQgrid tiene muchas propiedades, Puede encontrar más propiedades y eventos en el ejemplo de demostración anterior.
lt;script type="text/javascript"gt;
jQuery(documento).ready(función () {
jQuery("#lista" ).jqGrid({
url: '/UserView/UserMaintenance', //---necesario
tipo de datos: 'json', //---necesario
mtype: "GET", //---necesario
//datatype: 'local', //----add
//data: mydata, // ---agregar
colNames: ['Nombre', 'ID', 'Activo', 'Grupo de clientes'], //----editar
colModel: [
{ nombre: 'Nombre', índice: Nombre', ancho: 500, ordenable: falso },
{ nombre: 'CP_CSTMR_ID', índice: nombre: 'CP_CSTMR_ID' , índice: 'CP_CSTMR_ID', ancho: 100 },
{ nombre: 'Activo', índice: Nombre: 'Grupo de clientes' (grupo de clientes), índice: Grupo de clientes', ancho: 100, disponible ordenar: falso}.
//---editar
{ nombre: 'Grupo de clientes', índice: Grupo de clientes', ancho: 100, ordenable: falso }-editar
],
buscapersonas: '#pager',
número de fila: 10,
nombre de clasificación: 'CP_CSTMR_ID',
ordenable: verdadero,
ordenación: asc',
lista de filas: [10, 15, 20],
viewrecords: true,
título: 'Lista de mantenimiento de usuarios',
altura: 230,
loadtext: 'Cargando datos, por favor espere...'
publicación: 'Lista de mantenimiento de usuarios',
altura: 230,
loadtext: 'Cargando datos, por favor espere...'
postData:
{
nombre: función () { return jQuery("#nombre").val() },
activo: función () { return jQuery("#opción activa: seleccionado").val() } p>
},
onSortCol: función (índice, colindex, ordenación) {
}
// gridComplete: función()
// {
// $(ventana).resize(function(){
// var winwidth=$(ventana).width()*0.5;
// $("#list").setGridWidth(winwidth
// })
// }
});
jQuery("#list")
.jqGrid('navGrid', '#pager', { del: false, add: false, edit: false, buscar : false }, {}, { }, {}, {}, { multipleSearch: false })
.navButtonAdd('#pager', {
caption: "Buscar" ,
buttonicon: "ui-icon-search",
onClickButton: función () {
},
posición: " último",
id: "searchButton"
})
.navButtonAdd('#pager', {
título: " Ver detalles",
buttonicon: "ui
-icon-detail",
id: "ver detalles",
onClickButton: función () {
prueba();
},
posición: "último"
})
//jQuery("#list").jqGrid('filterToolbar', opciones); /p>
});
lt;/Scriptgt;