javascript - tricks - div grid 3 columns

Posible problema jQuery/jqGrid en IE8

Question

Tengo una grilla construida con jqGrid , que usa la barra de herramientas de búsqueda, un formateador personalizado para insertar cajas de radio y un controlador loadComplete . Todo funciona bien en FF pero cuando voy a IE8 (¡qué vergüenza!), La pantalla se congelaría con los datos cargados y el cuadro Loading... en la pantalla. No puedo hacer nada en la pantalla.

Aquí está mi código:

function loadCompleteHandler(){
 jQuery("#listTable").jqGrid(''setGridHeight'', Math.min(300,parseInt(jQuery(".ui-jqgrid-btable").css(''height''))));
}

 function radio(value, options, rowObject){
  var radio = ''<input type="radio" value='' + value + '' name="radioid" ondblclick="inDetail();"/>'';
  return radio;
 }

 function statusSelect(){
  #set($select = ":$l10n.lbl_123")
  #foreach($se in $status_list) 
   #set($select = $select + ";$se.getValue():$se.getValue()") 
  #end  
  return "$select";
 }

 jQuery(function(){  
  jQuery("#listTable").jqGrid({
     url: ''$content.getURI("/servlet/ajax/MyServlet.json")'' + ''?loggedUserId=$loggedUserId&pageNo=0&locale='' + ''$l10n.getLocale().toString()'',
     datatype: ''json'',
     mtype: ''POST'',
     colNames:['''',''$l10n.lbl_copy'',''$l10n.lbl_476'',''$l10n.lbl_380'', ''$l10n.lbl_2547<br/>$l10n.lbl_3768'',''$l10n.lbl_owner'',''$l10n.lbl_256 $l10n.lbl_92'',''$l10n.lbl_1558<br>$l10n.lbl_185'',''$l10n.lbl_348''],
     colModel :[ 
        {name:''column1'', index:''column1'', width:''3%'', search:false, align:''center'', formatter: radio, editable:false, sortable: false, resizable:false},
        {name:''column2'', index:''column2'', width:''6%'', search:false, align:''center'', formatter:''checkbox'', sortable: false, resizable:false}, 
        {name:''column3'', index:''column3'', width:''12%'', sortable: false, stype:''select'', editoptions:{value: statusSelect()}, resizable:false}, 
        {name:''column4'', index:''column4'', width:''17%'', search:false, sortable: false, resizable:false}, 
        {name:''column5'', index:''column5'', width:''10%'', search:false, sortable: false, resizable:false}, 
        {name:''column6'', index:''column6'', width:''13%'', sortable: false, resizable:false}, 
        {name:''column7'', index:''column7'', width:''13%'', sortable: false, resizable:false},
     {name:''column8'', index:''column8'', width:''12%'', sortable: false, resizable:false},
     {name:''column9'', index:''column9'', width:''14%'', sortable: false, resizable:false}
      ],
     width:''768'',
  height: 300,
  loadonce:true,
  pager: ''#pagerDiv'',
  gridview: true,
  rowNum:15,
  rowTotal: 500,
     sortorder: ''desc'',
     viewrecords: true,
  loadComplete: loadCompleteHandler
    }); 
 });

 jQuery(function(){
  jQuery("#listTable").jqGrid(''filterToolbar'',{
       stringResult: true, 
       searchOnEnter: false, 
       defaultSearch:''cn''}); /* search strategy meaning: contains */
 }); 

Estoy usando Velocity, jQuery 1.4.2. IE proporciona un error de argumento no válido en la biblioteca de jQuery en esta línea:

 if ( set ) {
   style[ name ] = value;
  }

Tal vez el problema es con jQuery en IE8, no sé ...

EDITAR : datos más específicos añadidos

Estoy usando jqGrid 3.8.2. El statusSelect después de que Velocity lo haya procesado se ve así:

function statusSelect(){
     return ":All;status1:status1;status2:status2";
}

Creo que no hay ningún problema con la transferencia de datos JSON ya que la cuadrícula funcionó previamente en IE8 cuando no había setGridHeight , controlador loadComplete . También hice algunas modificaciones menores que solo puedo contar en parte (es decir, el tamaño de la columna está deshabilitado). Para fines de prueba aquí hay un objeto JSON:

    {
    "page":"1",
    "records":2,
    "rows":[{"id":150,"cell":[150,false,"status1","columnData4","columndata5","columndata6","columndata7","Test1/u003cbr//u003e/u003cspan style/u003d/u0027float:right;/u0027/u003e10.12.2010/u003c/span/u003e","columnData"]},
      {"id":157,"cell":[157,false,"status2","columnData41","columndata51","columnData61","columnData71","Test2/u003cbr//u003e/u003cspan style/u003d/u0027float:right;/u0027/u003e22.12.2010/u003c/span/u003e","columnData"]}],
    "total":50.0
    }

No sé cómo usar el parámetro total, por lo que acabo de declarar un valor arbitrario (50D). La función inDetail solo envía el formulario (estoy usando el parámetro Apache Turbine aquí):

    function inDetail(){
        document.forms[''myForm''].eventSubmit_doAction.value = ''doSomeAction'';
        document.forms[''myForm''].submit();
    }

Answer 1

No pude reproducir el problema que describes. Como puede ver aquí, la cuadrícula se puede cargar sin ningún problema en IE. No parece estar bien porque faltan CSS, pero todo funciona en general. Entonces supongo que tienes un problema en el código que no publicas aquí. Le recomiendo que verifique su página HTML en http://validator.w3.org/ , su prueba JSON resulta en http://www.jsonlint.com/ y el código JavaScript en http://www.jslint.com/ .

Solo recomendaría que no use radio variable de radio dentro de la función con el mismo nombre de radio . Mejor elegir otro nombre. También es mejor agregar 10 como el segundo parámetro de la función parseInt . En mis pruebas, su código original funcionó también sin los cambios de código correspondientes.