Сгруппированные заголовки и столбцы в Slick Grid

Question

Я хотел реализовать что-то вроде Sencha Aggregation Grid в SlickGrid. У меня очень плохой обходной путь для этого,

var columns = [ 
     name:getAggregatedName(), field: 'save', width:160, formatter: customFormatter} 
]; 

function customFormatter(){ 

    var text = '<div> <span style ="float:left"> Value1 </span> <span style ="float:right"> Value2 </span> </div>'; 
    return text;     
} 
function getAggregatedName(){ 
    var html ="<div style=\"text-align: center;border-bottom: 1px solid red;\"> <span> Action </span> </div> <span style =\"float:left\"> Action1</span><span style =\"float:right\"> Action2</span>"; 
    return html; 
} 

Его не подходит, его ни расширяемой, ни Виль дать правильное форматирование.

Для правильной настройки этого параметра мне пришлось изменить высоту строки заголовка в файле slick.grid.js, что опять неверно.

Есть ли правильный способ сделать это? Все идеи приветствуются

Благодаря

Редактировать

Вот снимок того, что я хочу.

Answer 1

Ах вы имеете в виду слияние клеток вместе ... Это было осуществлено с именовании «Colspan», то есть столбец Spanning. Вот example

Если это не дает вам то, что вы хотите, вы также можете использовать первую строку (верхнюю панель), чтобы отображать все, что вы хотите отобразить. Взгляните на это example, затем нажмите на значок лупы (увеличительное стекло) вверху справа, вы увидите, что верхняя панель отображается и настраивается для этой страницы. Если вы решите пойти с верхней панели, вы можете использовать его следующим образом (в основном взял из примера кода)

HTML код

<div id="inlineFilterPanel" style="display:none;background:#dddddd;padding:3px;color:black;"> 
    Show tasks with title including <input type="text" id="txtSearch2"> 
    and % at least &nbsp; 
    <div style="width:100px;display:inline-block;" id="pcSlider2"></div> 
</div> 

затем использовать ваше определение сетки

var options = { 
    editable: true, 
    ... 
    topPanelHeight: 25, 
    showTopPanel: true 
}; 

dataView = new Slick.Data.DataView({ inlineFilters: true }); 
grid = new Slick.Grid("#myGrid", dataView, columns, options); 

// move the filter panel defined in a hidden div into grid top panel 
$("#inlineFilterPanel") 
    .appendTo(grid.getTopPanel()) 
    .show(); 

Редактировать # 2
В качестве альтернативы, я также нашел эту вилку, в которой этот человек сделал действительно красивое colspan и rowspan. Это на самом деле, вероятно, лучше, чем все остальные ...
GerHobbelt Fork
Скачать код, а затем запустить пример с именем example-row-span-many-columns.html и увидеть первый и второй ряд, которые объединены ячейки заголовка