kendo gridは行番号/番号列(二)を表示します.
2919 ワード
前のブログで述べた番号列に基づいて、新しいgridを作成するごとに、バインディングイベントを書き換える必要があります.
したがって、ここでは、kendo gridをカプセル化し、シーケンス番号列の制御可能な表示を実現する.
シリアル番号を表示する必要はありません.
したがって、ここでは、kendo gridをカプセル化し、シーケンス番号列の制御可能な表示を実現する.
/*
*
* ExtGrid
*
*/
var ExtGrid = kendo.ui.Grid.extend({
init: function (element, options) {
var that = this;
that._orderNumber(options);
kendo.ui.Grid.fn.init.call(that, element, options);
that._RegisterRowNumber(options);
},
_orderNumber: function (options) {
if (options.rowNumber) {
var that = this;
var rowTemplate = '#= count #';
var renderRowCount = function () {
that.options._count += 1;
return kendo.render(kendo.template(rowTemplate), [{ count: that.options._count }]);
}
if (options.rowNumber) {
if (options.columns) {
//1.
options.columns.splice(0, 0, { attributes: { 'class': 'tight-cell' }, editor: null, editable: false, title: '', template: renderRowCount, width: "38px" });
}
}
}
},
_RegisterRowNumber: function () {
var that = this;
if (that.options.rowNumber) {
var that = this;
that.bind('dataBinding', function () {
that.options._count = (that.dataSource.page() - 1) * that.dataSource.pageSize();
that.options._count = isNaN(that.options._count) ? 0 : that.options._count;
});
}
},
options: {
name: 'ExtGrid',
_count: 0,
rowNumber: false
}
});
kendo.ui.plugin(ExtGrid);
ExtGridのパッケージを完成しました.直接使用します.$("#grid").kendoExtGrid({
sortable: true,
dataSource: [{
name: "Jane Doe",
age: 30
}, {
name: "Jane Doe",
age: 30
}, {
name: "Jane Doe",
age: 30
}, {
name: "Jane Doe",
age: 30
}, {
name: "John Doe",
age: 33
}],
columns: [{
field: "name"
}, {
field: "age"
}],
pageable: {
pageSize: 2
},
rowNumber: true,
});
注意上で使用している名前はkendoExtGridで、options属性のrowNumberを設定する必要があります.trueはシリアル番号を表示します.書かないまたはfalseを書く必要があります.シリアル番号を表示する必要はありません.