Javascript 如何将小部件添加到dojogridx/Grid头？

我有gridx/Grid（），我想在标题单元格中添加一些小部件，如文本框、下拉列表等。有没有办法将小部件放在标题单元格中？

是的，可以有一个datagrid插件，可以在布局中添加文本框和其他输入内容。 布局示例

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”）

你可以读到它

更新以下是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"
  ]
});

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

有关一个简单的示例，请看一看

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

要插入小部件，请以编程方式创建它，启动它的
startup
方法并返回它的
domNode
属性

（我不确定，但可能是在网格呈现后应调用
startup
。为此，您可能需要在方法之外保留对小部件的引用）

为了完整起见，我将上面链接的一些示例包括在内：


Deferred.when（parser.parse（），function（））{
var hr=grid1.headerRegions；
人力资源添加（功能（列）{
返回domConstruct.create（'div'{
样式：“高度：13px；宽度：10px；背景色：红色；”
});
}, 0, 0);
人力资源添加（功能（列）{
返回domConstruct.create（'div'{
样式：“高度：13px；宽度：10px；背景色：绿色；”
});
}, 1, 0);
hr.refresh（）；
});这是一个DataGrid示例，我认为这不适用于gridx/Grid（）。试试看，基本实现也可以。看看这个。如果你想定制更多Widget，我为gridx添加了一个更新。我尝试了上一次更新，它在列的所有单元格中呈现小部件，但不在标题单元格中。所以我可以理解你到底想要什么，您想用下拉框或输入框替换字段标题名称吗？是的，这帮助我将小部件插入标题。@massimo:您是如何实现的？当使用答案中的代码片段时，my gridx根本没有改变，在控制台中显示没有错误？好的，通过添加“display:block”，它至少就在标题文本的旁边。之前，只有当我将鼠标悬停在标题上方时，它才可见。你知道怎么把它移到文字下面吗
grid.headerRegions
仅允许添加浮动到标题右侧的节点。要完全控制标头节点，请尝试使用
   //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");
    });