table editing with js grid

grid_directives.js

@@ -17,14 +17,17 @@ angular.module("app").directive("gridScreen", function($http) {
       this.setEditor = function(editor) {
         $scope.cols.unshift(editor);
       };
+      this.useEditor = function(useEditor) {
+        $scope.useEditor = useEditor;
+      }
       this.setColumns = function(cols) {
         $scope.cols = cols;
       };
     },
     link: function(scope, element, attributes) {
       $http.get(attributes.resource).success(function(response) {
         scope.rows = response.data;
-        scope.$broadcast('ready-to-render', scope.rows, scope.cols);
+        scope.$broadcast('ready-to-render', scope.rows, scope.cols, scope.useEditor);
       });
     }
   };
@@ -63,15 +66,35 @@ angular.module("app").directive("gridColumn", function() {
     }
   };
 });
-angular.module("app").directive("grid", function() {
+angular.module("app").service("gridDataMapper", function() {
+  return {
+    toJSGridFields: function(cols, useEditor) {
+      var fields = cols.map(function(col) {
+        return {
+          name: col.field,
+          type: 'text'
+        };
+      });
+      if(useEditor) {
+        fields.unshift({ name: 'edit', type: 'control' });
+      }
+      return fields;
+    }
+  }
+});
+angular.module("app").directive("grid", function(gridDataMapper) {
   return {
     restrict: 'E',
-    templateUrl: "/templates/as_table.html",
+    templateUrl: "/templates/as_js_grid.html",
     replace: true,
-    controller: function($scope) {
-      $scope.$on('ready-to-render', function(e, rows, cols) {
-        $scope.rows = rows;
-        $scope.cols = cols;
+    link: function(scope, element, attributes) {
+      scope.$on('ready-to-render', function(e, rows, cols, useEditor) {
+        $(element).jsGrid({
+          width: "100%",
+          editing: useEditor,
+          data: rows,
+          fields: gridDataMapper.toJSGridFields(cols, useEditor)
+        });
       });
     }
   };
@@ -81,10 +104,7 @@ angular.module("app").directive("withInlineEditor", function() {
     restrict: 'A',
     require: '^gridScreen',
     link: function(scope, element, attributes, gridScreenController) {
-      gridScreenController.setEditor({
-        title: "Edit",
-        field: ""
-      });
+      gridScreenController.useEditor(true);
       console.log('linked withInlineEditor');
     }
   };

index.html

@@ -7,21 +7,25 @@
   <script src="/vendor/angular.js"></script>
   <script src="/app_module.js"></script>
   <script src="/grid_directives.js"></script>
+  <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css" />
+  <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" />
+
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>
   <style type="text/css">
-    td {
+    .grid td {
       border: 1px solid #ccc;
       padding: 5px;
     }
 
-    a {
+    .grid a {
       cursor: pointer;
     }
 
-    a::before {
+    .grid a::before {
       content: '\25B6';
     }
 
-    .editing a::before {
+    .grid.editing a::before {
       content: '\25BC';
     }
   </style>

templates/as_js_grid.html

@@ -0,0 +1 @@
+<div class="jsgrid"></div>