¿jqGrid resuelve dinámicamente la ID del buscapersonas?

Tengo 3 preguntas simples

  1. Tengo un código que me dice si un objeto jqGrid está presente en la página:

    //Check if there is a jqGrid on the page and if present, reloads its data ;) var jqGrid = $('div.ui-jqgrid-bdiv table'); if (jqGrid.length) { //time to reload $(jqGrid).trigger('reloadGrid'); } 

    Me gustaría encontrar el elemento ID de buscapersonas si hay uno. ¿Hay alguna manera de hacer esto?

  2. Supongamos que tengo una clase personalizada en mi tabla jqGrid:

     

    ¿Cómo verifico dinámicamente la presencia de customclass dentro de mi jqGrid?

EDITAR:

Con la ayuda de Oleg, he podido codificar una función reconfigPermissions() que muestra / oculta los botones predeterminados Agregar, Editar y Eliminar. Aquí está la función:

 function reconfigPermissions(gridID) { var enableRegistry = CanModifyRegistry(); var ops = ['#add_' + gridID, '#edit_' + gridID, '#del_' + gridID]; $.each(ops, function (ix, value) { var $td = $(value); if (enableRegistry === true) { $td.show(); } else { $td.hide(); } }); } 

Se llama a esta función cuando el usuario selecciona otro rango de fechas en un cuadro combinado definido en otra parte de la página. El problema es el siguiente: si, cuando la grilla se carga inicialmente, el usuario tiene derechos para el período predeterminado (seleccionado en el cuadro combinado) todo funciona. Puede cambiar el intervalo de fechas en el combo y los botones aparecen y desaparecen correctamente. Desafortunadamente, si el usuario no tiene derechos en el período predeterminado seleccionado inicialmente (por lo que la primera creación de la cuadrícula tiene {add: false, edit: false, del: false} ) incluso cambiando a un período donde el usuario tiene derechos no agrega el botones en absoluto.

Este es el código vinculado al controlador de eventos de change cuadro combinado

 $.ajax({ url: GetBaseWSUrl() + 'MyWebService.asmx/ChangeCurrentPeriod', type: "post", dataType: "json", async: false, data: JSON.stringify({ periodID: $(this).val() }), contentType: "application/json; charset=utf-8", success: function (data) { //Check if there is a jqGrid on the page and if present, reloads its data var jqGrids = $('div.ui-jqgrid-bdiv table'); jqGrids.each(function (ix, jqGrid) { var gridID = $.jgrid.jqID(jqGrid.id) reconfigPermissions(gridID); jqGrid.trigger('reloadGrid'); }); } }); 

¿Cualquier sugerencia?

Puede encontrar las jqGrids existentes en la página de muchas maneras. Por ejemplo, puede usar $('table.ui-jqgrid-btable') lugar de $('div.ui-jqgrid-bdiv table') . Además, no debe olvidar que puede ser más como un jqGrid en la página en general. Te recomiendo que escribas tu código para que funcione con muchas jqGrids de la página, incluso si actualmente usas solo una jqGrid por página.

Si encuentra de alguna manera el elemento de table de jqGrid, puede obtener el elemento DOM de la primera cuadrícula encontrada con jqGrids[0] . jqGrid usa algunos extendedores del DOM. Agrega propiedades adicionales grid y p . En cada método jqGrid se comprobará si la grilla se inicializa verificando que exista la propiedad de grid . La propiedad p le proporciona todos los parámetros p.pager inclusive p.pager . Puede crear hasta dos buscapersonas en la cuadrícula: uno en el borde superior de la cuadrícula y otro en la parte inferior (consulte esto para obtener más información). Entonces el código que necesitas podría verse como

 var jqGrids = $('table.ui-jqgrid-btable'); if (jqGrid.length > 0) { jqGrid.each(function(i) { if (this.grid) { // one more test for the jqGrid // jqGrid[i] is a jqGrid if (this.p.toppager) { // this.id + '_toppager' is the id of the top pager } if (this.p.pager) { // this.p.pager is the id of the bottom pager } } }); } 

Para probar si el elemento de la table tiene alguna clase customclass , puede usar jQuery.hasClass .

ACTUALIZADO : En el comentario me preguntaste cómo ocultar o mostrar los botones en la barra de navegación dinámicamente. Preparé la demostración que demuestra esto:

enter image description here

Si uno revisa los botones que se colocan encima de la cuadrícula, se ocultará el botón correspondiente de la barra del navegador. Al deseleccionar, se mostrará el botón correspondiente.

El código simplemente llama a $('#add_list').hide() o $('#add_list').show() para ocultar / mostrar el botón “Agregar”. En el ejemplo, la última parte de id = “add_list” es la identificación del elemento

utilizado para crear la grilla. Otros botones estándar tienen los ID que comienzan con los siguientes prefijos: 'edit_' , 'view_' , 'del_' , 'search_' , 'refresh_' . El código más común que funciona si el ID de la cuadrícula tiene caracteres especiales se ve de la siguiente manera:

 var grid = $("#list"), gid = $.jgrid.jqID(grid[0].id); $('#cbAdd').change(function () { var $td = $('#add_' + gid); if ($(this).is(':checked')) { $td.hide(); } else { $td.show(); } }); 

Para encontrar los botones de navegador personalizados agregados por navButtonAdd , uso el atributo de title :

 $('#cbChooseColumns').change(function () { var $td = $(grid[0].p.pager + '_left ' + 'td[title="choose columns"]'); if ($(this).is(':checked')) { $td.hide(); } else { $td.show(); } });