Treegrid

Treegrid

关注
发信
关注(28)粉丝(399)

jqGrid-＆GT;的TreeGrid不符合我的角度指导工作

本文介绍了jqGrid-＆GT;的TreeGrid不符合我的角度指导工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我使用的jqGrid与指令的angularJS。
例如，我使用的是从这个code jqgrid从服务器负载JSON DATAS成的TreeGrid不

显示DATAS

这是指令：

  .directive（'ngJqGrid'，函数（）{
    返回{
        限制：'E'，
        范围： {
            配置：'='，
            数据：=，
        }，
        链接：功能（范围，元素，ATTRS）{
            VAR表;            范围。$腕表（'配置'，函数（newValue）以{
                element.children（）空（）。
                表= angular.element（'＆LT;表＆gt;＆LT; /表＆gt;'）;
                element.append（表）;
                $（表）.jqGrid（为newValue）;
            }）;            范围。$表（数据，功能（为newValue，属性oldValue）{
                VAR我;
                为（ⅰ= oldValue.length  -  1; I＆GT; = 0;我 - ）{
                    $（表）.jqGrid（'delRowData'，i）的;
                }
                对于（i = 0; I＆LT; newValue.length;我++）{
                    $（表）.jqGrid（'addRowData'，我为newValue [I]）;
                }
            }）;
        }
    };
}）;

这是从角控制器code：

  $ scope.data = {};
            $ http.get（家/ GetDataJson'）。成功（功能（数据，状态，头，配置）{
                $ scope.config = {
                    数据类型：JSON
                    colNames：['身份证'，'prestations']，
                    colModel：
                        {名称：'身份证'，宽度：100，重点：真正}，
                        {名称：'名'，宽度：785，排序：假}
                    ]
                    sortname：'ID'，
                    排序顺序：ASC
                    TreeGrid的：真实，
                    treeGridModel：邻居
                    ExpandColumn：'名'，
                    ExpandColClick：真实，
                    jsonReader：{repeatitems：假的，根：函数（OBJ）{返回OBJ; }}，
                    高度：自动
                }                $ scope.data =数据;
            }）;

这是JSON数据：

  [
    {
        ID：1
        名：ECHANGEUR
        级别：0，
        父母：空，
        传递isLeaf：假的，
        三品：假的，
        装：真
    }，
    {
        ID：1_1
        名：干预阿列尔河畔网站，
        1级，
        父：1，
        传递isLeaf：假的，
        三品：假的，
        装：真
    }，
    {
        ID：1_1_1
        名：日期等HEURE D'Arrivée酒店河畔乐遗址，
        级别：2，
        父母：1_1
        传递isLeaf：真实，
        三品：真实，
        装：真
    }，
    {
        ID：1_1_2
        名：承销DE L'échangeur
        级别：2，
        父母：1_1
        传递isLeaf：真实，
        三品：真实，
        装：真
    }
]

电网是出现，但TreeGrid的功能不起作用。而不是所有行被扩展，所以我们可以认为比它刚格，但不是的TreeGrid。
可能在指令中的问题。
请帮帮我！
谢谢！

要看到我的问题，请打开此链接
和替换2个文件的HTML和JavaScript
JS：

  VAR对myApp = angular.module（'对myApp'，[]）;myApp.directive（'ngJqGrid'，函数（）{
  返回{
    限制：'E'，
    范围： {
      配置：'='，
      数据：=，
    }，
    链接：功能（范围，元素，ATTRS）{
      VAR表;      范围。$腕表（'配置'，函数（newValue）以{
        element.children（）空（）。
        表= angular.element（'＆LT;表＆gt;＆LT; /表＆gt;'）;
        element.append（表）;
        $（表）.jqGrid（为newValue）;
      }）;      范围。$表（数据，功能（为newValue，属性oldValue）{
        VAR我;
        为（ⅰ= oldValue.length  -  1; I＆GT; = 0;我 - ）{
          $（表）.jqGrid（'delRowData'，i）的;
        }
        对于（i = 0; I＆LT; newValue.length;我++）{
          $（表）.jqGrid（'addRowData'，我为newValue [I]）;
        }
      }）;
    }
  };
}）;myApp.controller（'myController的'，函数（$范围）{  $ scope.config = {
    数据类型：本地，
    colNames：['身份证'，'prestations']，
    colModel：[{
      名称：'ID'，
      宽度：100，
      关键：真
    }，{
      名称：'名'，
      宽度：785，
      排序：假的
    }]，
    sortname：'ID'，
    排序顺序：ASC
    TreeGrid的：真实，
    treeGridModel：邻居
    ExpandColumn：'名'，
    ExpandColClick：真实，
    jsonReader：{
      repeatitems：假的，
      根：函数（OBJ）{
        返回OBJ;
      }
    }，
    高度：自动
  }  $ scope.data = [{
    ID：1
    名：ECHANGEUR
    级别：0，
    父母：空，
    传递isLeaf：假的，
    三品：假的，
    装：真
  }，{
    ID：1_1
    名：干预阿列尔河畔网站，
    1级，
    父：1，
    传递isLeaf：假的，
    三品：假的，
    装：真
  }，{
    ID：1_1_1
    名：日期等HEURE D'Arrivée酒店河畔乐遗址，
    级别：2，
    父母：1_1
    传递isLeaf：真实，
    三品：真实，
    装：真
  }，{
    ID：1_1_2
    名：承销DE L'échangeur
    级别：2，
    父母：1_1
    传递isLeaf：真实，
    三品：真实，
    装：真
  }];
}）;

HTML 

 ＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML和GT;  ＆LT; HEAD＆GT;
    ＆所述;脚本数据需要=的jquery @ *数据semver =2.0.3SRC =HTTP：//$c$c.jquery.com/jquery-2.0.3.min.js＆GT;＆下; / SCRIPT＆GT;
    ＆LT;链路数据需要=的jqGrid @ *数据semver =4.5.2的rel =stylesheet属性HREF =// cdn.jsdelivr.net/jqgrid/4.5.2/css/ui.jqgrid.css /＆GT;
    ＆所述;脚本数据需要=的jqGrid @ *数据semver =4.5.2SRC =// cdn.jsdelivr.net/jqgrid/4.5.2/jquery.jqGrid.js\"></script> ;
    ＆所述;脚本数据需要=angular.js@*数据semver =1.2.0-RC3-nonminSRC =HTTP：//$c$c.angularjs.org/1.2.0-rc.3 /angular.js\"></script>    ＆LT;链接rel =stylesheet属性HREF =style.css文件/＆GT;
    ＆所述; SCRIPT SRC =的script.js＆GT;＆下; /脚本＆GT;
  ＆LT; /头＆GT;  ＆LT;机身NG-应用=对myAppNG控制器=myController的＆GT;
    ＆LT; NG-JQ-电网配置=配置数据=数据＆GT;＆LT; / NG-JQ-格＆GT;
  ＆LT; /身体GT;＆LT; / HTML＆GT;

对不起，我的小经验:)
谢谢！


解决方案

 范围。$表（数据，功能（为newValue，属性oldValue）{
                表[0] .addJSONData（{
                    行：为newValue
                }）;            }）;

I'm using JqGrid with directive for angularJS. for example, I'm using code from this jqgrid loading json datas from server into treegrid doesn't display datas

this is directive:

.directive('ngJqGrid', function () {
    return {
        restrict: 'E',
        scope: {
            config: '=',
            data: '=',
        },
        link: function (scope, element, attrs) {
            var table;

            scope.$watch('config', function (newValue) {
                element.children().empty();
                table = angular.element('<table></table>');
                element.append(table);
                $(table).jqGrid(newValue);
            });

            scope.$watch('data', function (newValue, oldValue) {
                var i;
                for (i = oldValue.length - 1; i >= 0; i--) {
                    $(table).jqGrid('delRowData', i);
                }
                for (i = 0; i < newValue.length; i++) {
                    $(table).jqGrid('addRowData', i, newValue[i]);
                }
            });
        }
    };
});

And this is code from angular controller:

$scope.data = {};
            $http.get('home/GetDataJson').success(function (data, status, headers, config) {
                $scope.config = {
                    datatype: "json",
                    colNames: ['id', 'Prestations'],
                    colModel: [
                        { name: 'id', width: 100, key: true },
                        { name: 'name', width: 785, sortable: false }
                    ],
                    sortname: 'id',
                    sortorder: "asc",
                    treeGrid: true,
                    treeGridModel: "adjacency",
                    ExpandColumn: 'name',
                    ExpandColClick: true,
                    jsonReader: { repeatitems: false, root: function (obj) { return obj; } },
                    height: "auto"
                }

                $scope.data = data;
            });

This is JSON data:

[
    {
        "id": "1",
        "name": "ECHANGEUR",
        "level": "0",
        "parent": "null",
        "isLeaf": false,
        "expanded": false,
        "loaded": true
    },
    {
        "id": "1_1",
        "name": "Intervention Aller sur Site",
        "level": "1",
        "parent": "1",
        "isLeaf": false,
        "expanded": false,
        "loaded": true
    },
    {
        "id": "1_1_1",
        "name": "Date et heure d'arrivée sur le site",
        "level": "2",
        "parent": "1_1",
        "isLeaf": true,
        "expanded": true,
        "loaded": true
    },
    {
        "id": "1_1_2",
        "name": "Consignation de l'échangeur",
        "level": "2",
        "parent": "1_1",
        "isLeaf": true,
        "expanded": true,
        "loaded": true
    }
]

Grid is appears, but treeGrid feature doesn't work. Instead of all rows are expanded, so we can think than it just grid, but not treeGrid. May be problem in directive. Please help me!Thank you!

To see my problem please open this link http://plnkr.co/edit/50dagqDV2hWE2UxG9Zjo?p=previewand replace 2 files HTML and JavaScriptJS:

var myApp = angular.module('myApp', []);

myApp.directive('ngJqGrid', function() {
  return {
    restrict: 'E',
    scope: {
      config: '=',
      data: '=',
    },
    link: function(scope, element, attrs) {
      var table;

      scope.$watch('config', function(newValue) {
        element.children().empty();
        table = angular.element('<table></table>');
        element.append(table);
        $(table).jqGrid(newValue);
      });

      scope.$watch('data', function(newValue, oldValue) {
        var i;
        for (i = oldValue.length - 1; i >= 0; i--) {
          $(table).jqGrid('delRowData', i);
        }
        for (i = 0; i < newValue.length; i++) {
          $(table).jqGrid('addRowData', i, newValue[i]);
        }
      });
    }
  };
});

myApp.controller('MyController', function($scope) {

  $scope.config = {
    datatype: "local",
    colNames: ['id', 'Prestations'],
    colModel: [{
      name: 'id',
      width: 100,
      key: true
    }, {
      name: 'name',
      width: 785,
      sortable: false
    }],
    sortname: 'id',
    sortorder: "asc",
    treeGrid: true,
    treeGridModel: "adjacency",
    ExpandColumn: 'name',
    ExpandColClick: true,
    jsonReader: {
      repeatitems: false,
      root: function(obj) {
        return obj;
      }
    },
    height: "auto"
  }

  $scope.data = [{
    "id": "1",
    "name": "ECHANGEUR",
    "level": "0",
    "parent": "null",
    "isLeaf": false,
    "expanded": false,
    "loaded": true
  }, {
    "id": "1_1",
    "name": "Intervention Aller sur Site",
    "level": "1",
    "parent": "1",
    "isLeaf": false,
    "expanded": false,
    "loaded": true
  }, {
    "id": "1_1_1",
    "name": "Date et heure d'arrivée sur le site",
    "level": "2",
    "parent": "1_1",
    "isLeaf": true,
    "expanded": true,
    "loaded": true
  }, {
    "id": "1_1_2",
    "name": "Consignation de l'échangeur",
    "level": "2",
    "parent": "1_1",
    "isLeaf": true,
    "expanded": true,
    "loaded": true
  }];
});

HTML:

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <link data-require="jqgrid@*" data-semver="4.5.2" rel="stylesheet" href="//cdn.jsdelivr.net/jqgrid/4.5.2/css/ui.jqgrid.css" />
    <script data-require="jqgrid@*" data-semver="4.5.2" src="//cdn.jsdelivr.net/jqgrid/4.5.2/jquery.jqGrid.js"></script>
    <script data-require="angular.js@*" data-semver="1.2.0-rc3-nonmin" src="http://code.angularjs.org/1.2.0-rc.3/angular.js"></script>

    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="myApp" ng-controller="MyController">
    <ng-jq-grid config="config" data="data"></ng-jq-grid>
  </body>

</html>

Sorry for my small experience :) Thank you!

解决方案 
scope.$watch('data', function (newValue, oldValue) {
                table[0].addJSONData({
                    rows: newValue
                });

            });

这篇关于jqGrid-＆GT;的TreeGrid不符合我的角度指导工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

10-28 23:14
Powered by LMLPHP ©2024 Treegrid 0.005122