前言
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>
<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代码
订单页面
-
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>