显示仅在主选项卡（div）上展开网格的jqGrid和JQuery UI选项卡 [英] jqGrid and JQuery UI tabs showing grids expanded only on primary tab (div)

问题描述

我为jQuery UI Tabs对象添加了一些网格（jqgrid）。默认情况下展开的Tabs子项中的所有网格都完美显示。但Tab节点中的网格并未默认展开，它永久显示jqGrid小（jqgrid，autowidth = true）。任何想法？

谢谢！

请参阅 http://www.revolucion7.com/wp-content/uploads/2009/10/jqgridp1.JPG

换句话说...

我在页面上有两个选项卡，每个选项卡上有jqgrids。

p>

这两个jqgrid都有autowidth属性设置，问题是当页面加载第一个网格时调整为容器的大小，但是当我点击第二个tab时第二个网格没有调整到容器的大小。

解决方案

你如何初始化其他标签上的jqGrids？例如：

  jQuery（document）.ready（function（）{
 var initialized = [false，false]; 
 jQuery（'＃tabs'）。tabs（{show：function（event，ui ）{
 if（ui.index == 0&&！initialized [0]）{
 //在这里的第二个标签页上初始化网格... 
 jQuery（NOMBRE_GRID）。 jqGrid（{
 url：'/ Idiomas / DatosGrid /'，
 datatype：'json'，
 mtype：'GET'，
 height：'auto'，
 multiselect：true，
 autowidth：true，
 colNames：['Id'，'Nombre']，
 colModel：[
 {name：'id_idioma'，index：' id_idioma'，宽度：100，al ign：'left'，
 formatter：'showlink'，formatoptions：{baseLinkUrl：'/ Idiomas /'，showAction：'Edit'，addParam：''} 
}，
 {name ：'nombre'，index：'nombre'，width：100，align：'left'} 
]，
 pager：jQuery（NOMBRE_AREA_PAGINACION），
 rowNum：tamanoPagina，
 rowList：[5，10，15，20]，
 sortname：'nombre'，
 sortorder：asc，
 viewrecords：true，
 caption：'Idiomas'$ navGrid（NOMBRE_AREA_PAGINACION，{edit：false，add：false，del：false，refresh：false，search：false}）; 
}）; 
 
 
} else if（ui.index == 1&&！initialized [1]）{
 //在第二个标签页上初始化网格... 
 jQuery（NOMBRE_GRID_SELECCIONADOS）.jqGrid（{
 url：'/ Idiomas / DatosGrid /'，
 datatype：'json'，
 mtype：'GET'，
 height ：'auto'，
 multiselect：true，
 autowidth：true，
 colNames：['Id'，'Nombre']，
 colModel：[
 {name ：'id_idioma'，index：'id_idioma'，width：100，align：'left'，
 formatter：'showlink'，formatoptions：{baseLinkUrl：'/ Idiomas /'，showAction：'Edit'，addParam： ''} 
}，
 {name：'nombre'，index：'nombre'，width：100，align：'left'} 
]，
 sortname：'nombre'，
 sortorder：asc，
 viewrecords：true，
 caption：'Idiomas'
}）; 
 
初始化[ui.index] = true; 
}）; 
  

如果您正在采用这种方法，您还需要跟踪每个网格初始化的时间，如果用户点击另一个标签，然后点击返回到前一个标签，则不要尝试再次创建该标签。

I have added some grids (jqgrid) to a jQuery UI Tabs object. All the grids on the Tabs child that is expanded by default, displays perfectly. But the grids on the Tab children that are NOT expanded by default, permanently shows the jqGrid small (jqgrid with autowidth=true). Any ideas?

Thanks!

See http://www.revolucion7.com/wp-content/uploads/2009/10/jqgridp1.JPG

On other words ...

I have two tabs on a page with jqgrids on each one.

Both jqgrids have autowidth property set, the problem is when page loads the first grid is adjusted to the size of the container but when i clicked the second tab the second grid is not adjusting to the size of the container.

解决方案

How are you initializing the jqGrids on the other tabs? You should initialize them when the tab is shown using the show event, for example:

jQuery(document).ready(function() {
 var initialized = [false, false];
 jQuery('#tabs').tabs({show: function(event, ui) {
                   if (ui.index == 0 && !initialized[0]){
                      // Initialize grid on second tab page here...
                      jQuery(NOMBRE_GRID).jqGrid({
                          url: '/Idiomas/DatosGrid/',
                          datatype: 'json',
                          mtype: 'GET',
                          height: 'auto',
                          multiselect: true,
                          autowidth: true,           
                          colNames: ['Id',  'Nombre'],
                          colModel: [
                                    { name: 'id_idioma', index: 'id_idioma', width: 100, align: 'left',
                                        formatter: 'showlink', formatoptions: { baseLinkUrl: '/Idiomas/', showAction: 'Edit', addParam: '' }
                                    },
                                    { name: 'nombre', index: 'nombre', width: 100, align: 'left' }
                                ],
                          pager: jQuery(NOMBRE_AREA_PAGINACION),
                          rowNum: tamanoPagina,
                          rowList: [5, 10, 15, 20],
                          sortname: 'nombre',
                          sortorder: "asc",
                          viewrecords: true,           
                          caption: 'Idiomas'
                      }).navGrid(NOMBRE_AREA_PAGINACION, { edit: false, add: false, del: false, refresh: false, search: false });
                   });


                  } else if (ui.index == 1 && !initialized[1]){
                      // Initialize grid on second tab page here...
                      jQuery(NOMBRE_GRID_SELECCIONADOS).jqGrid({
                          url: '/Idiomas/DatosGrid/',
                          datatype: 'json',
                          mtype: 'GET',
                          height: 'auto',
                          multiselect: true,
                          autowidth: true,           
                          colNames: ['Id',  'Nombre'],
                          colModel: [
                                    { name: 'id_idioma', index: 'id_idioma', width: 100, align: 'left',
                                        formatter: 'showlink', formatoptions: { baseLinkUrl: '/Idiomas/', showAction: 'Edit', addParam: '' }
                                    },
                                    { name: 'nombre', index: 'nombre', width: 100, align: 'left' }
                                ],
                          sortname: 'nombre',
                          sortorder: "asc",
                          viewrecords: true,           
                          caption: 'Idiomas'
                      });

                   initialized[ ui.index ] = true;
});

If you are doing this approach you will also need to keep track of when each grid is initialized, so you do not try to create it a second time if the user clicks on another tab then clicks back to the previous one.

这篇关于显示仅在主选项卡（div）上展开网格的jqGrid和JQuery UI选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！