Question

我正在尝试编辑Knack上允许JS修改与CSS格式组合的页面。我所做的更改是在每个使用excel格式的页面上锁定标题。当用户更改下拉选项中的行数或导航到下一页时，这似乎会中断。

我确信有几种方法可以做到这一点，但我认为最简单的方法是查看第一行的样式，如果最小宽度小于所需长度，则刷新页面。如果标题中的第一个条目不是XXX像素，请使用window.location.reload（）重新加载页面;或类似的。

以下是JS的一个例子：

$( document ).on ('knack-page-render.any', (function(event, view, data) {
  var $table = $('#view_60 > table');
  var $bodyCells = $table.find('tbody tr:first').children();
  var newWidths = [];
  var colWidth = $bodyCells.map(function(index, val) {
    /* Debug message*/
    //console.log("Index: " + index + ". Value=" + $(this).width());
      return $(this).width();
    }).get();
  var $headerCells =  $table.find('thead tr').children();  
  //Evaluate new max width
  $table.find('thead tr').children().each(function(i){ 
    var headerWidth = $(this).width();    
    var bodyRowWidth = colWidth[i];
    var newWidth = headerWidth;
    if (bodyRowWidth > newWidth){
        newWidth = bodyRowWidth;           
    }
     newWidth++;
    $(this).css("min-width", newWidth + "px");
    newWidths[i] = newWidth;
    /* Debug message*/
   // console.log("Cell: " + i + ", header width=", headerWidth + ", bodyRowWidth=" +  bodyRowWidth + ", idealWidth=" + newWidth + " Classes: " + $(this).attr('class'));    
  });
  // Set new widths everywhere
  $table.find('tbody tr:first').children().each(function(i){
    //console.log("Setting new width to " + newWidths[i]);
    $(this).css("min-width", ( newWidths[i]) + "px");
  });
}));

以下是相关的CSS：

#view_52 table {border-collapse: collapse;} 
#view_52 thead {display:block; padding: 2px; margin: 0px;} 
#view_52 tbody {display:block; overflow:auto; width 100%; margin: 0px; height:500px; padding:2px;}

如果字段宽度发生变化，如何刷新页面？

0 个答案: