Question

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

Answer 1

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

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

<强> UPDATE2 好的，如果我现在正确地理解你，当你创建一个gridx时，每个布局名称字段都会有一个与grid- prefix相关联的字段名称，所以如果要更改的标题是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");
    });

Answer 2

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

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

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

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

（我不确定但可能是startup在网格渲染后应该被称为。为此你可能需要在方法之外保留对小部件的引用）

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

＆＃13;
＆＃13;
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(); });
＆＃13;
＆＃13;
＆＃13;

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

2 个答案: