Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

table editing with js grid #2

Open
wants to merge 4 commits into
base: master
from
Open
Changes from all commits
Commits
File filter...
Filter file types
Jump to…
Jump to file or symbol
Failed to load files and symbols.

Always

Just for now

@@ -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');
}
};
@@ -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>
@@ -0,0 +1 @@
<div class="jsgrid"></div>
ProTip! Use n and p to navigate between commits in a pull request.
You can’t perform that action at this time.