样式包括隔行变色以及高亮显示
<style type="text/css">
#t tr{
background-color: #fff;
}
#t tr:nth-child(2n){
background-color: #bbb;
}
/*高亮显示*/
#t tr:hover{
background-color: greenyellow
}
</style>
/angularjs
<script>
angular.module("myapp",[])
.controller("democ",function($scope,$http){
$scope.mouth=["01","02","03","04","05","06","07","08","09","10","11","12"];
$http.get("phones.json").success(function(resp){
$scope.list=resp;
})
///点击发货进行显示
$scope.show=function(v){
$scope.list[v].zt="已发货";
}
//点击修改信息的按钮
$scope.qqq = -1;
$scope.xiu=function(v){
if($scope.qqq == v){
//获得输入框中的值
var sname = document.getElementsByName("sname")[v].value;
var user = document.getElementsByName("user")[v].value;
var num = document.getElementsByName("num")[v].value;
var price = document.getElementsByName("price")[v].value;
var city = document.getElementsByName("city")[v].value;
var shijian = document.getElementsByName("shijian")[v].value;
$scope.list[v].sname=sname;
$scope.list[v].user=user;
$scope.list[v].num=num;
$scope.list[v].price=price;
$scope.list[v].city=city;
$scope.list[v].shijian=shijian;
$scope.qqq=-1;
}else{
$scope.qqq = v;
}
}
//点击删除按钮
$scope.del=function(a){
$scope.list.splice(a,1);
}
//批量发货
$scope.pfa=function(){
//遍历数组 先进行判断是否为发货状态
for(var i=0;i<$scope.list.length;i++){
if($scope.list[i].zt=="发货"){
$scope.list[i].zt="已发货";
}
}
}
//批量删除
$scope.pshan=function(){
//先判断多选框有没有被选中
var cks = document.getElementsByName("ck") ;
//进行便利 如果是选中状态则删除
var j=0;
for(var i=0;i<cks.length;i++){
if(cks[i].checked){
$scope.list.splice((i-j),1);
j++;
}
}
}
//全选
$scope.quanxuan=function(){
//得到各个小框
var cks = document.getElementsByName("ck") ;
for(var i=0;i<cks.length;i++){
//状态与全选框相同
cks[i].checked=$scope.qx;
}
}
//点击新增订单
$scope.add=function(){
//添加信息的表格出现
var table = document.getElementById("tab")
table.style.display="block";
}
var i=10;
var a=100;
//点击添加信息表格的提交按钮
$scope.tijiao=function(){
//存放错误信息的数组
$scope.shuzu=[];
//判断是否显示
$scope.isshow=false;
//验证信息 姓名 价格
if($scope.iname==""||$scope.iname==undefined){
$scope.shuzu.push("商品名不能为空！");
}else if($scope.iname.length<3||$scope.iname.length>8){
$scope.shuzu.push("商品名长度在3-8之间！");
}
//验证价格 必须为数字
if(! /^\d+$/.test($scope.iprice)){
$scope.shuzu.push("价格必须为有效数字！");
}
if($scope.shuzu.length>0){
$scope.isshow=true;
}else{
//获得信息存进数组里
i++;
a=a+10;
$scope.list.push({"id":i,"sname":$scope.iname,"user":$scope.iuser,"num":a,"price":$scope.iprice,"city":$scope.icity,"shijian":$scope.itime,"zt":$scope.istate});
//表格消失
var table = document.getElementById("tab")
table.style.display="none";
//提示错误消失
$scope.isshow=false;
}
}
})
</script>
///视图
<body ng-app="myapp" ng-controller="democ">
<input value="用户名搜索" ng-model="uss"/>
<input value="手机号搜索" ng-model="pss"/>
<select ng-model="citys">
<option value="">选择城市</option>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
</select>
<select ng-model="zhuangtai">
<option value="">选择状态</option>
<option>已发货</option>
<option>发货</option>
<option>已收货</option>
</select>
<select ng-model="startM" >
<option value="">开始月份</option>
<option ng-repeat="mm in mouth">{{mm}}</option>
</select>
<select ng-model="endM" >
<option value="">结束月份</option>
<option ng-repeat="mm in mouth">{{mm}}</option>
</select>
<input type="button" value="查询" /><br />
<input type="button" value="新增订单" style="background-color: greenyellow;" ng-click="add()"/>
<input type="button" value="批量发货" style="background-color: greenyellow;" ng-click="pfa()"/>
<input type="button" value="批量删除" style="background-color: red" ng-click="pshan()"/>
<table id="t" border="1px solid black" >
<tr style="background-color: #999;">
<th><input type="checkbox" ng-change="quanxuan()" ng-model="qx"/></th>
<th ng-click="title='id';desc=!desc">ID</th>
<th ng-click="title='sname';desc=!desc">商品名</th>
<th ng-click="title='user';desc=!desc">用户名</th>
<th>手机号</th>
<th ng-click="title='price';desc=!desc">价格</th>
<th>城市</th>
<th ng-click="title='shijian';desc=!desc">下单时间</th>
<th>状态</th>
<th>操作</th>
</tr>
<tr ng-repeat="item in list | orderBy:title:desc |filter:{'user':uss,'num':pss,'city':citys,'zt':zhuangtai}"name="tt">
<td><input type="checkbox" name="ck" /></td>
<td>
{{item.id}}
</td>
<td>
<span ng-show="$index!=qqq">{{item.sname}}</span>
<span ng-show="$index==qqq"><input type="text" value="{{item.sname}}" name="sname"/></span>
</td>
<td>
<span ng-show="$index!=qqq">{{item.user}}</span>
<span ng-show="$index==qqq"><input type="text" value="{{item.user}}" name="user"/></span>
</td>
<td>
<span ng-show="$index!=qqq">{{item.num}}</span>
<span ng-show="$index==qqq"><input type="text" value="{{item.num}}" name="num"/></span>
</td>
<td>
<span ng-show="$index!=qqq">{{item.price|currency:"￥"}}</span>
<span ng-show="$index==qqq"><input type="text" value="{{item.price}}" name="price"/></span>
</td>
<td>
<span ng-show="$index!=qqq">{{item.city}}</span>
<span ng-show="$index==qqq"><input type="text" value="{{item.city}}" name="city"/></span>
</td>
<td>
<span ng-show="$index!=qqq">{{item.shijian}}</span>
<span ng-show="$index==qqq"><input type="text" value="{{item.shijian}}" name="shijian"/></span>
</td>
<td>
<span ng-show="item.zt=='已发货'||item.zt=='已收货'">{{item.zt}}</span>
<span ng-show="item.zt=='发货'"><a href="#" ng-click="show($index)">{{item.zt}}</a></span>
</td>
<td>
<a href="#" ng-click="xiu($index)">修改</a>
<a href="#" ng-click="del($index)">删除</a>
</td>
</tr>
</table>
<table id="tab" style="display: none;">
<tr>
<td>商品名称</td>
<td><input type="text" ng-model="iname" /></td>
</tr>
<tr>
<td>用户名</td>
<td><input type="text" ng-model="iuser" /></td>
</tr>
<tr>
<td>价格</td>
<td><input type="text" ng-model="iprice" /></td>
</tr>
<tr>
<td>城市</td>
<td><input type="text" ng-model="icity" /></td>
</tr>
<tr>
<td>下单时间</td>
<td><input type="text" ng-model="itime" /></td>
</tr>
<tr>
<td>状态</td>
<td><input type="text" ng-model="istate" /></td>
</tr>
<tr>
<td colspan="2"><input type="button" value="提交" ng-click="tijiao()"/></td>
</tr>
</table>
<div style="width: 400px;background-color: aquamarine;">
<ul ng-show="isshow">
<li ng-repeat="s in shuzu">{{s}}</li>
</ul>
</div>
</body>
发货代码
最新推荐文章于 2022-12-21 22:43:36 发布
139
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
