Botón agregar para jqgrid encabezado de columna

Hay una manera de agregar un botón situado junto a la cabecera de la columna? digamos que justo después de la ‘Ordenar los indicadores ?

para un ejemplo

| Id (botón) | Nombre (botón) |

Gracias de antemano.

InformationsquelleAutor Sam | 2011-11-21

3 Kommentare

  1. 16

    Supongo que usted sabe que puede incluir código HTML en los encabezados de columna. Uno sólo debe colocar fragmento de HTML en lugar del texto en el colNames. Supongo que desea agregar en todos los los encabezados de columna del botón con un icono y hacer algunas acciones personalizadas si el botón se hizo clic.

    Puede aplicar el requisito de muchas maneras. En la demo me muestre sólo una de muchas posibilidades de aplicación:

    Botón agregar para jqgrid encabezado de columna

    al hacer clic en el botón personalizado en una alerta que muestra el nombre de la columna de encabezado se hizo clic.

    El código correspondiente es

    var $grid = $("#list");
    //... here the grid will be created
    $grid.closest("div.ui-jqgrid-view").find("div.ui-jqgrid-hdiv table.ui-jqgrid-htable tr.ui-jqgrid-labels > th.ui-th-column > div.ui-jqgrid-sortable")
        .each(function () {
            $('<button>').css({float: "right", height: "17px"}).appendTo(this).button({
                icons: { primary: "ui-icon-gear" },
                text: false
            }).click(function (e) {
                var idPrefix = "jqgh_" + $grid[0].id + "_",
                    thId = $(e.target).closest('div.ui-jqgrid-sortable')[0].id;
                //thId will be like "jqgh_list_name"
                if (thId.substr(0, idPrefix.length) === idPrefix) {
                    alert('Clicked the button in the column "' + thId.substr(idPrefix.length) + '"');
                    return false;
                }
            });
        });
    • Muchas gracias Oleg. esto es exactamente lo que yo estaba buscando.Su Demostración es realmente útil. Agradecemos su esfuerzo.
    • Cómo incluir el icono en la columna..?
    • usted debe cambiar el selector en .find de modo que sólo devuelve la columna que usted necesita.
    • Desea que hubo forma más sencilla de hacer esto, pero el uso de esta técnica hizo el truco.
  2. 0

    En el pasado, yo he usado jquery para agregar un botón a la cabecera. Donde mi columna nombre era «id»:

    $('#gs_id').after('<button id="clear_filters" class="button blue">Reset</button>');
    • :Gracias por responder a mi pregunta. creo que la respuesta anterior, y la demostración sería de gran ayuda.
  3. 0

    .anexar puede ser útil. Agregar una clase a la columna y, a continuación, agregue el botón para que con el requisito del css.

    • :Gracias por responder a mi pregunta. creo que la respuesta anterior, y la demostración sería de gran ayuda.

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea