Print Page - TreeGrid Merge / Span Columns

Title: TreeGrid Merge / Span Columns
Post by: pjobbins on April 30, 2018, 09:35:05 PM

Is it possible to to have a cell span columns in the TreeGrid? e.g. the long folder name in the screenshot attached.

NB I tried adapting the process described for DataGrid cell merging cells here: https://www.jeasyui.com/tutorial/datagrid/datagrid13.php

e.g. ... onLoadSuccess: function (row, data) {$('#tt').treegrid('mergeCells', { index: 2, field: 'name', colspan: 3 }); }

But no joy.

Title: Re: TreeGrid Merge / Span Columns
Post by: jarry on May 01, 2018, 06:40:14 PM

The better way to display a long folder title is to attach a css class on the folder rows, define some css styles to let the title override the cells.

Code:

<style type="text/css">
	.trow .datagrid-cell{
		overflow: visible;
	}
	.trow td:not(:last-child){
		border-right-color: transparent;
	}
</style>
$('#tg').treegrid({
	columns: [[
		{field:'name',title:'Name',width:200},
		{field:'size',title:'Size',width:100},
		{field:'date',title:'Date',width:150}
	]],
	data: data,
	idField: 'id',
	treeField: 'name',
	rowStyler: function(row){
		if (row.children && row.children.length){
			return {class:'trow'}
		}
	}
})

For more information please look at this live example http://code.reloado.com/upuwoq3/edit#preview

Title: Re: TreeGrid Merge / Span Columns
Post by: pjobbins on May 02, 2018, 08:06:56 PM

Thanks jarry. That works well until the text is longer as it doesn't wrap - see attached :(

I've been looking at manipulating the DOM after load with some success; I add a known css class to the elements I want to span, then after load look for that class and perform the manipulation:

Code:

...
function colspanFormatter(cssClass, cols) {
    $('.' + cssClass).closest('tr').each(function() {
        for (var c = cols - 1; c > 0; c--) {
            $(this).children('td').eq(c).remove();
        }
        $(this).children('td').eq(0).attr('colspan', cols.toString());
        $(this).children('td').eq(0).children(0).width('100%');
        $(this).removeClass(cssClass);
    });
};
...
$(function(){
    ...
    onLoadSuccess: function (row, data) { colspanFormatter('colspan3', 3); }
...

see demo: http://code.reloado.com/efobob4/edit#preview (http://code.reloado.com/efobob4/edit#preview)

This wraps nicely :)
But doesn't align very well on at the left :(

Title: Re: TreeGrid Merge / Span Columns
Post by: stworthy on May 02, 2018, 11:27:20 PM

This example works well.
http://code.reloado.com/upuwoq3/2/edit

Title: Re: TreeGrid Merge / Span Columns
Post by: pjobbins on May 03, 2018, 07:25:52 PM

That works perfectly stworthy, thank you :)

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: pjobbins on April 30, 2018, 09:35:05 PM