如何将小部件添加到 Dojo gridx/Grid 标题？

Posted 2023-02-26

【中文标题】如何将小部件添加到 Dojo gridx/Grid 标题？

【英文标题】：How to add widget to Dojo gridx/Grid header?

【发布时间】：2014-11-05 08:03:47

【问题描述】：

我有 gridx/Grid (http://oria.github.io/gridx/)，我想在标题单元格中添加一些小部件，例如文本框、下拉列表等。有没有办法将小部件放入标题单元格中？

【参考方案1】：

看来您需要的是一个名为HeaderRegions 的模块。这是API .特别注意add 和refresh 方法。

看一个简单的例子，看看here。

要仅影响一个列标题，请在回调提供的参数（列）上使用谓词，该参数是 add 的第一个参数（最简单的方法是使用列 ID）。

要插入一个小部件，以编程方式创建它，触发它的startup 方法并返回它的domNode 属性。

（我不确定，但可能是应该在 渲染网格之后调用 startup。为此，您可能必须在方法之外保留对小部件的引用）

为了完整起见，我包含了上面链接的一些示例：

Deferred.when(parser.parse(), function() 
  var hr = grid1.headerRegions;
  hr.add(function(col) 
    return domConstruct.create('div', 
      style: 'height: 13px; width: 10px; background-color: red;'
    );
  , 0, 0);
  hr.add(function(col) 
    return domConstruct.create('div', 
      style: 'height: 13px; width: 10px; background-color: green;'
    );
  , 1, 0);
  hr.refresh();
);

【讨论】：

是的，这帮助我将小部件插入到标题中。

@massimo：你是怎么做到的？当使用答案中的代码 sn-p 时，我的 gridx 完全没有改变，在控制台中显示没有错误？

好的，通过添加“显示：块”它至少就在标题文本旁边。之前它只有在我将鼠标悬停在标题上时才可见。知道如何将其移动到文本下方吗？ link_to_jsfiddle

grid.headerRegions 只允许您添加浮动到标题右侧的节点。要完全控制标头节点，请尝试使用 Header.getHeaderNode()

【参考方案2】：

是的，您可以有一个用于数据网格的插件，您可以在布局中添加文本框和其他输入内容。 布局示例

var layout = [
    name: 'Index', field: 'id',
    name: 'Date', field: 'date', width: 10,
        formatter: formatDate,                // Custom format, change the format in store.
        editable: true,                       // Editable cell
        type: dojox.grid.cells.DateTextBox,   // Use DateTextBox in editing mode
        getValue: getDateValue,               // Translate the value of DateTextBox to something the store can understand.
        constraint: formatLength: 'long'    // Format the date value shown in DateTextBox
    
];

或者这是更完整的例子

require(["dojox/grid/DataGrid", "dojox/grid/cells", "dojox/grid/cells/dijit",
"dojo/date/locale", "dojo/currency", "dijit/form/DateTextBox", "dijit/form/CurrencyTextBox",
"dijit/form/HorizontalSlider", "dojo/domReady!"
], function(DataGrid, cells, cellsDijit, locale, currency, DateTextBox, CurrencyTextBox, HorizontalSlider)
function formatCurrency(inDatum)
    return isNaN(inDatum) ? '...' : currency.format(inDatum, this.constraint);

function formatDate(inDatum)
    return locale.format(new Date(inDatum), this.constraint);

gridLayout = [
    defaultCell:  width: 8, editable: true, type: cells._Widget, styles: 'text-align: right;'  ,
    cells: [
         name: 'Id', field: 'id', editable: false, width: 2 /* Can't edit ID's of dojo/store items */ ,
         name: 'Date', field: 'col8', width: 10, editable: true,
            widgetClass: DateTextBox,
            formatter: formatDate,
            constraint: formatLength: 'long', selector: "date",
         name: 'Priority', styles: 'text-align: center;', field: 'col1', width: 10,
            type: cells.ComboBox,
            options: ["normal","note","important"],
         name: 'Mark', field: 'col2', width: 5, styles: 'text-align: center;',
            type: cells.CheckBox,
         name: 'Status', field: 'col3',
            styles: 'text-align: center;',
            type: cells.Select,
            options: ["new", "read", "replied"] ,
         name: 'Message', field: 'col4', styles: '', width: 10 ,
         name: 'Amount', field: 'col5', formatter: formatCurrency, constraint: currency: 'EUR',
            widgetClass: CurrencyTextBox, width: "auto" ,
         name: 'Amount', field: 'col5', formatter: formatCurrency, constraint: currency: 'EUR',
            widgetClass: HorizontalSlider, width: 10
    ]
];

记住你需要添加dojo.require("dojox.grid.cells.dijit");

你可以阅读它here

更新这里是gridx的例子

var grid = new Grid(
  cacheClass: 'gridx/core/model/cache/Async',
  store: someStore,
  structure: [
     id: 'progress', field: 'progress', name: 'Install Progress',
      widgetsInCell: true,
      decorator: function()
          return "<input type="text" name='firstname' value='testing testing'  data-dojo-type='dijit/form/TextBox' data-dojo-props="trim:true, propercase:true" id='firstname' />";
      
    
  ],
  modules: [
    "gridx/modules/CellWidget"
  ]
);

更多详情请阅读here

更新2 好的，如果我现在正确理解您，当您创建 gridx 时，每个布局名称字段都将包含与 grid- 前缀关联的字段名称，因此如果您要更改的标题是 name 标题，您需要使用 grid-prefix 替换值或用 html 注入它

   //Clear the value inside the grid
     domConstruct.empty("grid-name")
//place a textbox in the header
    require(["dijit/form/TextBox", "dojo/domReady!"], function(TextBox)
        var myTextBox = new dijit.form.TextBox(
            name: "firstname",
            value: "" /* no or empty value! */,
            placeHolder: "type in your name"
        , "grid-name");
    );

【讨论】：

这是一个 DataGrid 示例，我认为这不适用于 gridx/Grid (oria.github.io/gridx)。

尝试一下它应该可以正常用于基本实现看看这个dojo-toolkit.33424.n3.nabble.com/…

如果您想制作更多自定义小部件，我为 gridx 添加了更新

我已经尝试了最后一次更新，它在列的所有单元格中呈现小部件，但不在标题单元格中。

所以我可以理解你到底想要什么，你想用下拉框或输入框替换字段标题名称？