Print Page - treegrid lines:true

Title: treegrid lines:true
Post by: jokersoft on November 29, 2013, 12:38:19 AM

How can I set lines:true in the treegrid?

Yes, I understand, the difference between ul and table structure. And I failed to organize "lines style" in table with simple css.
But for some design solutions I still would really appreciate to have those "lines" in my treegrid.
Thanks in advance!

Title: Re: treegrid lines:true
Post by: stworthy on November 29, 2013, 01:29:14 AM

The 'lines' property is not supported in treegrid.

Title: Re: treegrid lines:true
Post by: jokersoft on November 29, 2013, 06:33:28 AM

Yes, I noticed. And that is why I ask.
So, will it be?
Or is there another solution?

Title: Re: treegrid lines:true
Post by: stworthy on November 29, 2013, 06:51:03 AM

This requirement has been sent to our development team. Once it has been solved, we will publish the 'lines' solution and reply to this topic.

Title: Re: treegrid lines:true
Post by: prashant on July 15, 2014, 03:57:32 AM

Quote from: stworthy on November 29, 2013, 06:51:03 AM

This requirement has been sent to our development team. Once it has been solved, we will publish the 'lines' solution and reply to this topic.

Any Update on this? I need tree lines in Treegrid like http://dhtmlx.com/docs/products/dhtmlxTreeGrid/samples/03_nodes_rows_manipulations/05_treeGrid_lines.html

Title: Re: treegrid lines:true
Post by: stworthy on July 17, 2014, 02:51:37 AM

The 'lines' property will be supported in next version. You can extend a new method 'showLines' to achieve this functionality. The 'showLines' method will also be added into next version.

Code:

$.extend($.fn.treegrid.methods,{
	showLines:function(jq){
		return jq.each(function(){
			var target = this;
			var t = $(target);
			var opts = t.treegrid('options');
			if (opts.lines){
				t.treegrid('getPanel').addClass('tree-lines');		
			} else {
				t.treegrid('getPanel').removeClass('tree-lines');		
				return;
			}
			
			t.treegrid('getPanel').find('span.tree-indent').removeClass('tree-line tree-join tree-joinbottom');
			t.treegrid('getPanel').find('div.datagrid-cell').removeClass('tree-node-last tree-root-first tree-root-one');

			var roots = t.treegrid('getRoots');
			if (roots.length > 1){
				_getCell(roots[0]).addClass('tree-root-first');
			} else if (roots.length == 1){
				_getCell(roots[0]).addClass('tree-root-one');
			}
			_join(roots);
			_line(roots);

			function _join(nodes){
				$.map(nodes, function(node){
					if (node.children && node.children.length){
						_join(node.children);
					} else {
						var cell = _getCell(node);
						cell.find('.tree-icon').prev().addClass('tree-join');
					}
				});
				var cell = _getCell(nodes[nodes.length-1]);
				cell.addClass('tree-node-last');
				cell.find('.tree-join').removeClass('tree-join').addClass('tree-joinbottom');
			}
			function _line(nodes){
				$.map(nodes, function(node){
					if (node.children && node.children.length){
						_line(node.children);
					}
				});
				for(var i=0; i<nodes.length-1; i++){
					var node = nodes[i];
					var level = t.treegrid('getLevel', node[opts.idField]);
					var tr = opts.finder.getTr(target, node[opts.idField]);
					var cc = tr.next().find('tr.datagrid-row td[field="' + opts.treeField + '"] div.datagrid-cell');
					cc.find('span:eq('+(level-1)+')').addClass('tree-line');
				}
			}
			function _getCell(node){
				var tr = opts.finder.getTr(target, node[opts.idField]);
				var cell = tr.find('td[field="'+opts.treeField+'"] div.datagrid-cell');
				return cell;
			}
		})
	}
})

Usage example:

Code:

$('#tg').treegrid({lines:true}).treegrid('showLines');

Title: Re: treegrid lines:true
Post by: prashant on July 23, 2014, 03:01:39 AM

I am having more than 3000 records.
I have placed this extension in jquery.easyui.min.js. But now browser window showing unresponsive script error.

Title: Re: treegrid lines:true
Post by: prashant on July 23, 2014, 06:13:47 AM

In Lazy loading 'showLines' not working. (method: 'get', loadFilter: myLoadFilter)

Title: Re: treegrid lines:true
Post by: stworthy on July 23, 2014, 08:46:48 AM

Please refer to this example http://jsfiddle.net/QG2xc/. It works fine.

Title: Re: treegrid lines:true
Post by: JohnWang on August 12, 2014, 02:39:50 AM

Quote from: stworthy on July 17, 2014, 02:51:37 AM

The 'lines' property will be supported in next version. You can extend a new method 'showLines' to achieve this functionality. The 'showLines' method will also be added into next version.

Code:

$.extend($.fn.treegrid.methods,{
	showLines:function(jq){
		return jq.each(function(){
			var target = this;
			var t = $(target);
			var opts = t.treegrid('options');
			if (opts.lines){
				t.treegrid('getPanel').addClass('tree-lines');		
			} else {
				t.treegrid('getPanel').removeClass('tree-lines');		
				return;
			}
			
			t.treegrid('getPanel').find('span.tree-indent').removeClass('tree-line tree-join tree-joinbottom');
			t.treegrid('getPanel').find('div.datagrid-cell').removeClass('tree-node-last tree-root-first tree-root-one');

			var roots = t.treegrid('getRoots');
			if (roots.length > 1){
				_getCell(roots[0]).addClass('tree-root-first');
			} else if (roots.length == 1){
				_getCell(roots[0]).addClass('tree-root-one');
			}
			_join(roots);
			_line(roots);

			function _join(nodes){
				$.map(nodes, function(node){
					if (node.children && node.children.length){
						_join(node.children);
					} else {
						var cell = _getCell(node);
						cell.find('.tree-icon').prev().addClass('tree-join');
					}
				});
				var cell = _getCell(nodes[nodes.length-1]);
				cell.addClass('tree-node-last');
				cell.find('.tree-join').removeClass('tree-join').addClass('tree-joinbottom');
			}
			function _line(nodes){
				$.map(nodes, function(node){
					if (node.children && node.children.length){
						_line(node.children);
					}
				});
				for(var i=0; i<nodes.length-1; i++){
					var node = nodes[i];
					var level = t.treegrid('getLevel', node[opts.idField]);
					var tr = opts.finder.getTr(target, node[opts.idField]);
					var cc = tr.next().find('tr.datagrid-row td[field="' + opts.treeField + '"] div.datagrid-cell');
					cc.find('span:eq('+(level-1)+')').addClass('tree-line');
				}
			}
			function _getCell(node){
				var tr = opts.finder.getTr(target, node[opts.idField]);
				var cell = tr.find('td[field="'+opts.treeField+'"] div.datagrid-cell');
				return cell;
			}
		})
	}
})

Usage example:

Code:

$('#tg').treegrid({lines:true}).treegrid('showLines');

I tried to extend the new method 'showLines' that you've mentioned above. But error occured!

TypeError: node is undefined[在此错误处中断]
var tr = opts.finder.getTr(target, node[opts.idField]);

And I used js-create treegrid way, not html way. FYI:

$('#resourceTree').treegrid({
           url:'resource.do?method=getDynamicTreegridData',
           method: 'get',
           columns:[[
           {field:'name', title:'name', width:190,editor:'text'}

           ]],
           lines:true,
           showHeader:false,
           onClickRow: onClickTreeRow,
           border:false,
           idField: 'id',
               treeField: 'name'
         });
$('#resourceTree').treegrid({lines: true}).treegrid('showLines');

Title: Re: treegrid lines:true
Post by: stworthy on August 12, 2014, 05:50:10 AM

The 'lines' property has been supported since version 1.4. Please try this example http://www.jeasyui.com/demo/main/index.php?plugin=TreeGrid&theme=default&dir=ltr&pitem=TreeGrid%20Lines

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: jokersoft on November 29, 2013, 12:38:19 AM