jQuery Grid Checkbox Column Alternatives – Part II

Un resumen rápido: la columna Casilla de verificación es una función que proporciona una configuración predeterminada para convertir los valores booleanos en la cuadrícula jQuery en casillas de verificación.

Damyan Petev Last Updated Feb 25, 2025 10min read

Esta es la segunda parte que cubre el tema de las alternativas de columnas de casilla de verificación de jQuery Grid y/o implementaciones personalizadas. Sin embargo, como expliqué, los valores predeterminados nunca son lo suficientemente buenos para todos los escenarios que existen y la comunidad mencionó la limitación que tiene con respecto a la coexistencia con plantillas de columna y fila. Si bien hay razones válidas para eso, también hay muchos casos a los que desea ir:

Alternativa de columna de casilla de verificación de jQuery Grid usando plantilla para mejorar la funcionalidad y la experiencia del partido.

Bueno, no estás viendo mal, se ve esencialmente igual. Es muy simple en realidad. Digamos, si una aplicación ha estado usando las casillas de verificación hasta ahora y (como siempre sucede) surge la idea de agregar alguna funcionalidad adicional sobre la columna existente/nueva que requiere el uso de una plantilla. Así que es razonable querer mantener la misma interfaz de usuario que antes, ¿verdad?

Además, como recordarás del primer blog, no me gusta mucho el aspecto de la casilla de verificación predeterminada y, Dios no lo quiera, el usuario está ejecutando algún otro sistema operativo... Ahora, estas casillas de verificación se ven simplemente fantásticas, así que veamos cómo podemos usarlas en su lugar.

¡La función de columna de casilla de verificación al rescate!

No volver a ver mal: de lo que me di cuenta al crear las plantillas de entrada es que la función predeterminada en sí misma también es una. Al estar la característica ahí, los estilos y otras partes útiles están ahí para que las juntemos como mejor nos parezca. Dicho esto, lo primero y lo más fácil de reutilizar es la plantilla de columna de casilla de verificación y sus estilos.

La plantilla

Esa plantilla utiliza etiquetas HTML Span con estilo junto con CSS para crear ese elemento de la interfaz de usuario, lo que significa que está completamente abierta para el estilo e independiente de la implementación del sistema operativo o del navegador. Así es como se vería una plantilla como esa:

var checkboxTemplate="<span style=\'width:100%;display:inline-block;overflow:hidden;text-align:center;\'>' +
"<span class=\"ui-state-default ui-corner-all ui-igcheckbox-small\">"+"<span class=\"ui-icon ui-icon-check ui-igcheckbox-small-{{if ${SalariedFlag} === \"true\"}}on{{else}}off{{/if}}\"/>"+"</span></span>";

Ahora la estructura de los vanos:

El tramo más externo actúa como un contenedor de celdas que se extiende en el espacio disponible y permite que los internos estén bien centrados. Opcional.
El del medio actúa como el borde de la casilla de verificación. Obligatorio.
El más interno es el llenado de vacío/garrapata. Los estilos "ui-igcheckbox-small-off/on" son los estilos respectivos. Tenga en cuenta que el estilo 'off' anula el 'on', por lo que esencialmente puede tener 'on' de forma predeterminada y agregar/eliminar 'off' según corresponda (así es exactamente como se hará más adelante). Además, si ha notado el componente 'pequeño', también hay una versión 'normal' que puede ver en la función Selectores de fila. Obligatorio.

El resultado de esto no es sorprendente (de todos modos los buscábamos). La mejor parte es que obtienes el mismo aspecto que antes (si has estado usando la función), obtienes un control de interfaz de usuario que se ve mucho mejor que el predeterminado e incluso sangra con el estilo de otros controles. Además, no solo encaja con el estilo, sino que coincide con el estilo de los selectores de fila (que considero esencial si se usan ambos) y coincide con el tema, ya que el aspecto proviene del CSS y proviene del tema. Un ejemplo de definición de cuadrícula usando lo anterior:

$.ig.loader(function () {
    $("#grid").igGrid({
        primaryKey: "BusinessEntityID",
        height: 550,
        dataSource: "@Url.Action("Employees")",
        autoGenerateColumns: false,
        columns: [
            { key: "BusinessEntityID", width: "50px", headerText: "ID", dataType: "number" , template: "<a href=\"http://msdn.microsoft.com/en-us/library/ms124432(v=sql.100).aspx\">${BusinessEntityID}</a>"},
            { key: "LoginID", width: "250px", headerText: "Login ID", dataType: "string" },
            { key: "JobTitle", width: "220px" , headerText: "Job Title", dataType: "string" },
            { key: "SalariedFlag", width: "120px", headerText: "SalariedFlag", dataType: "bool", template: checkboxTemplate },
            { key: "CurrentFlag", width: "100px",headerText: "Current Flag", dataType: "bool" , template: "<span style=\'width:100%;display:inline-block;overflow:hidden;text-align:center;\'><span class=\'ui-state-default ui-corner-all ui-igcheckbox-normal\'><span class=\'ui-icon ui-icon-check ui-igcheckbox-normal-on{{if ${CurrentFlag} === \'true\'}} {{else}} ui-igcheckbox-normal-off{{/if}}\'/></span></span>'}
             ],
        features: [
            { name: "Filtering", mode: "advanced", type: "local" },
            { name: "Sorting", type: "local" },
            { name: "Updating", editMode: 'none'}]
    });
});

La cuadrícula resultante con casillas de verificación pequeñas (predeterminadas) en la columna 'Asalariado' y 'normal' en la "Bandera actual":

Columnas de casillas de verificación que utilizan la plantilla de la función predeterminada.

Y, sí, van a Metro o Modern UI (supongo que así es como se llamará ahora) si aplicas el tema 'metro':

Columnas de casilla de verificación que utilizan la plantilla de la función predeterminada con el tema metro / moderno aplicado.

Como puede ver, dado que los valores son booleanos, las columnas no tienen problemas con otras características de la cuadrícula.

Actualizaciones de valores en línea con un solo clic

Por supuesto, al igual que la solución anterior, puede conectarse al evento de clic para manejar la interacción del usuario sin ingresar al modo de edición. Al igual que antes, el uso de la API de actualización requerirá que la propia función se cargue e inicialice con la cuadrícula (). Esta vez, sin embargo, tenemos dos columnas. Las opciones son dos: duplicar el controlador de eventos para cada columna o simplemente pasar la clave de columna a la función y usarla en lugar del valor estático:

var checkboxTemplate = "<span style=\'width:100%;display:inline-block;overflow:hidden;text-align:center;\'>' +
    "<span class=\"ui-state-default ui-corner-all ui-igcheckbox-small\">" +
    "<span class=\"ui-icon ui-icon-check ui-igcheckbox-small-{{if ${SalariedFlag} === \"true\"}}on{{else}}off{{/if}}\"" +
    " data-rowid=\"${BusinessEntityID}\"  onclick=\"checkboxChanged(event, 'SalariedFlag');\"/></span></span>";

El atributo 'data-' se utilizará para realizar un seguimiento de la clave de fila y la columna se pasará al controlador. Algunos ajustes menores con respecto a la disponibilidad diferente de propiedades para el soporte del navegador y el fragmento final se ve así:

function checkboxChanged(evt, colId) {
    // for IE < 9 currentTarget is srcElement
    var element = evt.currentTarget || evt.srcElement;
    // get rowID where change occured:
    var rowId = $(element).data().rowid;
    var newValue;
    //IE doesn't have classList so check and use Name instead
    if (element.classList){
        newValue = element.classList.contains("ui-igcheckbox-small-on") ? false : true;
    }
    else{
        newValue = element.className.indexOf("ui-igcheckbox-small-on") >= 0 ? false : true;
    }
    $("#grid").igGridUpdating("setCellValue", rowId, colId, newValue);
}

La idea es muy simple: si se ha producido un clic, significa que el valor debe cambiar y debe ser lo contrario de lo que era ahora, por lo que verificamos si se aplica el estilo 'on'. Tenga en cuenta que mencioné 'off' es el que sobrescribe, sin embargo, en este caso, actualizar el valor de la celda con un método Updating hace que la interfaz de usuario se actualice y, por lo tanto, la plantilla se vuelva a aplicar y el estilo 'on' no estará allí si el valor es falso.

Acción de edición

Hay una parte más impresionante de la función de columna de casilla de verificación que se puede reutilizar. En el primer blog que mencioné, puedes definir tu propio proveedor de editores. Si busca la referencia de la API de actualización de cuadrícula, puede ver un 'columnSetting' que permite establecer un proveedor de editor y "debería extenderse $.ig. EditorProviderDefault o debería tener definiciones de todos sus métodos". Ahora, eso puede requerir algo de codificación, pero adivina qué: ¡la columna Casilla de verificación ya tiene una definida! Así es como se usa:

$.ig.loader(function () {
    $("#grid").igGrid({
        primaryKey: "BusinessEntityID",
        height: 550,
        dataSource: "@Url.Action("Employees")",
        autoGenerateColumns: false,
        columns: [
            { key: "BusinessEntityID", width: "50px", headerText: "ID", dataType: "number" , template: "<a style=\'font-size:20px;\' href=\'http://msdn.microsoft.com/en-us/library/ms124432(v=sql.100).aspx\'>${BusinessEntityID}</a>'},
            { key: "LoginID", width: "250px", headerText: "Login ID", dataType: "string" },
            { key: "JobTitle", width: "220px" , headerText: "Job Title", dataType: "string" },
            { key: "SalariedFlag", width: "150px", headerText: "SalariedFlag", dataType: "bool", template: checkboxTemplate}
        ],
        features: [
            { name: "Filtering", mode: "advanced", type: "local" },
            { name: "Sorting", type: "local" },
            { name: "Updating", columnSettings: [{ columnKey: "SalariedFlag", editorProvider: new $.ig.CustomEditorProviderCheckbox()} ]}]
    });
});

En la línea 16, simple y muy efectivo. Ahora, cuando entras en el modo de edición, obtienes una experiencia adecuada (y consistente). Y es realmente así de simple:

El editor creado por el proveedor de casillas de verificación.

Editor provider

¿El proveedor predeterminado que se muestra arriba no cumple con los requisitos? Luego usaremos uno personalizado y agregaremos algunos valores no booleanos en la mezcla para una buena medida. Como se explicó, tiene un montón de proveedores de editor para las necesidades de actualización junto con uno predeterminado que se recomienda para la personalización. En nuestro caso, sin embargo, podemos extender el proveedor de casillas de verificación en su lugar y solo implementar las diferencias. Permítanme explicar los conceptos básicos de un proveedor: es una clase con algunos métodos esenciales: uno para crear un editor (este es llamado por Updating cuando se activa el modo de edición y devuelve el elemento de edición real), uno para obtener y otro para establecer valores. Luego está el enfoque, el tamaño y la gestión de validaciones, pero esos están implementados o no conciernen a nuestro tipo de proveedor. Este es el flujo básico de ejecución de métodos para darle una idea de por qué cada método hace lo que hace:

Flujo generalizado de eventos y llamadas al método resultantes para los editores de actualización.

Por ejemplo, si nuevamente necesita admitir valores diferentes a los booleanos, puede usar su plantilla como de costumbre y anular los métodos de valor get y set del proveedor para tener también un buen editor de casillas de verificación, sin solo lectura y sin parpadeo. Además, es incluso bastante fácil de implementar. Para el caso del último blog y cualquier otro caso de valores aleatorios 'aceptables' y falsos equivalentes significa que no necesitamos modificar el método setValue como.. well, numbers y strings se evaluarán como true y null-s se evaluarán como falsos, y funcionará bien mostrar el valor en el editor. Así que es solo el resultado y es casi divertidamente fácil:

$.ig.CustomEditorProviderCheckbox = $.ig.CustomEditorProviderCheckbox || $.ig.EditorProviderCheckbox.extend({
    getValue: function () {
        return this.value ? 10 : null;
    }
});

Ahora digamos que esos valores no se evaluarán como se esperaba (aunque actualmente lo hacen), también tendrá que anular el setValue y llamar al método de la superclase con la salida deseada:

$.ig.CustomEditorProviderCheckbox = $.ig.CustomEditorProviderCheckbox || $.ig.EditorProviderCheckbox.extend({
    getValue: function () {
        return this.value ? 10 : null;
    },
    setValue: function (val, updating) {
      val = parseInt(val) ? true : false;
      this._super(val, updating);
    }
});

Y si todo eso no es suficiente, siempre puede ir más allá: cambie la interfaz de usuario renderizada para el editor en el método create, cambie la forma en que la interacción afecta el valor en el método set, etc. Pero ese es un tema completamente separado o más como un tema por tipo de proveedor, ya que la mayoría de ellos tienen sus requisitos e implementaciones especiales.

El resto es bastante claro: el mismo estilo de plantilla que en la parte de 'Acción de edición', solo que con parseInt en lugar de como en el blog anterior. Y de nuevo, usando la configuración de columna para Actualización, configura el proveedor de la columna deseada para que sea un nuevo '$.ig. CustomEditorProviderCheckbox()'.

Comparación

PROS

Funcionará con otras plantillas.
Fácil de implementar: 1 línea para escenarios simples o una más para configurar el proveedor.
Apariencia consistente: encaja con el resto de las partes de la cuadrícula y coincide con el tema.
Excelente edición al reutilizar el proveedor de editor de casillas de verificación predeterminado.
De nuevo, no se limita solo a los valores booleanos.
Además, no se limita a una casilla de verificación de dos estados, una casilla de verificación de tres estados puede ser potencialmente implementada()

CONTRAS

Puede requerir algún código para implementarlo con valores no booleanos, aunque, como se muestra, incluso allí, puede ahorrarse la mayor parte del trabajo.
Requiere un poco de trabajo para agregar esa funcionalidad de 'actualización con un solo clic'. Podría argumentar que vale la pena.
No puedo ver nada más, la verdad.

Conclusión

Espero que esto haya sido educativo y ocasionalmente útil. También espero que haya quedado claro que los valores predeterminados no son su única opción y no solo es fácil crear soluciones personalizadas, sino que también reciclar partes de las disponibles lo hace mucho mejor. La forma en que se representan los datos es completamente arbitraria de los valores reales y no solo se pueden usar los viejos elementos de formularios o los modificados con apariencias consistentes: en este punto, puede reemplazar la casilla de verificación con el botón deslizante / alternar y puede usar un enfoque similar para modificar cualquier otro tipo de representación de datos. Porque, al final, jQuery Grid y sus características han demostrado ser muy personalizables y, en la mayoría de los casos, siempre tienen la propiedad, el método o el evento adecuado para ayudar a un desarrollador a crear experiencias increíbles.

El proyecto de demostración está disponible para su descarga. Como siempre, puedes seguirnos en Twitter@DamyanPetevy@ Infragisticsy mantenerte en contacto enFacebook,Google+yLinkedIn.

jQuery Cómo