Title: TreeGrid from Table
Post by: ClSoft on January 08, 2013, 02:42:43 PM
Hi all I saw this example: http://www.jeasyui.com/demo/datagrid/transform.html (datagrid from table) I wonder is that possible for TreeGrid? This is what I try, but it does not work: <body>
<table class="easyui-treegrid" style="width:750px;height:500px" idField="id" treeField="name1" >
<thead>
<tr>
<th field="id" width="50">id</th>
<th field="name1" width="50">Size</th>
<th field="name2" width="50">Modified Date</th>
<th field="name3" width="50">Name</th>
<th field="name4" width="50">Size</th>
<th field="name5" width="50">Modified Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
<tr>
<td>2</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
</tbody>
</table>
</body>
Thanks for your answer(s).
Title: Re: TreeGrid from Table
Post by: ClSoft on January 09, 2013, 12:36:42 PM
Anybody? Please?
Title: Re: TreeGrid from Table
Post by: stworthy on January 09, 2013, 07:17:54 PM
A solution to solve this issue is to extend the view object to support this feature. (function($){
var oldOnBeforeRender = $.fn.treegrid.defaults.view.onBeforeRender;
window.tview = $.extend($.fn.treegrid.defaults.view, {
onBeforeRender: function(target, parentId, data){
if ($.isArray(parentId)){
data = {total:parentId.length,rows:parentId};
oldOnBeforeRender.call(this, target, null, data);
} else {
oldOnBeforeRender.call(this, target, parentId, data);
}
}
});
})(jQuery);
Apply the 'tview' to treegrid component. <table class="easyui-treegrid" style="width:750px;height:500px"
data-options="
idField: 'id',
treeField: 'name3',
view: tview
">
<thead>
<tr>
<th field="id" width="50">id</th>
<th field="_parentId" width="50">pid</th>
<th field="name1" width="50">Size</th>
<th field="name2" width="50">Modified Date</th>
<th field="name3" width="150">Name</th>
<th field="name4" width="50">Size</th>
<th field="name5" width="50">Modified Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td></td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
<tr>
<td>2</td>
<td>1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
</tbody>
</table>
Title: Re: TreeGrid from Table
Post by: ClSoft on January 10, 2013, 08:04:51 AM
That look's great - thanks a lot!
What do you mean - will that display data faster as using json file?
I can create json file on disk and display them, or I can create such html and run them. I can not use php to display data.
Thanks.
Title: Re: TreeGrid from Table
Post by: ClSoft on January 16, 2013, 02:24:20 PM
Hi
is it possible to assign a icon to each node?
thanks!
Title: Re: TreeGrid from Table
Post by: ClSoft on January 21, 2013, 01:05:04 PM
Please?
Title: Re: TreeGrid from Table
Post by: stworthy on January 22, 2013, 12:36:16 AM
To enable the treegrid parsing 'iconCls' property from each <tr> element, you need to override the treegrid view. (function($){
var oldOnBeforeRender = $.fn.treegrid.defaults.view.onBeforeRender;
window.tview = $.extend($.fn.treegrid.defaults.view, {
onBeforeRender: function(target, parentId, data){
if ($.isArray(parentId)){
data = parseGridData(target);
oldOnBeforeRender.call(this, target, null, data);
} else {
oldOnBeforeRender.call(this, target, parentId, data);
}
}
});
function parseGridData(target){
var data = {
total:0,
rows:[]
};
var fields = $(target).datagrid('getColumnFields',true).concat($(target).datagrid('getColumnFields',false));
$(target).find('tbody tr').each(function(){
data.total++;
var row = {};
$.extend(row, $.parser.parseOptions(this,['iconCls','state']));
for(var i=0; i<fields.length; i++){
var field = fields[i];
var td = $(this).find('td:eq('+i+')');
row[field] = td.html();
}
data.rows.push(row);
});
return data;
}
})(jQuery);
<table class="easyui-treegrid" style="width:750px;height:500px"
data-options="
idField: 'id',
treeField: 'name3',
view: tview
">
<thead>
<tr>
<th field="id" width="50">id</th>
<th field="_parentId" width="50">pid</th>
<th field="name1" width="50">Size</th>
<th field="name2" width="50">Modified Date</th>
<th field="name3" width="150">Name</th>
<th field="name4" width="50">Size</th>
<th field="name5" width="50">Modified Date</th>
</tr>
</thead>
<tbody>
<tr data-options="iconCls:'icon-ok'">
<td>1</td>
<td></td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
<tr>
<td>2</td>
<td>1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
</tbody>
</table>
Title: Re: TreeGrid from Table
Post by: ClSoft on January 22, 2013, 04:05:39 AM
Thanks a lot, you are the master! ;D
|