Как объединить ячейки в панели сетки extjs?
У меня есть extjs grid.Panel, и я пытаюсь имитировать слияние ячеек в строках, когда в первом столбце последовательных строк есть повторяющиеся данные. Используя средство визуализации столбцов, я очищаю значение первого столбца строки, если оно является дубликатом значения предыдущей строки. Я хотел бы изменить tdAttr первой ячейки предыдущей строки, чтобы строка охватывала соответствующее количество строк. Я не могу понять, как перейти к метаданным предыдущей строки. Ниже приведен мой текущий код рендерера.
renderer: function(value, metaData, record, row, col, store, gridView){
var dataIndex = metaData.column.dataIndex;
var overrideValue = value;
// check previous rows and determine whether this row's first column has the same
// value as a previous row's first column
if (col == 0){
var i = row-1;
while (i >= 0 && overrideValue != ""){
if (store.data.items[i].get(dataIndex) == value){
overrideValue = "";
// ----- here i want to update record i's metaData...
// metaData.tdAttr = 'rowspan=' + row-i+1
}
i--;
}
}
return overrideValue;
}
Я пробовал несколько способов получить метаданные, связанные с записью, но безуспешно. Методы getnodes и getnode объекта gridView возвращают значение undefined.
Спасибо за комментарий, Петр. Я нашел этот алгоритм слияния [ссылка] (programrall.com/article/5735112913 ), но в последних версиях extJS недоступны используемые методы GridView, в частности grid.getView().getRows() и grid. getView().getCell(i,j). Я использую getNode вместо getRows, и у меня есть некоторые успехи в обновлении ячеек с использованием возвращенного объекта, но я не понял этого полностью. Я отпишусь, как только полностью разберусь. getnode() работает только после рендеринга сетки.
Ответы 1
Я создал следующее решение. Я использовал комбинацию средства визуализации столбцов и прослушивателя представлений, в частности «viewready». Для строки строки сетки установлено значение «false», и я использую средство визуализации столбцов, чтобы применить собственный стиль, чтобы заменить строку строки по мере необходимости и очистить соответствующие значения ячеек. Я изменяю цвет фона «объединенных» ячеек в слушателе «viewready».
<style>
.mywrapcell .x-grid-cell-inner {
white-space: normal;
border-top-color: #c6c6c6;
border-top-width: 1px;
border-top-style: solid;
}
</style>
_addGrid: function() {
var myModel = Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{name: 'col1', type: 'string'},
{name: 'col2', type: 'string'},
]
});
var myData = [{col1: 'U2', col2: 'Jan 5'},
{col1: 'U2', col2: 'Jan 6'},
{col1: 'Crowded House', col2: 'Feb 19'},
{col1: 'Jack Johnson', col2: 'Apr 4'},
{col1: 'Jack Johnson', col2: 'Apr 5'},
{col1: 'Cage the Elephant', col2: 'May 10'},
{col1: 'Cage the Elephant', col2: 'May 11'},
{col1: 'Blondie', col2: 'Jun 6'},
{col1: 'Gorillaz', col2: 'Jun 19'},
{col1: 'Gorillaz', col2: 'Jun 20'}];
var mystore = Ext.create('Ext.data.Store', {
model: myModel,
data: myData,
proxy: {
type: 'memory',
enablePaging: false
}
});
var mygrid = Ext.create('Ext.grid.Panel', {
store: mystore,
itemId: 'grid',
viewConfig:{
listeners: {
viewready: function(view){
var dataIndex = 'col1';
// find the index of the column for row spanning
var colindex = view.ownerCt.columns.findIndex((x) => x.dataIndex == dataIndex);
if (colindex != -1){
var viewrows = view.getNodes();
var bgcolor = '#fff';
// set all the cells to the
// same background color
for(i=0;i<viewrows.length;i++){
viewrows[i].cells[colindex].style.backgroundColor = bgcolor;
}
}
}
},
enableEditing: false,
enableBulkEdit: false,
showRowActionsColumn: false,
enableRanking: false,
sortableColumns: false,
columnLines: true,
rowLines: false, //row lines handled in renderer
width: 225,
columns: [
{text: 'Artist',
dataIndex: 'col1',
flex: 1,
renderer: function(value, metaData, record, row, col, store, view){
var overrideValue = value;
// check previous rows and determine whether this row's first column has the same
// value as a previous row's first column
var i = row-1;
while (i >= 0 && overrideValue != ""){
if (store.data.items[i].get(metaData.column.dataIndex) == value){
overrideValue = '';
}
i--;
}
if (overrideValue != ""){
metaData.tdCls = 'mywrapcell';
}
return overrideValue;
}
},
{
text: 'Show Date',
dataIndex: 'col2',
tdCls: 'mywrapcell'
}
],
});
this.add(mygrid);
}
Я думаю, что средство визуализации предыдущей строки уже было запущено в это время, поэтому вы не можете использовать
metaData.tdAttr. Вы можете найти существующую предыдущую строку как элемент HTML с кодом JavaScript, не относящимся к ExtJS, и попытаться внести нужные изменения.