EasyUI Forum

Hello,

I have a datagrid with json remote data but the columns headers don't fit the width of the rows cell, see picture.

How can I fit columsn P.1, P.2, ecc to the same fixed width?

this is my datagrid code:


function getClassificaTrofeo(classifica, title){
                var tabella = '#tabella_classifica_trofeo_'+classifica;
                var url = 'classifica_trofeo.php?class='+classifica;

                console.log(url);
                $(tabella).datagrid({
                    title: title,
                    url: url,
                    striped: true,
                    fitColumns: true,
                    fit: true,
                    pagination: true,
                    method: 'get',
                    rownumbers: true,
                    loadMsg: 'Attendere caricamento dati!',
                    pageList: [100,150,200,300,500,1000],
                    toolbar:  [{
                        text:'Stampa',
                        iconCls:'icon-pdf',
                        handler:function(){
                            $.messager.confirm('Conferma!', 'Vuoi stampare questa classifica?', function(r){
                                if (r)
                                {
                                    $.post(
                                        'dummypage.html',
                                        function(data)
                                        {
                                            window.open(encodeURI('classifica_pdf.php?class='+classifica+'&id_gara=<?php echo $id_gara; ?>'));
                                        });
                                }
                            });
                        }
                    },
                        {
                            text:'Esporta',
                            iconCls:'icon-export',
                            handler:function(){esportaClassifica(classifica, title)}
                        },
                    ],
                    columns:[[
                        {field:'nome',title:'Nome', width: 100, resizable: false},
                        {field:'societa',title:'Societa', width: 100, resizable: false},
                        {field:'categoria',title:'Cat.',resizable: false},
                        {field:'punteggio',title:'Punti',resizable: false},
                        {field:'punti_singole_gare[0].punti_assoluto',title:'P.1', align:'center', resizable: false, formatter:function(value,row){
                            return row.punti_singole_gare[0].punti_assoluto;
                        }},
                        {field:'punti_singole_gare[1].punti_assoluto',title:'P.2',align:'center', resizable: false, formatter:function(value,row){
                            return row.punti_singole_gare[1].punti_assoluto;
                        }},
                        {field:'punti_singole_gare[2].punti_assoluto',title:'P.3',align:'center', resizable: false, formatter:function(value,row){
                            return row.punti_singole_gare[2].punti_assoluto;
                        }},
                        {field:'punti_singole_gare[3].punti_assoluto',title:'P.4',align:'center', resizable: false, formatter:function(value,row){
                            return row.punti_singole_gare[3].punti_assoluto;
                        }},
                        {field:'punti_singole_gare[4].punti_assoluto',title:'P.5',align:'center', resizable: false, formatter:function(value,row){
                            return row.punti_singole_gare[4].punti_assoluto;
                        }},
                        {field:'punti_singole_gare[5].punti_assoluto',title:'P.6',align:'center', resizable: false, formatter:function(value,row){
                            return row.punti_singole_gare[5].punti_assoluto;
                        }},
                        {field:'punti_singole_gare[6].punti_assoluto',title:'P.7',align:'center', resizable: false, formatter:function(value,row){
                            return row.punti_singole_gare[6].punti_assoluto;
                        }},
                        {field:'punti_singole_gare[7].punti_assoluto',title:'P.8',align:'center', resizable: false, formatter:function(value,row){
                            return row.punti_singole_gare[7].punti_assoluto;
                        }},
                        {field:'punti_singole_gare[8].punti_assoluto',title:'P.9',align:'center', resizable: false, formatter:function(value,row){
                            return row.punti_singole_gare[8].punti_assoluto;
                        }},
                        {field:'punti_singole_gare[9].punti_assoluto',title:'P.10',align:'center', resizable: false, formatter:function(value,row){
                            return row.punti_singole_gare[9].punti_assoluto;
                        }},
                        {field:'punti_singole_gare[10].punti_assoluto',title:'P.11',align:'center', resizable: false, formatter:function(value,row){
                            return row.punti_singole_gare[10].punti_assoluto;
                        }},
                        {field:'punti_singole_gare[11].punti_assoluto',title:'P.12',align:'center', resizable: false, formatter:function(value,row){
                            return row.punti_singole_gare[11].punti_assoluto;
                        }}

                    ]]
                });
                $(tabella).datagrid('reload');
            }

The field name contains illegal characters '[' and ']' such as 'punti_singole_gare[0].punti_assoluto'. Please replace it with 'punti_singole_gare_0_punti_assoluto'.

thank you very much jarry.

but I don't understand the concept of the "field" Properties of column. The documentation say "The column field name." But if this name reflect the json data how works with "punti_singole_gare_0_punti_assoluto" that don't exist in my json data?