如何创建一个dojo数据网格,其中一列是标题行中的按钮? [英] How to create a dojo data grid with one of column being a button in header row?
问题描述
我有一个dojo(v1.6)数据网格,它具有复选框以选择最左列的行。我需要将这些复选框的标题栏作为删除按钮,而不是全选复选框。点击删除按钮,所有选定的行都将被删除。
I have a dojo(v1.6) data grid which have checkbox to select rows as left most column. I need to have header column of these checkbox as delete button instead of Select All checkbox. On clicking the delete button all selected rows gets deleted.
请查找数据网格演示。
我不知道如何将复选框的标题列作为按钮。请帮我自定义小部件。
这里是网格js代码
I don’t know how to bring the header column of checkbox as button. Please help me to customize the widget. Here is grid js code
dojo.ready(function(){
/*set up data store*/
var data = {
identifier: 'id',
items: []
};
var data_list = [
{ col1: "normal", col2: false, col3: 'But are not followed by two hexadecimal', col4: 29.91},
{ col1: "important", col2: false, col3: 'Because a % sign always indicates', col4: 9.33},
{ col1: "important", col2: false, col3: 'Signs can be selectively', col4: 19.34}
];
var rows = 10;
for(var i=0, l=data_list.length; i<rows; i++){
data.items.push(dojo.mixin({ id: i+1 }, data_list[i%l]));
}
var store = new dojo.data.ItemFileWriteStore({data: data});
/*set up layout*/
var layout = [
{ type: "dojox.grid._CheckBoxSelector" },
[
{'name': 'Column 1', 'field': 'id', 'width': '20%'},
{'name': 'Column 2', 'field': 'col2', 'width': '20%'},
{'name': 'Column 3', 'field': 'col3', 'width': '25%'},
{'name': 'Column 4', 'field': 'col4', 'width': '20%'}
]
];
/*create a new grid:*/
var grid = new dojox.grid.DataGrid({
id: 'grid',
store: store,
structure: layout,
cellOverClass: 'cellover'
},
document.createElement('div')
);
/*append the new grid to the div*/
dojo.byId("gridDiv").appendChild(grid.domNode);
/*Call startup() to render the grid*/
grid.startup();
});
HTML
<div id="gridDiv"></div>
推荐答案
您可以从现有的实现自己的CheckBoxSelector。我通过查看 _Selector.js
源码发现了这些方法。要重写的有趣方法是 generateHtml
和 doclick
。
You can implement your own CheckBoxSelector from the existing one. I discovered the methods by looking at the _Selector.js
source. The interesting methods to override were generateHtml
and doclick
.
请参阅更新小提琴。
dojo.declare('my.grid._CheckBoxSelector', [dojox.grid._CheckBoxSelector], {
_headerBuilderClass: dojo.extend(function (view) {
dojox.grid._HeaderBuilder.call(this, view);
}, dojox.grid._HeaderBuilder.prototype, {
generateHtml: function () {
var w = this.view.contentWidth || 0;
return '<table style="width:' + w + 'px;" ' +
'border="0" cellspacing="0" cellpadding="0" ' +
'role="presentation"><tr><th style="text-align: center;">' +
'<button data-dojo-type="dijit.form.Button" type="button">x</button><div class="dojoxGridCheckSelector dijitReset dijitInline dijitCheckBox" style="display:none"></div></th></tr></table>';
},
doclick: function (e) {
this.view.grid.removeSelectedRows();
return true;
}
})
});
和
/*set up layout*/
var layout = [{
type: "my.grid._CheckBoxSelector"
},
...
}]];
删除行
this.view.grid.removeSelectedRows();
您可以在启动后解析网格以创建dijit小部件。
You can parse the grid after startup to create the dijit widgets.
grid.startup();
// Not the best practice here but it should give you a starting point
// on where to find the header node.
dojo.parser.parse(grid.views.views[0].headerContentNode);
这篇关于如何创建一个dojo数据网格,其中一列是标题行中的按钮?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!