Question

我有一个数据网格。

当我拖动列宽并刷新页面时，该宽度被设置为默认宽度，并且没有改变。

我该如何实现？

当我更改列的宽度时，将触发columnResize事件。

我该如何实现？

pqgrid.html：

在我的HTML文件中，正文包含以下内容：

其他网格和jQuery文件添加在<head>标记中。

   <body>
        <div id="grid_array" style="margin:auto;"></div>
        <script src="pq.js"></script> 

   </body>

和pq.js：

var obj = {};
var data = [];
var $grid;

$(function(){
    var data = [
            [1,'Exxon Mobil','339,938.0','36,130.0'],
            [2,'Wal-Mart Stores','315,654.0','11,231.0'],
            [3,'Royal Dutch Shell','306,731.0','25,311.0'],
            [4,'BP','267,600.0','22,341.0'],
            [5,'General Motors','192,604.0','-10,567.0'],
            [6,'Chevron','189,481.0','14,099.0'],
            [7,'DaimlerChrysler','186,106.3','3,536.3'],
            [8,'Toyota Motor','185,805.0','12,119.6'],
            [9,'Ford Motor','177,210.0','2,024.0'],
            [10,'ConocoPhillips','166,683.0','13,529.0'],
            [11,'General Electric','157,153.0','16,353.0'],         
            [12,'Total','152,360.7','15,250.0'],                
            [13,'ING Group','138,235.3','8,958.9'],
            [14,'Citigroup','131,045.0','24,589.0'],
            [15,'AXA','129,839.2','5,186.5'],
            [16,'Allianz','121,406.0','5,442.4'],
            [17,'Volkswagen','118,376.6','1,391.7'],
            [18,'Fortis','112,351.4','4,896.3'],
            [19,'Crédit Agricole','110,764.6','7,434.3'],
            [20,'American Intl. Group','108,905.0','10,477.0']
    ];

    obj.draggable = true;
    obj.refresh = true;
    obj.width = 700;
    obj.height = 400;
    obj.colModel = [{title:"Rank", width:100, dataType:"integer"},
        {title:"Company", width:200, dataType:"string"},
        {title:"Revenues ($ millions)", width:150, dataType:"float", align:"right"},
        {title:"Profits ($ millions)", width:150, dataType:"float", align:"right"}];
    obj.dataModel = {data:data};

    $("#grid_array").pqGrid(obj);

})

$(function(){
    $("#grid_array").pqGrid({
    columnResize: function( event, ui ) {
        console.log(ui.column.width)
        console.log(ui)
        console.log(ui.newWidth);
        console.log(ui.oldWidth);
        // ui.column.width = ui.newWidth;
        obj.colModel[ui.colIndx].width = ui.newWidth;

        $("#grid_array").pqGrid(obj);

    }
});
})

通过使用鼠标拖动列边缘来更改列宽，并刷新页面会导致默认宽度，即未更新列宽

0 个答案: