| <html ng-app="app"> |
| <head><title></title> |
| <style> |
| |
| input[type=text], textarea { |
| -webkit-transition: all 0.30s ease-in-out; |
| -moz-transition: all 0.30s ease-in-out; |
| -ms-transition: all 0.30s ease-in-out; |
| -o-transition: all 0.30s ease-in-out; |
| outline: none; |
| padding: 3px 0px 3px 3px; |
| margin: 5px 1px 3px 0px; |
| border: 1px solid #DDDDDD; |
| } |
| |
| input[type=text]:focus, textarea:focus { |
| box-shadow: 0 0 5px rgba(81, 203, 238, 1); |
| padding: 3px 0px 3px 3px; |
| margin: 5px 1px 3px 0px; |
| border: 1px solid rgba(81, 203, 238, 1); |
| } |
| |
| table { |
| color: #333; |
| font-family: Helvetica, Arial, sans-serif; |
| border-collapse: |
| collapse; border-spacing: 0; |
| } |
| |
| td, th { |
| border: 1px solid white; |
| height: 30px; |
| transition: all 0.1s; /* Simple transition for hover effect */ |
| } |
| |
| th { |
| background: #097ec1; |
| color: #ffffff; |
| font-weight: bold; |
| } |
| |
| td { |
| background: #FAFAFA; |
| text-align: center; |
| } |
| |
| th:first-child { |
| border-radius: 6px 0 0 0; |
| } |
| |
| th:last-child { |
| border-radius: 0 6px 0 0; |
| } |
| |
| th:only-child{ |
| border-radius: 6px 6px 0 0; |
| } |
| /* Cells in even rows (2,4,6...) are one color */ |
| tr:nth-child(even) td { background: #e3edf2; } |
| |
| /* Cells in odd rows (1,3,5...) are another (excludes header cells) */ |
| tr:nth-child(odd) td { background: #FEFEFE; } |
| |
| tr td:hover { background: #666; color: #FFF; } /* Hover cell effect! */ |
| |
| body { |
| font-family: Helvetica, Arial, sans-serif; |
| } |
| |
| </style> |
| |
| <script type="text/javascript"> |
| var parseQueryString = function() { |
| |
| var str = window.location.search; |
| var objURL = {}; |
| |
| str.replace( |
| new RegExp( "([^?=&]+)(=([^&]*))?", "g" ), |
| function( $0, $1, $2, $3 ){ |
| objURL[ $1 ] = $3; |
| } |
| ); |
| return objURL; |
| }; |
| </script> |
| |
| <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script> |
| |
| <script type="text/javascript"> |
| var app = angular.module('app', []); |
| |
| app.controller('listController', function($scope,$http,$location) { |
| $scope.selectedItem = function(s,$location,$window) { |
| window.location = 'details.html?s='+$scope.sName+'&id='+s.$id; |
| }; |
| |
| $scope.keys = function(obj){ |
| return obj? Object.keys(obj) : []; |
| }; |
| |
| var params = parseQueryString(); |
| $scope.sName = params["s"]; |
| var url="JsonTableServlet"+window.location.search; |
| $http.get(url).success( |
| function(response) { |
| $scope.sList = response; |
| }); |
| }); |
| |
| </script> |
| |
| </head> |
| |
| <body > |
| <div ng-controller="listController"> |
| <!-- |
| {{sList}} |
| --> |
| <div align="left"> |
| <B>{{sName}}</B> |
| Search:<input type="text" data-ng-model="filterText" > |
| </div> |
| |
| <table> |
| <tr> |
| <th ng-repeat="key in keys(sList[0]) | filter: '!$$hashKey' | filter: '!$id'" style="width: 200px; ">{{key}}</th> |
| </tr> |
| <tr ng-repeat="s in sList | filter: filterText" ng-dblclick="selectedItem(s)"> |
| <td ng-repeat="key in keys(s) | filter: '!$$hashKey' | filter: '!$id'" style="width: 200px; " > |
| |
| <div ng-switch on="s[key]"> |
| <div ng-switch-when="true"> |
| <input type="checkbox" checked onclick="javascript: return false;"> |
| </div> |
| <div ng-switch-when="false"> |
| <input type="checkbox" onclick="javascript: return false;"> |
| </div> |
| <div ng-switch-default> |
| {{s[key]}} |
| </div> |
| </div> |
| |
| </td> |
| </tr> |
| </table> |
| |
| <img src="add.png" height="40" ng-click="selectedItem('0')"> |
| </div> |
| |
| |
| </body> |
| |
| </html> |
