¿Cómo vincular el complemento JQuery JQgrid?

Primero, después de descargar la biblioteca JQgrid, haga referencia a ella en Layout.cshtml para que no tengamos que hacer referencia a la misma biblioteca en todas las vistas. Aquí, cito estos archivos para ayudarnos a desarrollar:

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() }

},

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;