EasyUI Forum
March 28, 2024, 05:16:31 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1] 2
  Print  
Author Topic: XML data for TreeGrid  (Read 33348 times)
zolotoy
Jr. Member
**
Posts: 89


View Profile Email
« on: June 24, 2015, 11:08:02 AM »

Can I load an xml into tree/treegrid control?

Thanks
Logged
jarry
Administrator
Hero Member
*****
Posts: 2260


View Profile Email
« Reply #1 on: June 24, 2015, 07:04:48 PM »

Please use the 'loadFilter' function to change the XML data to the standard data format.
Code:
$('#tg').treegrid({
  loadFilter: function(data,parentId){
    var data = ...;  // convert to the standard data format
    return data;
  }
});
Logged
zolotoy
Jr. Member
**
Posts: 89


View Profile Email
« Reply #2 on: June 25, 2015, 01:26:42 AM »

So, xml needs to be changed to json, right? Do you have any built-in functions to accomplish that? For example, I have the attached xml structure. But I have to write a filter function to convert it to json in order to show in the grid? Do you have any samples or at least some guidelines of creating such functions that would deal with different xml structures?

Thanks
Logged
jarry
Administrator
Hero Member
*****
Posts: 2260


View Profile Email
« Reply #3 on: June 25, 2015, 05:39:20 PM »

Please refer to the code below:
Code:
$('#tg').treegrid({
url: 'test3.xml',
method: 'get',
idField: 'id',
treeField: 'name',
loader: function(param, success, error){
var opts = $(this).treegrid('options');
if (!opts.url) return false;
$.ajax({
type: opts.method,
url: opts.url,
data: param,
dataType: 'xml',
success: function(data){
var rows = [];
$(data).find('assets').each(function(){
rows.push({
id: $(this).attr('ID'),
name: $(this).attr('name'),
_parentId: $(this).attr('parentID')
});
})
success({total:rows.length,rows:rows});
},
error: function(){
error.apply(this, arguments);
}
});
}
});
Logged
zolotoy
Jr. Member
**
Posts: 89


View Profile Email
« Reply #4 on: June 25, 2015, 06:35:19 PM »

I am using Angular.
Can it be as simple as this in some directive?
$('#tg').treegrid({
   url: $scope.data,
        loader: function(data){
            var rows = [];
            $(data).find('assets').each(function(){
               rows.push({
                  id: $(this).attr('ID'),
                  name: $(this).attr('name'),
                  _parentId: $(this).attr('parentID')
               });
            })
            success({total:rows.length,rows:rows});

Something like this?
Logged
jarry
Administrator
Hero Member
*****
Posts: 2260


View Profile Email
« Reply #5 on: June 26, 2015, 01:31:35 AM »

If you already have the '$scope.data', you can convert it to the json format before loading to the treegrid.
Code:
<script type="text/javascript">
function MyController($scope){
var data = '<root><assets ID="1" name="All Assets"><assets ID="104" parentID="1" name="EXAMPLE COMPANY"/><assets ID="109" parentID="104" name="CHICAGO"/></assets></root>';
var xml = $.parseXML(data);
var rows = [];
$(xml).find('assets').each(function(){
rows.push({
id: $(this).attr('ID'),
name: $(this).attr('name'),
_parentId: $(this).attr('parentID')
});
});
$scope.data = {total:rows.length,rows:rows};
}
</script>
<div ng-controller="MyController">
<table id="tg" class="easyui-treegrid" title="Folder Browser" style="width:700px;height:250px"
data-options="
data: {{data}},
idField: 'id',
treeField: 'name'
">
<thead>
<tr>
<th data-options="field:'name'" width="220">Name</th>
</tr>
</thead>
</table>
</div>
Logged
zolotoy
Jr. Member
**
Posts: 89


View Profile Email
« Reply #6 on: June 26, 2015, 01:40:00 AM »

I am not sure where in your code you are converting xml into json.
Logged
zolotoy
Jr. Member
**
Posts: 89


View Profile Email
« Reply #7 on: June 27, 2015, 02:26:01 AM »

Still cannot get it to work.
Here is my code:
markup:
Code:
<div>
        <table id="tg" class="easyui-treegrid" title="Folder Browser" style="width:700px;height:250px"
               data-options="data {{data}} , idfield 'id', treefield 'name'">
            <thead>
                <tr>
                    <th data-options=" field:'name'" width="220">Name</th>
                </tr>
            </thead>
        </table>
    </div>
Controller:
Code:
var data = '<root><assets ID="1" name="All Assets"><assets ID="104" parentID="1" name="EXAMPLE COMPANY"/><assets ID="109" parentID="104" name="CHICAGO"/></assets></root>';
    var xml = $.parseXML(data);
    var rows = [];
    $(xml).find('assets').each(function () {
        rows.push({
            id: $(this).attr('ID'),
            name: $(this).attr('name'),
            _parentId: $(this).attr('parentID')
        });
    });
    $scope.data = { total: rows.length, rows: rows };

The data is Ok but the table looks as attached. No data, header is in the middle. Please help.

Thanks
Logged
zolotoy
Jr. Member
**
Posts: 89


View Profile Email
« Reply #8 on: June 27, 2015, 02:39:04 AM »

I am also using your example with data from a json file inside of my Angular application and getting same results. No data is shown, headers are in the middle of the table.
I really need that to resolve before I can move on the next evaluation step.

Thanks
Logged
zolotoy
Jr. Member
**
Posts: 89


View Profile Email
« Reply #9 on: June 27, 2015, 03:08:12 AM »

BTW, in Chrome the table looks correctly, but no data. How there can be any difference between browsers?
Logged
zolotoy
Jr. Member
**
Posts: 89


View Profile Email
« Reply #10 on: June 27, 2015, 03:25:19 AM »

Last test. If I run my page (actually your example) directly in Chrome from within my web it works fine, but running inside of Angular produces the above results.
Logged
jarry
Administrator
Hero Member
*****
Posts: 2260


View Profile Email
« Reply #11 on: June 28, 2015, 04:57:24 PM »

Please refer to http://jsfiddle.net/x270Lh7c/
Logged
zolotoy
Jr. Member
**
Posts: 89


View Profile Email
« Reply #12 on: June 28, 2015, 06:23:28 PM »

In reality we do not run html templates with a controller being specified. I am using modules to link templates and their controllers.
Something like this:
Code:
charts = angular.module('prism.charts', []);
charts.config(
function ($stateProvider,   $urlRouterProvider) {
      $stateProvider
        .state('body.charts', {
          url: 'charts',
          templateUrl: 'views/formandtable.html',
          controller: 'MyController'
        })
});
I cannot get any results.
Logged
zolotoy
Jr. Member
**
Posts: 89


View Profile Email
« Reply #13 on: June 30, 2015, 02:32:24 AM »

Here are my results.
It does not work with Angular 1.3.15, or anything above 1.2.1, did  not try.
When a sample is run using Angular states and controllers, another words, controller is not in the sample, it does not work. No data.

I like the product, but without running it in Angular environment, I cannot use it.
Logged
jarry
Administrator
Hero Member
*****
Posts: 2260


View Profile Email
« Reply #14 on: July 01, 2015, 01:03:15 AM »

You can custom a directive and set the treegrid data to ng-model. Please refer to this code.
Code:
<script>
var charts = angular.module('charts', []);
charts.directive('easyuiTreegrid', function(){
return {
restrict: 'AE',
require:'ngModel',
link: function(scope, elem, attrs, ngModel){
$(elem).treegrid();
ngModel.$render = function(value){
$(elem).treegrid('loadData', ngModel.$viewValue);
}
}
}
});
</script>
<table id="tg" easyui-treegrid ng-model="data" title="Folder Browser" style="width:700px;height:250px"
data-options="
idField: 'id',
treeField: 'name'
">
<thead>
<tr>
<th data-options="field:'name'" width="220">Name</th>
</tr>
</thead>
</table>

The example is available from http://jsfiddle.net/4qsbzk11/
Logged
Pages: [1] 2
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!