Tengo un par de jqGrids en mi ASP.NET MVC 3 aplicación que tiene un número de columnas. He añadido lo siguiente a las definiciones de columna predeterminados de algunas de las columnas que se oculta:

colModel: [
   { name: 'IceCreamID', hidden: true},
   { name: 'RecipeID', hidden: true }

y esto funciona muy bien. Las columnas no son visibles en mi red.

Luego he añadido esto a implementar el selector de columnas:

var grid = $('#icecreamGrid');
grid.jqGrid('navButtonAdd', '#icecreamPager',
{ caption: "Columns", buttonicon: "ui-icon-calculator",
  title: "Choose Columns",
  onClickButton: function() {
     grid.jqGrid('columnChooser');
  }
});

Grandes, se abrirá el selector de columnas ahora. Luego he añadido las siguientes columnas no quería que se muestran en el selector de columnas:

colModel: [
   { name: 'IceCreamID', hidden: true, hidedlg: true},

Así que ahora puedo ocultar/mostrar columnas bien. Ahora, ¿cómo podría persistir esta información? DB? Como una cookie? De otra manera? Es allí una manera preferida para almacenar este tipo de información que es realmente una preferencia de usuario en lugar de algo relacionado con los datos de la misma?


Más Info

Basado en la Oleg comentario más abajo, quiero dar un poco más de información.

El punto aquí, es que tengo las mallas con 10-15 columnas que podría ser de pantalla basado en las preferencias del usuario. Por ejemplo, uno de mis cuadrícula tiene las siguientes 9 columnas:

IceCream|ShortName|HasNuts|SugarAdded|LimitedRun|PromoItem|Facility|FirstRun|LastRun

Los usuarios pueden ocultar/mostrar cualquiera de estos 9 columnas según sus preferencias personales.

Lo que quiero hacer es proporcionar una forma de conservar las columnas que un determinado usuario quiere ver lo que s/él no tiene que volver a elegir las columnas a la vista cada vez que la página con la que la cuadrícula se muestra.

  • La respuesta a su pregunta puede ser difícil dependen de sus requisitos. El ejemplo con IceCreamID no encuentro mejor ya que yo personalmente no entiendo por qué tienes que colocar la información en la red. Usted puede colocar la información como el id de fila, por ejemplo. Usted puede utilizar adicionalmente compuesto rowids como ‘IceCreamID’+’_’+’RecipeID’. De cualquier manera que usted debe publicar más información acerca de la cuadrícula y el medio ambiente.
  • Oleg, ver mi información adicional en la pregunta.
  • ¿Has probado el código que he publicado 5 días? Sería agradable ver a cualquier de sus comentarios de mi respuesta.
  • si, yo lo vi esta mañana. Gracias. Sido en otra tarea para un par de días. Seguro que voy a estar comentando sobre esto dentro de poco. 🙂
  • mi respuesta contiene la versión extendida en mi respuesta a su pregunta y por lo que puede ser probablemente de interés para usted.
  • wat itsmatt no comentadas, sin embargo (por Oleg)?

InformationsquelleAutor itsmatt | 2011-12-07

1 Comentario

  1. 41

    He encontrado pregunta muy interesante. La pregunta acerca de guardar el estado del usuario de la red son interesantes en muchos de los casos. Hay algunas respuestas interesantes sobre tales problemas, que utiliza cookies (ver aquí por ejemplo).

    En mi opinión, el ahorro de la cuadrícula estado en la base de datos en el servidor o en el localStorage es la mejor manera como el uso de la cookie. La mejor manera depende de los requisitos del proyecto en el que usted utilice. Por ejemplo, el uso de la base de datos de almacenamiento en el servidor permite implementar roaming estado de la red. Si utiliza el localStorage en lugar de galletas a las preferencias del usuario se perderán si el usuario va a otro equipo o simplemente si el usuario va a utilizar otro navegador web en el mismo equipo.

    Otro problema con la red del estado es el mantenimiento. La información acerca de las columnas de la cuadrícula que se mantenga normalmente en el JavaScript o archivos HTML y no en la base de datos. En el caso de ambas fuentes no puede ser sincrónica en los cambios en la cuadrícula. Los diferentes escenarios de la actualización de problema podría fáciles de imaginar. Sin embargo, las ventajas de las preferencias del usuario tan grande en algunos escenarios en los que los problemas con pequeños inconvenientes no son tan importantes y pueden ser resueltos relativamente fácil.

    Así que voy a pasar algún tiempo para implementar dos demos que muestra cómo se pueden implementar. He utilizado localStorage en mis demos, debido a muchas razones. Yo sólo mencionar dos de allí:

    1. Cookies es la forma en que se envíe de forma permanente información diferente para el servidor o desde el cual en realidad no es correspondido. Aumenta el tamaño de encabezado HTTP y disminuye el rendimiento de la página web (ver aquí por ejemplo).
    2. Las Cookies tienen muy difícil restricciones. Corresponde a la sección 6.3 de rfc2109 o 6.1 de rfc6265: Al menos 4096 bytes por cookie, al menos el 50 cookies por dominio (20 en rfc2109), de al menos 3000 cookies total (300 en rfc2109). Por lo que las cookies no se pueden utilizar para guardar demasiados información. Por ejemplo, si desea guardar el estado de cada cuadrícula de cada página web puede alcanzar rápidamente los límites.

    Por otro lado localStorage son compatibles con todos los navegadores modernos y será compatible con Internet Explorer desde IE8 (ver aquí). El localStorage se guardará automáticamente por orígenes (como a1.example.com, a2.example.com, a3.example.com, etc) y ha arbitrario límite de 5 MB por origen (ver aquí). Así que si usted utiliza el espacio cuidadosamente lejos de los límites.

    Lo que he usado en mis demos la localStorage. Yo, además, debe mencionar que existen algunos plugins como jStorage que utilizar localStorage si es soportado por el navegador y el uso de almacenamiento, pero la misma interfaz para usted en el caso de los navegadores antiguos como IE6/IE7. En el caso de que usted sólo tiene menos tamaño de almacenamiento: 128 kB en lugar de 5 MB, pero es mejor como 4K que uno tiene respecto a las cookies (ver aquí).

    Ahora acerca de la aplicación. Me crea dos demos: este y la versión extendida: este.

    En la primera demostración de los siguientes estados de la cuadrícula de guarda y restaura automáticamente en la recarga de la página (F5 en la mayoría de los navegadores web):

    • la columna que están ocultos
    • el orden de las columnas
    • el ancho de cada columna
    • el nombre de la columna por la que la red va a ser ordenados y la dirección de ordenación
    • el número de página actual
    • el filtro actual de la red y el indicador de si el filtro se aplica. He utilizado multipleSearch: true configuración de la cuadrícula.

    De la misma manera se puede ampliar (o reducir) la lista de opciones que son la parte de la guarda de la cuadrícula de estado.

    Las partes más importantes del código de la demo que encontrarás a continuación:

    var $grid = $("#list"),
    saveObjectInLocalStorage = function (storageItemName, object) {
    if (typeof window.localStorage !== 'undefined') {
    window.localStorage.setItem(storageItemName, JSON.stringify(object));
    }
    },
    removeObjectFromLocalStorage = function (storageItemName) {
    if (typeof window.localStorage !== 'undefined') {
    window.localStorage.removeItem(storageItemName);
    }
    },
    getObjectFromLocalStorage = function (storageItemName) {
    if (typeof window.localStorage !== 'undefined') {
    return $.parseJSON(window.localStorage.getItem(storageItemName));
    }
    },
    myColumnStateName = 'ColumnChooserAndLocalStorage.colState',
    saveColumnState = function (perm) {
    var colModel = this.jqGrid('getGridParam', 'colModel'), i, l = colModel.length, colItem, cmName,
    postData = this.jqGrid('getGridParam', 'postData'),
    columnsState = {
    search: this.jqGrid('getGridParam', 'search'),
    page: this.jqGrid('getGridParam', 'page'),
    sortname: this.jqGrid('getGridParam', 'sortname'),
    sortorder: this.jqGrid('getGridParam', 'sortorder'),
    permutation: perm,
    colStates: {}
    },
    colStates = columnsState.colStates;
    if (typeof (postData.filters) !== 'undefined') {
    columnsState.filters = postData.filters;
    }
    for (i = 0; i < l; i++) {
    colItem = colModel[i];
    cmName = colItem.name;
    if (cmName !== 'rn' && cmName !== 'cb' && cmName !== 'subgrid') {
    colStates[cmName] = {
    width: colItem.width,
    hidden: colItem.hidden
    };
    }
    }
    saveObjectInLocalStorage(myColumnStateName, columnsState);
    },
    myColumnsState,
    isColState,
    restoreColumnState = function (colModel) {
    var colItem, i, l = colModel.length, colStates, cmName,
    columnsState = getObjectFromLocalStorage(myColumnStateName);
    if (columnsState) {
    colStates = columnsState.colStates;
    for (i = 0; i < l; i++) {
    colItem = colModel[i];
    cmName = colItem.name;
    if (cmName !== 'rn' && cmName !== 'cb' && cmName !== 'subgrid') {
    colModel[i] = $.extend(true, {}, colModel[i], colStates[cmName]);
    }
    }
    }
    return columnsState;
    },
    firstLoad = true;
    myColumnsState = restoreColumnState(cm);
    isColState = typeof (myColumnsState) !== 'undefined' && myColumnsState !== null;
    $grid.jqGrid({
    //... other options
    page: isColState ? myColumnsState.page : 1,
    search: isColState ? myColumnsState.search : false,
    postData: isColState ? { filters: myColumnsState.filters } : {},
    sortname: isColState ? myColumnsState.sortname : 'invdate',
    sortorder: isColState ? myColumnsState.sortorder : 'desc',
    loadComplete: function () {
    if (firstLoad) {
    firstLoad = false;
    if (isColState) {
    $(this).jqGrid("remapColumns", myColumnsState.permutation, true);
    }
    }
    saveColumnState.call($(this), this.p.remapColumns);
    }
    });
    $grid.jqGrid('navButtonAdd', '#pager', {
    caption: "",
    buttonicon: "ui-icon-calculator",
    title: "choose columns",
    onClickButton: function () {
    $(this).jqGrid('columnChooser', {
    done: function (perm) {
    if (perm) {
    this.jqGrid("remapColumns", perm, true);
    saveColumnState.call(this, perm);
    }
    }
    });
    }
    });
    $grid.jqGrid('navButtonAdd', '#pager', {
    caption: "",
    buttonicon: "ui-icon-closethick",
    title: "clear saved grid's settings",
    onClickButton: function () {
    removeObjectFromLocalStorage(myColumnStateName);
    }
    });

    Ser cuidadosamente para definir myColumnStateName (el valor `ColumnChooserAndLocalStorage.colState»`) en la demo) para diferentes valores en las diferentes páginas.

    La segunda demo es la extensión de la primera, utilizando la técnica de mi respuesta anterior a su otra pregunta. La demostración de la búsqueda de la barra de herramientas y sincronizar además de la información entre la avanzada de la búsqueda de la forma y la búsqueda de la barra de herramientas.

    ACTUALIZADO: El siguiente respuesta contiene la versión extendida de el código que se incluye arriba. Se muestra cómo conservar las filas seleccionadas (o fila), además. Otra respuesta muestra cómo conservar la lista de la expansión de los nodos del árbol de la cuadrícula y expanda los nodos en el relaoding de la página.

    • Excelente. Pulsando el botón «borrar la configuración guardada botón» debe volver a cargar la cuadrícula también en mi humilde opinión.
    • Personalmente, me gusta la solución. Estoy seguro de que la idea puede ser mejorado y simplificado para el uso. La recarga de la red si el punto bueno, pero lo que uno necesita hacer es simplemente como llamada de $(this).trigger('reloadGrid',[{page:1}]) porque simple recarga va a guardar la configuración actual, pero entiendo lo que quieres decir.
    • He añadido window.location.reload() como rápido y sucio revisión. Esta muestra original settins.
    • Estoy de acuerdo, podría ser una buena solución para el primer tiempo.
    • Una buena solución, Oleg. Gracias! Necesito pensar más acerca de la reutilización de esto aunque ya tengo varias cuadrículas. Gracias por el enlace a jStorage. Voy a mirar en esto también. Ahora, una cosa que yo no he trabajado todavía es mínimo ancho de la rejilla para que el localizador de la barra no se ve aplastado si el usuario elige sólo un par de columnas.
    • Usted es bienvenido! Sobre el localizador: la mirada en la demo de la «actualización» de parte de la respuesta. Utiliza normalizePagers y algunas otras clases CSS. El camino no lograrán resolver el problema con el localizador, pero se puede mejorar la visibilidad. Se puede combinar con el ajuste «min-width» propiedad de CSS.
    • si las columnas son de reordenar el uso del ratón, nuevo orden de las columnas no se conserva. Cómo conservar nuevo orden de las columnas en este caso también ?
    • ver mis otros reciente respuesta, que muestra cómo supervisar la reordenación de las columnas. Uno sólo debe llamar saveColumnState dentro de sortable se define como la función.
    • gracias, funcionó
    • Usted es bienvenido!
    • detiene la ejecución de javascript en Android. (Usted puede probar esta utilizando en vivo dispositivo de forma remota en Samsung laboratorio de Pruebas). Después de la sustitución de JSON.parse con $.parseJSON funciona en Android también.
    • Gracias! Estoy de acuerdo en que es mejor usar $.parseJSON. He hecho los mismos cambios en otras demos, pero se olvidan de cambiar aquí. Voy a actualizar el texto de la respuesta.
    • Podemos reemplazar JSON.stringify() también para que json2.js no es necesario?
    • No entiendo el problema. ¿Por qué el problema de incluir json2.js? Usted tiene que guardar objeto como cadena. Así que hay que utilizar algún tipo de serialización. Si no te gusta json2.js usted puede usar json3.js por ejemplo.
    • Pensé que tal vez jquery o javascript ya tiene una función similar, por lo que se utiliza elimina la necesidad de cargar este archivo javascript.
    • Todos los navegadores modernos ya ha nativo de la aplicación de JSON.stringify, pero para el apoyo de edad de los navegadores web usted tiene que incluir json2.js. El código de JSON.stringify prueba de la primera si JSON ya definidos. Si se define la json2.js no hacer nada y el nativo navegador web de la aplicación será utilizada. Así json2.js define JSON.stringify sólo para los viejos navegadores web.
    • Gracias por el gran demos. En mi caso, he loadonce=1, desplazamiento=1, datatype=’json’, height=’500px’, me puse la ‘dirección’ (no el uso de ‘datos’) – y finalmente comprendí cómo hacer que funcione a la perfección. Estoy borrando antes el comentario pidiendo ayuda. Gracias por todo lo que haces!!
    • Usted es bienvenido! Me alegro de que mis respuestas te pueden ayudar.
    • error: los tanques de Oleg. se realiza el evento de perm es la relación para el evento actual. su demo reordenación de la columna no es cierto . Estoy ofrecer antes de guardar perm obtener en el método ‘este.jqGrid(«getGridParam», «remapColumns»)’.gracias.
    • Creo que tienes razón. Tengo que hacer otras cosas que ahora y más tarde hará pruebas adicionales.
    • Trate de la demo que es la modificación de la la primera demo de mi respuesta anterior con otro orden de saveColumnState.call(this, perm); y this.jqGrid("remapColumns", perm, true);. En el primer cambio del orden de las columnas parece que funciona, pero si uno vuelve a cargar la página, lo hace a uno más de la reordenación de las columnas y se vuelve a cargar la página, una vez más, a continuación, uno va a ver un orden incorrecto.
    • Supongo que uno de los tiene que guardar el nombre de la columna en lugar de índices de las columnas. El uso de remapColumns con los índices no es buena en general por diseño. Yo planeaba introducir remapColumnsByName en free jqGrid y utilizar internamente. El viejo remapColumns se llevará a cabo sólo por razones de compatibilidad y se llama nueva remapColumnsByName internamente.
    • Esta podría ser una gran adición. Si las nuevas columnas se cambian a jqgrid y algunas viejas columnas son eliminados por el cambio de código en el lado del servidor, dependiendo de los derechos de usuario por ejemplo, el actual método de guardar muestra mal columnas. Aún no dedect colmodel cambiar y no volver a la configuración por defecto.
    • Estoy integración de la misma cosa en mi jqgrid. No puedo entender lo que es cm en myColumnsState = restoreColumnState(cm); Puede nadie me contesta?
    • El código de la respuesta es un fragmento de código de la demo (ver algunas líneas antes de la línea de código en la respuesta). Usted encontrará la definición de cm variable. En general, la respuesta es muy antiguo. La mirada en más reciente respuesta mejor para el más reciente código.

Dejar respuesta

Please enter your comment!
Please enter your name here