dojo gridx 在表格底下加一段文字点击按钮动态改变

您可以使用Gridx的“footer”属性将表格底部添加一个附加区域。然后使用Gridx的API方法“setFooterContent”动态更改该区域的内容。以下是一个示例：

HTML：

<div id="gridContainer"></div>
<div id="footerContainer">这是表格底部的默认文本。</div>
<button id="changeFooterBtn">更改表格底部文本</button>

JS：

require([
  'gridx/Grid',
  'gridx/core/model/cache/Async',
  'gridx/modules/ColumnResizer',
  'gridx/modules/Filter',
  'gridx/modules/Pagination',
  'gridx/modules/pagination/PaginationBar',
  'gridx/modules/SummaryBar',
  'gridx/modules/VirtualVScroller',
  'dojo/dom',
  'dojo/dom-construct',
  'dojo/on',
  'dojo/domReady!'
], function(
  Grid,
  Cache,
  ColumnResizer,
  Filter,
  Pagination,
  PaginationBar,
  SummaryBar,
  VirtualVScroller,
  dom,
  domConstruct,
  on
){
  // 创建表格
  var grid = new Grid({
    cacheClass: Cache,
    store: ...,
    structure: ...,
    modules: [
      ColumnResizer,
      Filter,
      Pagination,
      PaginationBar,
      SummaryBar,
      VirtualVScroller
    ],
    // 添加附加区域
    footer: '<div>' + dom.byId('footerContainer').innerHTML + '</div>',
    // 设置表格容器
    autoHeight: true,
    autoWidth: true,
    renderOnIdle: true
  }, 'gridContainer');

  // 更改表格底部文本的按钮点击事件
  on(dom.byId('changeFooterBtn'), 'click', function(){
    var newFooterContent = '这是表格底部的新文本。';
    domConstruct.place('<div>' + newFooterContent + '</div>', dom.byId('footerContainer'), 'only');
    grid.setFooterContent('<div>' + newFooterContent + '</div>');
  });
});

请注意，我们使用“dojo/dom-construct”模块的“place”方法将新文本放在现有的“footerContainer”元素内。然后，我们使用gridx的“setFooterContent”方法将新内容放在表格的附加区域中