DOJO 排序改变了列的宽度

Question

我的页面中有一个 DOJO 表。我有一些列，当单击列时，列中的项目按升序和降序排序。问题是，当我单击一列时，排序成功但列的宽度发生了变化。即使在排序后如何锁定列宽？这是代码。

<script src='../js/dojo-release-1.8.0/dojo/dojo.js'></script>
<script type="text/javascript">
dojo.require("dojox.grid.EnhancedGrid");
dojo.require("dojox.grid.enhanced.plugins.Pagination");
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dojox.grid.enhanced.plugins.Filter");
dojo.require("dojox.data.QueryReadStore");
dojo.require("dojo.parser"); // scan page for widgets and instantiate them
var gridLayout = [ 
    { name: "S. No.", classes: "title",styles: 'text-align: center;', width: "70px",get : siFormatter,filterable: false },
    { name: "Date & Time", classes: "title",field: "date",styles: 'text-align: center;', width: "150px" },
    {classes: "title", name: "Comm Mode", field: "commtype",styles: 'text-align: center;', width: "100px"},
    { name: "IP/Phone No.", classes: "title", field: "devType", fields:['devType', 'name'], formatter:formatLink1,styles: 'text-align: center;', width: "150px"},
    { name: 'Status', classes: "title", field: "statusMessageFull", fields:['statusMessageFull', 'statusMessageColor'], formatter:formatLink,styles: 'text-align: center;', width: "150px"},
    { name: "I/P Voltage (V)", classes: "title",field: "mainsVoltage",styles: 'text-align: center;', width: "80px" },
    { name: "I/P Charging Current (A)", classes: "title",field: "gridchargingcurrent",styles: 'text-align: center;', width: "150px" },
    { name: "I/P Frequency (Hz)", classes: "title",field: "mainsFreq",styles: 'text-align: center;', width: "120px" },
    { name: "PV Voltage (V)", classes: "title",field: "PVVoltage",styles: 'text-align: center;', width: "100px" },
    { name: "PV Current (A)", classes: "title",field: "PVCurrent", styles: 'text-align: center;',width: "100px" },                              
    { name: "O/P Voltage (V)", classes: "title",field: "outputVoltage", styles: 'text-align: center;',width: "100px" },
    { name: "O/P Current (A)", classes: "title",field: "outputCurrent", styles: 'text-align: center;',width: "100px" },
    { name: "O/P Frequency (Hz)", classes: "title",field: "outputfreq", styles: 'text-align: center;',width: "120px" },
    { name: "O/P Energy (kWh)", classes: "title",field: "outputKWH", styles: 'text-align: center;',width: "120px" },
    { name: "Battery Voltage (V)", classes: "title",field: "batteryVoltage",styles: 'text-align: center;', width: "120px" },                                 
    { name: "Battery Discharging Current (A)", classes: "title",field: "batteryCurrent",styles: 'text-align: center;', width: "220px" },
    { name: "Load (%)", classes: "title",field: "loadpercentage",styles: 'text-align: center;', width: "50px" },
    { name: "Cumulative Solar Energy (kWh)", classes: "title",field: "SolarCumKwh",styles: 'text-align: center;', width: "210px"}];
var store = null;


dojo.addOnLoad(function() {
    store = new dojox.data.QueryReadStore({
        url : "./dataAlerts.jsp?siteID=<%=siteID%>&groupID=<%=groupID%>&divisionID=<%=divisionID%>&statusID=<%=statusID%>&date=<%=date%>&date1=<%=date1%>",
        requestMethod : "post"
    });
    <%
       if(Configuration.isSolarNMSAdvancedVersion())
       { 
    %> 
     grid1.canSort = function(col){if(col == 1) return false; else return true;};

     <%
       }else{
    %>
   grid1.canSort = function(col){if(col == 1) return false; else return true;};
    <%
       }
    %>
    grid1.setStore(store);
    grid1.setStructure(gridLayout);
});


var lastSearchValue = "";
function doSearch(el) {
    if (el.value != lastSearchValue) {
        lastSearchValue = el.value;
        grid1.filter({
            name : el.value
        });
        grid2.filter({
            name : el.value
        });
    }
}
function siFormatter(index) {
    return ((this.grid.currentPage() - 1) * this.grid
            .currentPageSize())
            + index + 1;
}
 dojo.ready(function(){
       // alert("Dojo version " + dojo.version + " is loaded");

    });
function myTimerforRefresh(){
    store = new dojox.data.QueryReadStore({
        url : "./dataAlerts.jsp?siteID=<%=siteID%>&groupID=<%=groupID%>&divisionID=<%=divisionID%>&statusID=<%=statusID%>&date=<%=date%>&date1=<%=date1%>",
                    requestMethod : "post"
                });
        grid1.canSort = function(col) {
            if (col == 1)
                return false;
            if (col == 5)
                return false;
            else
                return true;
        };
        grid2.canSort = function(col) {
            if (col == 1)
                return false;
            if (col == 5)
                return false;
            else
                return true;
        };
        grid2.setStore(store);
        grid2.setStructure(gridLayout);

    }

    function formatLink1(value) {
        var url = '<a href="#" onmouseover="'+value[1]+'">' + value[0] + '</a>';
        return url;
    }

    function exportAll() {
        dijit.byId("grid").exportGrid("csv", function(str) {
            dojo.byId("output").value = str;
        });
    };

    function getDelete(item) {
        return "<button onclick=\"location.href='/report?command=delete&reportNo="
                + item + "'\">Delete</button>";
    }

    function formatLink(value) {
        return '<div style="text-align: center; color:white; background-color:'+value[1]+'; font-weight:900;">'
                + value[0] + '</div>';
    }

Answer 1

增强的网格提供了一个名为 Cookie 的插件。 Cookie 插件提供了一种方便的方法来保持网格属性（如列宽、排序顺序等），因此当重新加载页面或重新创建具有相同 id 的网格时，网格将看起来相同。

看看这里： https://dojotoolkit.org/reference-guide/1.9/dojox/grid/EnhancedGrid/plugins/Cookie.html#id2

使用代码更新

1. 您必须设置要求：

   dojo.require("dojox.grid.enhanced.plugins.Cookie");

2. 在设置网格时调用插件：

   var grid = new dojox.grid.EnhancedGrid({
   id:"grid",
   store:"mystore",
   structure:"mystructure",
   plugins:{
            cookie:{
               cellWidth: true// Do persist column width.
             }
            }
   });
   

这里是使用它的声明方式：

  <div id="grid" data-dojo-type="dojox.grid.EnhancedGrid"
  data-dojo-props="store:mystore, structure:'mystructure',
     plugins:{
       cookie: /* a Boolean value or an configuration object */{}
  }" ></div>

这应该使单元格宽度保持原来的宽度。

问候，米里亚姆

Answer 2

列排序后，列标题中会出现一个小箭头，表示该列已排序。设置列宽时记住箭头的宽度，一切都应该没问题。

Answer 3

在定义网格时尝试设置 autoWidth = true。