当前位置 : 主页 > 网页制作 > JQuery >

显示网格的jqGrid和JQuery UI选项卡仅在主选项卡(div)上展开

来源:互联网 收集:自由互联 发布时间:2021-06-15
我在jQuery UI Tabs对象中添加了一些网格(jqgrid). Tabs子项上默认展开的所有网格都显示完美.但是默认情况下未展开的Tab子项上的网格会永久显示jqGrid为小(jqgrid为autowidth = true).有任何想法吗
我在jQuery UI Tabs对象中添加了一些网格(jqgrid). Tabs子项上默认展开的所有网格都显示完美.但是默认情况下未展开的Tab子项上的网格会永久显示jqGrid为小(jqgrid为autowidth = true).有任何想法吗?

谢谢!

见http://www.revolucion7.com/wp-contenthttp://img.558idc.com/uploadfile/2009/10/jqgridp1.JPG

换句话说……

我在页面上有两个标签,每个标签都有jqgrids.

两个jqgrids都有autowidth属性设置,问题是当页面加载第一个网格被调整到容器的大小但是当我点击第二个选项卡时,第二个网格没有调整到容器的大小.

你是如何在其他标签上初始化jqGrids的?使用show事件显示选项卡时,应初始化它们,例如:

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;
});

如果您正在使用此方法,则还需要跟踪每个网格的初始化时间,因此如果用户单击另一个选项卡然后单击返回上一个选项卡,则不会尝试再次创建它.

网友评论