查询和下拉框查询，添加，表格

前言

       bootstrap的表格样式，有类似EasyUI的表格，也有卡片式表格，放到移动端显示，各有千秋。但是BootStrap自带的表格是没有操作列的，网上的资源不少，但是都是比较单一、零碎，JS、CSS也经常给的不全，自己经过大概一个月左右的时间，把表格封装了一下,希望能分享给大家。

                                                                                                        代码如下：

1.先导包

<script type="text/javascript" src="../js/angular.js" ></script>
  <script type="text/javascript" src="../js/angular-route.js" ></script>

2.配置路由

var app = angular.module("myApp",['ngRoute']);
			//配置路由
			app.config(["$routeProvider",function($routeProvider){
				$routeProvider
					.when("/",{})
					.when("/addOrder",{
						controller:"addOrderCtrl",
						templateUrl:"addOrder.html"
					})
					.otherwise({redirectTo:"/addOrder"});
			}]);

3.主订单控制器

app.controller("myCtrl",function($scope,$location){
				//数据源
				$scope.orders = [{
					id:1,
					goodName:"iPone4",
					userName:"张三",
					num:15555555555555,
					price:4999.00,
					city:"北京",
					time:"08-01 10:00",
					state:"发货"
				},{
					id:2,
					goodName:"小米6",
					userName:"李四",
					num:155666666666666,
					price:2999.00,
					city:"上海",
					time:"09-01 10:00",
					state:"已发货"
				},{
					id:3,
					goodName:"华为P9",
					userName:"王五",
					num:15577777777777,
					price:3999.00,
					city:"天津",
					time:"10-01 10:00",
					state:"已收货"
				},{
					id:4,
					goodName:"OPPO R11",
					userName:"赵六",
					num:155888888888,
					price:4999.00,
					city:"重庆",
					time:"11-11 10:00",
					state:"发货"	
				}];
				
				//定义跳转方法
				$scope.goToPath = function(){
					$location.path("/addOrder");
				}
				
				$scope.startTime = "开始月份";
				$scope.endTime = "结束月份";
				//过滤时间
				$scope.filterTime = function(index){
					//获得开始和结束月份
					
					//获取当前订单的时间月份
					var time = $scope.orders[index].time;
					var month = parseInt(time.split("-")[0]);
					
					if($scope.startTime == "开始月份" || $scope.endTime == "结束月份"){
						return true;
					}else{
						var start = parseInt($scope.startTime);
						var end = parseInt($scope.endTime);
						
						if(month >=start && month<=end ){
							return true;
						}else{
							return false;	
						}
					}
				}
				
				//更改状态
				$scope.changeState = function(index){
					$scope.orders[index].state = "已发货";
				}
				
			});

4.添加控制器

app.controller("addOrderCtrl",function($scope){
				$scope.goodName = "";
				$scope.userName = "";
				$scope.num = "";
				$scope.city = "选择城市";
				
				$scope.li1 = false; 
				$scope.li2 = false; 
				$scope.li3 = false; 
				$scope.li4 = false; 
				$scope.li5 = false; 
				$scope.li6 = false; 
				$scope.li7 = false; 
				
				
				$scope.sub = function(){
					//判断商品名是否为空
					if($scope.goodName == null || $scope.goodName == ""){
						$scope.li1 = true;
					}else{
						$scope.li1 = false;
						//判断商品名是否符合格式
						if($scope.goodName.length <= 6 || $scope.goodName.length >= 20){
							alert("asf")
							$scope.li2 = true; 
						}else{
							$scope.li2 = false;
						}
					}
					//判断用户名是否为空
					if($scope.userName == null || $scope.userName == ""){
						$scope.li3 = true;
					}else{
						$scope.li3 = false;
						//判断用户名是否符合格式
						if($scope.userName.length <= 4 || $scope.userName.length >= 16){
							$scope.li4 = true; 
						}else{
							$scope.li4 = false;
						}
					}
					//判断手机号是否为空
					if($scope.num == null || $scope.num == ""){
						$scope.li5 = true;
					}else{
						$scope.li5 = false;
						//判断手机号是否符合格式
						alert($scope.num.length);
						if($scope.num.length == 11){
							if(isNaN($scope.num)){
								$scope.li6 = true;
							}else{
								$scope.li6 = false;
							}
						}else{
							$scope.li6 = true; 
						}
					}
					//判断手机号是否符合格式
					if($scope.city == "选择城市"){
						$scope.li7 = true; 
					}else{
						$scope.li7 = false;
					}
					
					
					if(!$scope.li1 && !$scope.li2 && !$scope.li3 && !$scope.li4 && !$scope.li5 && !$scope.li6 && !$scope.li7){
						//全显示，格式全不正确，才能进来
						//获得ID
						var idMax = 0;
						for(index in $scope.orders){
							if($scope.orders[index].id>idMax){
								idMax = $scope.orders[index].id;
							}
						}
						//alert("添加");
						var date = new Date();
						var month = date.getMonth()+1;
						var day = date.getDate();
						var hours = date.getHours();
						var minute = date.getMinutes();
						var myTime = month+"-"+day+" "+hours+":"+minute;
						var order = {
							id:idMax+1,
							goodName:$scope.goodName,
							userName:$scope.userName,
							num:$scope.num,
							price:2999.00,
							city:$scope.city,
							time:myTime,
							state:"发货"
						};
						//将订单添加到数据源
						$scope.orders.push(order);
					}else{
						//
					}
				}
			});

5.html代码

		
      
      
			
       
       
订单页面
			
       
       
			
       
       
			
       
       选择城市北京上海天津重庆
			
       
       选择状态发货已发货已收货
			
       
       开始月份010203040506070809101112-
			
       
       结束月份010203040506070809101112
       
       

       
       

			
       
       新增订单
			
       
       批量发货
       
       

       
       

			
       
       
 
ID　排序
商品名
用户名
手机号
价格　排序
城市
下单时间　排序
状态
 
{{order.id}}
{{order.goodName}}
{{order.userName}}
{{order.num}}
{{order.price}}
{{order.city}}
{{order.time}}
 {{order.state}} {{order.state}} {{order.state}} 
		
      
      
		
		
      
      
		<script type="text/ng-template" id="addOrder.html">
			
      
      
				
       
       
新增订单
				商品名：
       
       
       
       

       
       

				用户名：
       
       
       
       

       
       

				手机号：
       
       
       
       

       
       

				城市：
       
       选择城市北京上海天津重庆
       
       

				
       
       
商品不能为空
商品名必须是6-20个字符
用户名不能为空
用户名必须是4-16个字符
手机号不能为空
手机号格式不正确
请选择城市
				
       
       
       
       

			
      
      
		</script>