angularJS+html+Spring+Mybatis

var app = angular.module("dbApi.service",[]);
app.service("dbApiService",['$http','$q',function($http,$q){
	
	this.queryTables = function(pageNo,pageSize,sreachDbName){
		var deferred = $q.defer();
		$http.get("api/querytables/" + pageNo + "/" + pageSize + "?sreachDbName=" + sreachDbName)
		     .success(function(data) {
					deferred.resolve(data);
			  })
			  .error(function(data) {
			        deferred.reject(data);
		      }) ;
		return deferred.promise;
	} ;
	
	this.queryTableInfo = function(dbname){
		var deferred = $q.defer();
		$http.get("api/queryTableInfo?dbname=" + dbname)
		     .success(function(data) {
					deferred.resolve(data);
			  })
			  .error(function(data) {
			        deferred.reject(data);
		      }) ;
		return deferred.promise;
	} ;
	
	
	this.queryNeeds = function(pageNo,sreachDescName){
		var deferred = $q.defer();
		$http.get("api/queryNeeds/" + pageNo + "/" + pageSize+"?sreachDescName=" + sreachDescName)
		     .success(function(data) {
					deferred.resolve(data);
			  })
			  .error(function(data) {
			        deferred.reject(data);
		      }) ;
		return deferred.promise;
	} ;
	
	this.addNeeds = function(pageNo,need_desc,need_people,need_sql){
		var deferred = $q.defer();
		$http.get("api/queryNeeds/" + pageNo + "/" + pageSize + 
				  "?need_desc=" + need_desc + "?need_people=" + need_people + "?need_sql=" + need_sql)
		     .success(function(data) {
					deferred.resolve(data);
			  })
			  .error(function(data) {
			        deferred.reject(data);
		      }) ;
		return deferred.promise;
	} ;
	
}]);

var app = angular.module("dbHome.controller",["ngRoute","dbShow.controller","dbNeed.controller"]) ;

app.config(function ($routeProvider) {
    $routeProvider.
	    when('/home',{
	        templateUrl: './page/app/showDb.html',controller: 'showDbCtrl'
	    }).
	    when('/need',{
	        templateUrl: './page/app/need.html',controller: 'needCtrl'
	    }).
	    otherwise({
	        redirectTo: '/home'
	    });
});

var app = angular.module("dbNeed.controller",["dbApi.service","ngTable","ui.bootstrap"]) ;

app.controller("needCtrl",["$scope","dbApiService",'NgTableParams',function($scope,api,NgTableParams) {
	$scope.changeDateFir = true ;
	$scope.sreachDescName = "" ; 
	$scope.queryNeeds = function(){
		if($scope.totalNeeds != undefined){
			$scope.changeDateFir=!$scope.changeDateFir;
			$scope.totalNeeds.page(1) ;
			$scope.totalNeeds.count(15) ;
			$scope.totalNeeds.sorting({ 
		        changeDate: $scope.changeDateFir?'desc':'asc'
		    });
		}else{
			$scope.totalNeeds = new NgTableParams({
			  	page: 1,count: 15,},{  counts: [],getData: function($defer,params) {
				    var count = params.count();
				    var page = params.page();
				    api.queryNeeds(page,count,$scope.sreachDescName).then(function(data){
						if(data.callStatus == 'SUCCEED' && data && data.data.length > 0){
							params.total(data.totalNumber) ;
							$defer.resolve(data.data) ;
						}else{
							$defer.resolve([]);
						}
					},function(data) {
						$defer.resolve([]);
					}); 
				 }
			  });
		  } 
	};
	 
	$scope.queryNeeds() ;

}]) ;

var app = angular.module("dbShow.controller","ui.bootstrap"]) ;

app.controller("showDbCtrl",['$scope','$uibModal','dbApiService',$uibModal,NgTableParams,api){
	$scope.changeDateFir = true ;
	$scope.sreachDbName = "" ;
	$scope.dbTables = function(){
		if($scope.totalTables != undefined){
			$scope.changeDateFir=!$scope.changeDateFir;
			$scope.totalTables.page(1) ;
			$scope.totalTables.count(15) ;
			$scope.totalTables.sorting({ 
		        changeDate: $scope.changeDateFir?'desc':'asc'
		    });
		}else{
			$scope.totalTables = new NgTableParams({
			  	page: 1,params) {
				    var count = params.count();
				    var page = params.page();
				    api.queryTables(page,$scope.sreachDbName).then(function(data){
						if(data.callStatus == 'SUCCEED' && data && data.data.length > 0){
							params.total(data.totalNumber) ;
							$defer.resolve(data.data) ;
						}else{
							$defer.resolve([]);
						}
					},function(data) {
						$defer.resolve([]);
					}); 
				 }
			  });
		  } 
	};
	
	$scope.dbTables() ;	
	
	$scope.showTableInformation = function(dbname){  //打开模态
         var modalInstance = $uibModal.open({
             animation:true,templateUrl : 'newFunctionReminder.html',//指向上面创建的视图
             controller : 'AllModalInstanceCtrl',// 初始化模态范围
             size : 'lg',//大小配置
             resolve:{
                  items: function () {//items是一个回调函数
                      return dbname  ;//这个值会被模态框的控制器获取到
                  }
             }
          });
                
          modalInstance.result.then(function(){  
          },function(){
          });
    };
}]);

app.controller("AllModalInstanceCtrl","$uibModalInstance","items",$uibModalInstance,items){ //依赖于modalInstance
	api.queryTableInfo(items).then(function(data){
		 $scope.tableInfomatin = data  ;
    });
    $scope.cancel = function(){
    	 $uibModalInstance.dismiss('cancel'); // 退出
    };
}]);

<!DOCTYPE html>
<html ng-app="dbHome.controller">
<head>

<meta charset="utf-8">
<title>数据视图</title>

<link href="page/common/css/bootstrap.min.css" rel="stylesheet">
<link href="page/common/css/ng-table.css" rel="stylesheet">

<script src="page/common/js/angular.js"></script>
<script src="page/common/js/ng-table.js"></script>
<script src="page/common/js/ui-bootstrap-tpls.js"></script>
<script src="page/common/js/angular-animate.min.js"></script>
<script src="page/common/js/angular-route.min.js"></script>

<script src="page/app/js/controllers/db-home-controller.js"></script>
<script src="page/app/js/controllers/db-need-controller.js"></script>
<script src="page/app/js/controllers/db-show-controller.js"></script>
<script src="page/app/js/services/db-api-service.js"></script>

</head>

<body>
    <div class="navbar navbar-inverse">
       <a class="navbar-breand" href="#/home">数据视图</a>
    </div> 
    
	<div class="panel panel-default row">
		<div class="col-xs-2">
				<ul class="nav nav-stacked">
				  <li><a href="#/need">上报需求</a></li>
				  <li><a href="#/">我要吐槽</a></li>
				</ul>
		</div> 		
		<div class="col-xs-8">
			  <div ng-view=""></div>
		</div>
	</div>
</body>
</html>

<div>
	<form class="bs-example bs-example-form" role="form">
		<div class="row">
			<div class="col-lg">
				<div class="input-group">
					<input class="form-control" type="text" ng-model="sreachDescName"
						placeholder="上报需求描述"> <span class="input-group-btn">
						<button class="btn btn-default" ng-click="queryNeeds()">
							Submit</button>
					</span>
				</div>
			</div>
		</div>
	</form>

	<br>

	<table ng-table="totalNeeds" class="table table-hover">
		<tbody>
			<tr>
				<th>需求描述</th>
				<th>上报人</th>
				<th>上报时间</th>
			</tr>
			<tr ng-repeat="need in $data">
				<td>{{need.need_desc|limitTo:15}}</td>
				<td>{{need.need_people}}</td>
				<td>{{need.need_time}}</td>
			</tr>
		</tbody>
	</table>
</div>

<div>

	<form class="bs-example bs-example-form" role="form">
		<div class="row">
			<div class="col-lg">
				<div class="input-group">
					<input class="form-control" type="text" ng-model="sreachDbName" placeholder="按表名查詢" >
					<span class="input-group-btn">
						<button class="btn btn-default" ng-click="dbTables()">
							Submit
						</button>
					</span>
				</div>
			</div>
		</div>
	</form>
	
	<br>

	<table ng-table="totalTables" class="table table-hover">
		<tbody>
			<tr>
				<th>表名</th>
				<th>描述</th>
			</tr>
			<tr ng-repeat="db in $data">
				<td ng-click="showTableInformation(db.table_name)"><a href>{{db.table_name}}</a></td>
				<td>{{db.description}}</td>
			</tr>
		</tbody>
	</table>


	<script type="text/ng-template" id="newFunctionReminder.html">
		<div class="modal-header update-modal-title">
        </div>
		<table class="table table-hover">
		<tbody>
			<tr>
				<th>列名</th>
                <th>描述</th>
                <th>类型</th>
                <th>可空</th>
			</tr>
			<tr ng-repeat="dbinfo in tableInfomatin">
				<td>{{dbinfo.column_name}}</td>
                <td>{{dbinfo.description}}</td>
                <td>{{dbinfo.data_type}}</td>
                <td>{{dbinfo.is_nullable}}</td>
			</tr>
		</tbody>
	   </table>
        <div class="modal-footer update-modal-footer">
            <button class="btn" ng-click="cancel()">关闭</button>
        </div>
</script>

</div>

	<select id="queryTables" resultType="java.util.HashMap">
		select a.table_name,b.description
		from(
			SELECT table_name 
			FROM information_schema.tables WHERE table_schema = 'public' 
		)a
		left join
		(  select  table_name,des.description
			  FROM information_schema.tables tab
			  LEFT JOIN pg_description des 
			  ON tab.table_name::regclass = des.objoid 
			WHERE table_schema = 'public'
			AND  des.objsubid=0
		)b
		on a.table_name  = b.table_name 
		order by table_name
	</select>
	
	<select id="queryTableInfo" resultType="java.util.HashMap">
		select  col.column_name,col.is_nullable,col.data_type,des.description
		FROM information_schema.columns col
		LEFT JOIN pg_description des ON col.table_name::regclass = des.objoid AND col.ordinal_position = des.objsubid
		WHERE table_schema = 'public'
		AND table_name =#{dbname,jdbcType=VARCHAR} 
	</select>
	
	<select id="queryNeeds" resultType="java.util.HashMap">
		select   to_char(need_time,'YYYY-MM-DD HH:MM:SS') as need_time,user_sql as need_sql 
		from ebd_tmp_need
		where need_desc like CONCAT('%',#{sreachDescName,jdbcType=VARCHAR},'%')
		offset #{offset,jdbcType=INTEGER}  limit #{limit,jdbcType=INTEGER}
	</select>
	
	<select id="queryNeedCount" resultType="java.lang.Integer">
		select  count(*) from ebd_tmp_need
		where need_desc like  CONCAT('%','%')
	</select>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!