jqGrid с columnChooser, как предотвратить авторазмер после выбора столбцов? - PullRequest
Новая
       32

jqGrid с columnChooser, как предотвратить авторазмер после выбора столбцов?

1 голос
/ 01 апреля 2011

У меня есть большая таблица, 24 столбца, 2000 пикселей, и я хочу, чтобы ширина каждого столбца оставалась такой же, как после выбора столбцов видимости или изменения порядка. Но компонент, кажется, сжимает столбцы, чтобы соответствовать глобальному размеру сетки в конце.

Как предотвратить это изменение размера и сохранить исходную ширину каждого столбца, который остается видимым?

Или как установить ширину столбца? Я нашел этот код, чтобы получить фактическую ширину столбца, 

mygrid=$("#list");
var width = 0, i = 0, headers = mygrid[0].grid.headers, l = headers.length;
var th = headers[4].el; // 5 th column in this sample
alert($(th).width());

Но как мне установить новую ширину и отобразить результат?

Я нашел вопрос переполнения стека jqGrid get "th" и "thead", используя jQuery о структуре jqGrid, но как использовать его для изменения размера столбца?

Я использую этот код для отображения сетки: 

$(function(){ 'navGrid',
    $("#list").jqGrid({
        url:'myfirstgrid.php?from='+$("#from").val()+'&to='+$("#to").val(),
        datatype: 'json',
        loadError: function(xhr,status,error){alert(status+" "+error);},
        mtype: 'GET',
        colNames:['id','date','heure','expediteur','refcommande','retour','differe','identiclient','nomclient','adresse','postal','ville','zone','pays','telephone','nature','nbcolis','poids','typeexpe','message','portpaye','montantCR','valeur','aiguillage'],
        colModel :[
            {name:'id', index:'id', width:40, sorttype:"int",sortable:true,align:'right',autowidth: false},
            {name:'datedemande', index:'datedemande', width:40,align:'center',datefmt:'d-m-Y',autowidth: false},
            {name:'heuredemande', index:'heure', width:35, align:'center',autowidth: false},
            {name:'expediteur', index:'expediteur', width:60, align:'left',autowidth: false},
            {name:'refcommande', index:'refcommande', width:60, align:'left',autowidth: false},
            {name:'retour', index:'retour', width:15, sortable:false, align:'center',autowidth: false},
            {name:'datediffere', index:'datediffere', width:35, align:'center',autowidth: false},
            {name:'identiclient', index:'identiclient', width:35,aligne:'left',autowidth: false},
            {name:'nomclient', index:'nomclient', width:70,aligne:'left',autowidth: false},
            {name:'adresse', index:'adresse', width:90,align:'left'},
            {name:'postal', index:'postal', width:35,align:'right'},
            {name:'ville', index:'ville', width:55},
            {name:'zone', index:'zone', width:55},
            {name:'pays', index:'pays', width:30},
            {name:'telephone', index:'telephone', width:55,align:'right'},
            {name:'nature', index:'nature', width:55},
            {name:'nbcolis', index:'nbcolis', width:30, align:'right'},
            {name:'poids', index:'poids', width:30, align:'right'},
            {name:'typeexpe', index:'typeexpe', width:30},
            {name:'message', index:'message', width:70,jsonmap:'message'},
            {name:'portpaye', index:'portpaye', width:30 },
            {name:'montantCR', index:'montantCR', width:30, align:'right'},
            {name:'valeur', index:'valeur', width:30, align:'right'},
            {name:'aiguillage', index:'aiguillage', width:45}
        ],
        jsonReader: { repeatitems: false,root:"rows" },
        pager: '#pager',
        rowNum:10,
        rowList:[10,15,20,25,30,40,50,100],
        sortname: 'id',
        sortorder: 'desc',
        viewrecords: true,
        autowidth: false,
        eight:"100%",
        idth:2000,
        iddengrid: false,
        overrows:true,
        ortable:true,
        ixed:true,
        caption: 'Historique demandes'
    });
    jQuery("#list").jqGrid('navGrid',"#pager",{edit:false,add:false,del:false,search:true},{},{},{},{multipleSearch:true});
      jQuery("#list").jqGrid('navButtonAdd','#pager',{
      caption: "Columns",
      title: "Reorder Columns",
      onClickButton : function (){
          jQuery("#list").jqGrid('columnChooser');
       }
    });
});

и это в части тела: 

<div id="parentDiv"  style="width: 100%"><table id="list"></table><div id="pager"></div></div>

Update

Я проверил это с новым значением ширины. Как: 

pager: '#pager',
rowNum: 10,
rowList: [10,15,20,25,30,40,50,100],
sortname: 'id',
sortorder: 'desc',
viewrecords: true,
autowidth: false,  //ne pas recalculer la largeur de chaque colonne.
height: "100%",
width: '3000px',
hiddengrid: false,
hoverrows: true,
sortable: true,
fixed: true,
ShrinkToFit: false,
caption: 'Historique demandes' ,
shrinkToFit: false

Я также изменил код для вызова звонка columnhooser следующим образом 

jQuery("#list").jqGrid('navButtonAdd','#pager',{
    caption: "Columns",
    title: "Reorder Columns",
    onClickButton : function (){
        jQuery("#list").jqGrid('columnChooser',{shrinkToFit:false,autowidth: false});

И теперь он прекрасно работает!

1 Ответ

2 голосов
/ 04 апреля 2011

Прежде всего, вам, вероятно, следует использовать другие значения width для всех столбцов. Ваши текущие значения будут расширены до 2000px. Лучше прямо установить правильное значение.

Мне кажется, что вы должны использовать shrinkToFit: false параметр jqGrid. Вам следует учесть некоторые ошибки в расчете ширины jqGrid ( this и this ). Если вы используете версию разработчика jqGrid, вы можете использовать соответствующие исправления ошибок, которые я опубликовал: this или this Если вы используете стандартную свернутую версию jqGrid, вы можете исправить проблему, просто установив правильный width jqGrid.

...