treegrid lines:true

[jokersoft]

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!

[stworthy]

The 'lines' property is not supported in treegrid.

[jokersoft]

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

[stworthy]

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.

[prashant]

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

[stworthy]

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');

[prashant]

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.

[prashant]

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

[stworthy]

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

[JohnWang]

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');

[stworthy]

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