2016-02-10 4 views
-1

Я использую SmartAdmin jqgrid для отображения данных табличного формата. Каждый раз число столбцов динамических данных изменяется динамически. Я преобразовываю DataTable в объект json и оцениваю его в jqgrid. Кажется, что jqgrid внутренне устанавливает равную ширину для каждого столбца. Когда я скрою столбец из jqgrid, он скроет этот столбец, но он отобразит это пространство на моей странице. Я хочу, чтобы jqgrid разделил ширину на все видимые столбцы.Установить ширину jqgrid

Вот мой код сниппета: инициализация

<table id="jqgrid" style="width:100%"></table> 
<div id="pjqgrid"></div> 

jqgrid:

  jQuery("#jqgrid").jqGrid({ 
      data: <% = GetJasonData %>, 
      datatype: "local", 
      height: 'auto',  
      colNames: jsonColname, 
      colModel: <% = GetJsonColModel %>, 
      rowNum: 2, 
      rowList: [10, 20, 30], 
      pager: '#pjqgrid', 
      sortname: 'Name', 
      toolbarfilter: true, 
      viewrecords: true, 
      sortorder: "asc", 
      caption: "All Entries ", 
      multiselect: true, 
      shrinkToFit: true, 
      autowidth: true 
     }); 
     jQuery("#jqgrid").jqGrid('navGrid', "#pjqgrid", { 
      edit: false, 
      add: false, 
      del: true 
     }); 
     jQuery("#jqgrid").jqGrid('inlineNav', "#pjqgrid"); 
     /* Add tooltips */ 
     $('.navtable .ui-pg-button').tooltip({ 
      container: 'body' 
     }); 

     jQuery("#m1").click(function() { 
      var s; 
      s = jQuery("#jqgrid").jqGrid('getGridParam', 'selarrrow'); 
      alert(s); 
     }); 
     jQuery("#m1s").click(function() { 
      jQuery("#jqgrid").jqGrid('setSelection', "13"); 
     }); 

     $('#jqgrid').hideCol('EFORMINSTANCEID'); 
     //// remove classes 
     //$(".ui-jqgrid").removeClass("ui-widget ui-widget-content"); 
     $(".ui-jqgrid-view").children().removeClass("ui-widget-header ui-state-default"); 
     $(".ui-jqgrid-labels, .ui-search-toolbar").children().removeClass("ui-state-default ui-th-column ui-th-ltr"); 
     //$(".ui-jqgrid-pager").removeClass("ui-state-default"); 
     //$(".ui-jqgrid").removeClass("ui-widget-content"); 

     // add classes 
     $(".ui-jqgrid-htable").addClass("table table-bordered table-hover"); 
     $(".ui-jqgrid-btable").addClass("table table-bordered table-striped"); 
    }) 

    $(window).on('resize.jqGrid', function() { 
     $("#jqgrid").jqGrid('setGridWidth', $("#content").width()); 
    }) 

Где GetJasonData и GetJsonColModel держат объекты JSON.

Заранее спасибо. Быстрые ответы очень заметны.

+0

вы можете разместить код для большей ясности – SaurabhM

+0

@SaurabhM здесь обновляется вопрос. – Ankit

ответ

-2

попробовать это

<table id="jqgrid" style="width:1250px;"></table> 
+0

есть. Завод хорошо. Также не забудьте установить для свойства "autowidth" значение "true" – Ankit