Webix + angularjs来自控制器的数据表

时间:2016-11-10 13:26:09

标签: angularjs webix

我遇到了问题,因为数据表是空的,数据没有绑定。

HTML:

<div id="usersFormDiv" ng-controller="adminController">
     <div webix-ui="usersGrid"></div>
</div>

控制器

$scope.usersGrid ={
    view:"datatable",
    id:"usersGridWebix",
    autoConfig:true,
    select:"row",
    data : [
        { id:1,"lp":1, "name":1994,"surname":678790,"email":"xxx@xp.pl","organ":"ogran","location":"Lokalizacja 1, Lokalizacja 2"}
    ],
    columns:[
        { header:"Lp", id:"lp", width:50},
        { header:"Imię", id:"name", width:50},
        { header:"Nazwisko", id:"surname", width:100},
        { header:"Email", id:"email", width:150},
        { header:"Organ", id:"organ", width:100},
        { header:"Lokalizacja", id:"location", width:150}
    ]
   // url: "./app/model/users.json"

};

2 个答案:

答案 0 :(得分:1)

使用webix-data =“data”中的webix-ui属性

也放了 $ scope.data = {id:1,“lp”:1,“name”:1994,“surname”:678790,“email”:“xxx@xp.pl”,“organ”:“ogran”,“location” “:”Lokalizacja 1,Lokalizacja 2“}

我有同样的问题,我用这种方式修复,更多细节参考: -

http://docs.webix.com/desktop__angular.html

答案 1 :(得分:0)

您也可以在html或控制器内定义数据表结构。

if (window.angular)

  (function() {

    function id_helper($element) {
      //we need uniq id as reference
      var id = $element.attr("id");
      if (!id) {
        id = webix.uid();
        $element.attr("id", id);
      }
      return id;
    }

    function locate_view_id($element) {
      if (typeof $element.attr("webix-ui") != "undefined")
        return $element.attr("id");
      return locate_view_id($element.parent());
    }




    //creates webix ui components
    angular.module("webix", [])
      .directive('webixUi', ["$parse", function($parse) {
        return {
          restrict: 'A',
          scope: false,
          link: function($scope, $element, $attrs, $controller) {
            var dataname = $attrs["webixUi"];
            var callback = $attrs["webixReady"];
            var watch = $attrs["webixWatch"];
            var wxRoot = null;
            var id = id_helper($element);

            $element.ready(function() {
              if (wxRoot) return;

              if (callback)
                callback = $parse(callback);

              //destruct components
              $element.bind('$destroy', function() {
                if (wxRoot && !wxRoot.$destructed && wxRoot.destructor)
                  wxRoot.destructor();
              });
              //ensure that ui is destroyed on scope destruction
              $scope.$on('$destroy', function() {
                if (wxRoot && !wxRoot.$destructed && wxRoot.destructor)
                  wxRoot.destructor();
              });

              //webix-ui attribute has some value - will try to use it as configuration
              if (dataname) {
                //configuration
                var watcher = function(data) {
                  if (wxRoot) wxRoot.destructor();
                  if ($scope[dataname]) {
                    var config = webix.copy($scope[dataname]);
                    config.$scope = $scope;
                    $element[0].innerHTML = "";
                    wxRoot = webix.ui(config, $element[0]);
                    if (callback)
                      callback($scope, {
                        root: wxRoot
                      });
                  }
                };
                if (watch !== "false")
                  $scope.$watch(dataname, watcher);
                watcher();
              } else {
                //if webix-ui is empty - init inner content as webix markup
                if (!$attrs["view"])
                  $element.attr("view", "rows");

                var ui = webix.markup;
                var tmp_a = ui.attribute;
                ui.attribute = "";
                //FIXME - memory leaking, need to detect the moment of dom element removing and destroy UI
                if (typeof $attrs["webixRefresh"] != "undefined")
                  wxRoot = ui.init($element[0], $element[0], $scope);
                else
                  wxRoot = ui.init($element[0], null, $scope);

                ui.attribute = tmp_a;

                if (callback)
                  callback($scope, {
                    root: wxRoot
                  });
              }

              //size of ui
              $scope.$watch(function() {
                return $element[0].offsetWidth + "." + $element[0].offsetHeight;
              }, function() {
                if (wxRoot) wxRoot.adjust();
              });

            });
          }
        };
      }])

      .directive('webixShow', ["$parse", function($parse) {
        return {
          restrict: 'A',
          scope: false,

          link: function($scope, $element, $attrs, $controller) {
            var attr = $parse($attrs["webixShow"]);
            var id = id_helper($element);

            if (!attr($scope))
              $element.attr("hidden", "true");

            $scope.$watch($attrs["webixShow"], function() {
              var view = webix.$$(id);
              if (view) {
                if (attr($scope)) {
                  webix.$$(id).show();
                  $element[0].removeAttribute("hidden");
                } else
                  webix.$$(id).hide();
              }
            });

          }
        };
      }])

      .directive('webixEvent', ["$parse", function($parse) {
        var wrap_helper = function($scope, view, eventobj) {
          var ev = eventobj.split("=");
          var action = $parse(ev[1]);
          var name = ev[0].trim();
          view.attachEvent(name, function() {
            return action($scope, {
              id: arguments[0],
              details: arguments
            });
          });
        };

        return {
          restrict: 'A',
          scope: false,

          link: function($scope, $element, $attrs, $controller) {
            var events = $attrs["webixEvent"].split(";");
            var id = id_helper($element);

            setTimeout(function() {
              var first = $element[0].firstChild;
              if (first && first.nodeType == 1)
                id = first.getAttribute("view_id") || id;

              var view = webix.$$(id);
              for (var i = 0; i < events.length; i++) {
                wrap_helper($scope, view, events[i]);
              }
            });

          }
        };
      }])

      .directive('webixElements', ["$parse", function($parse) {
        return {
          restrict: 'A',
          scope: false,

          link: function($scope, $element, $attrs, $controller) {

            var data = $attrs["webixElements"];
            var id = id_helper($element);

            if ($scope.$watchCollection)
              $scope.$watchCollection(data, function(collection) {
                setTimeout(function() {
                  var view = webix.$$(id);
                  if (view) {
                    view.define("elements", collection);
                    view.refresh();
                  }
                }, 1);
              });
          }

        };
      }])

      .directive('webixData', ["$parse", function($parse) {
        return {
          restrict: 'A',
          scope: false,

          link: function($scope, $element, $attrs, $controller) {

            var data = $attrs["webixData"];
            var id = id_helper($element);

            if ($scope.$watchCollection)
              $scope.$watchCollection(data, function(collection) {
                if (collection) {
                  setTimeout(function() {
                    loadData($element, id, collection, 0);
                  }, 1);
                }
              });
          }

        };
      }]);

    function loadData($element, id, collection, num) {
      if (num > 10) return;
      var first = $element[0].firstChild;
      if (first && first.nodeType == 1)
        id = first.getAttribute("view_id") || id;

      var view = webix.$$(id);
      if (view) {
        if (view.options_setter) {
          view.define("options", collection);
          view.refresh();
        } else {
          if (view.clearAll)
            view.clearAll();
          view.parse(collection);
        }
      } else {
        webix.delay(loadData, this, [$element, id, collection], 100, num + 1);
      }
    }

  })();
{
  "student": [ {
    "firstName": "Ajinkya", "lastName": "Chanshetty", "contact": 9960282703, "email": "aajinkya@hotmail.com"
  }
  ,
  {
    "firstName": "Sandip", "lastName": "Pal", "contact": 9960282703, "email": "sandip@hotmail.com"
  }
  ,
  {
    "firstName": "Neha", "lastName": "Sathawane", "contact": 99608882703, "email": "neha@hotmail.com"
  }
  ,
  {
    "firstName": "Gopal", "lastName": "Thakur", "contact": 9960000703, "email": "gopal@hotmail.com"
  }
  ]
}
<!doctype html>
<html lang="en" ng-app="webixApp">

<head>
  <meta charset="utf-8">
  <title>Webix - Angular : Layouts</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>

  <link rel="stylesheet" type="text/css" href="https://cdn.webix.com/edge/webix.css">
  <script type="text/javascript" src="https://cdn.webix.com/edge/webix.js"></script>
  <script type="text/javascript" src="index.js"></script>

  <script type="text/javascript">
    var app = angular.module('webixApp', ["webix"]);


    app.controller('jsonCtrl', function($scope, $http) {

      $http.get('data.json').then(function(response) {
        $scope.content = response.data.student
      })
    })

    app.controller('extCtrl', function($scope, $http) {



      $scope.myTable = {
        view: "datatable",
        columns: [{
            id: "name",
            header: "Name",
            css: "rank",
            width: 150
          },
          {
            id: "username",
            header: "UserName",
            width: 150,
            sort: "server"
          },
          {
            id: "email",
            header: "Email ID",
            width: 200,
            sort: "server"
          },
          {
            id: "website",
            header: "Website",
            width: 150
          }
        ],
        autoheight: true,
        autowidth: true,
        url: "https://jsonplaceholder.typicode.com/users"

      }

    })
  </script>
</head>

<body>

  <div webix-ui type="space">
    <div height="35">Welcome to Angular Webix App </div>
    <div view="cols" type="wide" margin="10">
      <div width="200">
        <input type="text" placeholder="Type something here" ng-model="app"> Hello {{app}}!
      </div>
      <div view="resizer"></div>
      <div view="tabview" ng-controller="jsonCtrl">
        <div header="JSON Data Fetch Example">

          <div ng-controller="jsonCtrl">
            <div webix-ui view="datatable" webix-data="content" autoheight="true" select="row" fillspace="true">
              <div autowidth="true" view="column" id="firstName" sort="int" css="rating" scrollY="true">First Name</div>
              <div view="column" id="lastName" sort="int">Last Name</div>
              <div view="column" id="contact" sort="int">Contact</div>
              <div view="column" id="email" sort="string" width="200">E mail</div>
            </div>
          </div>
        </div>
      </div>
      <div view="resizer"></div>
      <div view="tabview" ng-controller="extCtrl">
        <div header="External Source Data Table">
          <div webix-ui="myTable"></div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>