添加验证，根据状态删除
2017-12-21 09:03
176 查看
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/angular.js"></script>
<script src="js/jquery-2.1.0.js"></script>
<style>
.kuan{
width: 100px;
height: 20px;
border-top-left-radius: 5em;
border-top-right-radius: 5em;
border-bottom-right-radius: 5em;
border-bottom-left-radius: 5em;
margin-left: 10px;
}
.sjh{
width: 100px;
height: 20px;
border-top-left-radius: 5em;
border-top-right-radius: 5em;
border-bottom-right-radius: 5em;
border-bottom-left-radius: 5em;
margin-left: 10px;
}
.ya{
border: 1px solid red;
}
.ya2{
background-color: yellow;
border: 1px solid red;
}
</style>
<script>
var app = angular.module("myApp",[]);
var time1 = new Date("2017-12-19 9:41:53");
var time2 = new Date("2017-12-18 10:41:53");
var time3 = new Date("2017-12-17 11:41:53");
var time4 = new Date("2017-12-16 12:41:53");
app.controller("myCtrl",function($scope){
$scope.orders = [{
id:2001,
sname:"iPhoneX",
yname:"张三",
telnum:13525565588,
price:8699.00,
city:"北京",
time:time1,
orderState:true,
state:false
},{
id:3006,
sname:"iPhone6",
yname:"王红",
telnum:18524565588,
price:5635.00,
city:"郑州",
time:time2,
orderState:true,
state:false
},{
id:5312,
sname:"iPhone7",
yname:"赵小龙",
telnum:17545585598,
price:6180.00,
city:"北京",
time:time3,
orderState:false,
state:false
},{
id:2132,
sname:"iPhone8",
yname:"赵强",
telnum:17625565618,
price:7190.00,
city:"上海",
time:time4,
orderState:false,
state:false
}];
//更改状态
$scope.changeorderState = function(or){
or.orderState = true;
}
//全选，全不选
$scope.selsectAll = false;
$scope.selectFun = function(){
if($scope.selsectAll){
for(index in $scope.orders){
$scope.orders[index].state = true;
}
}else{
for(index in $scope.orders){
$scope.orders[index].state = false;
}
}
}
//批量删除已发货商品
$scope.deleteSel = function(){
var selArr = [];
for(index in $scope.orders){
if($scope.orders[index].state){//多选框被选中的商品
if($scope.orders[index].orderState){//多选框被选中的已发货商品
selArr.push($scope.orders[index]);
}
}
}
if(selArr.length > 0){
for(index in selArr){
for(index2 in $scope.orders){
if(selArr[index] == $scope.orders[index2]){
$scope.orders.splice(index2,1);
}
}
}
}else{
alert("先选择被选中的已发货商品");
}
}
//id排序
$scope.flag = "";
$scope.bname = "id";
$scope.pid = function(bname){
$scope.bname = bname;
if($scope.flag == ""){
$scope.flag = "-";
}else{
$scope.flag = "";
}
}
//价格排序
$scope.flag = "";
$scope.bname = "id";
$scope.pprice = function(bname){
$scope.bname = bname;
if($scope.flag == ""){
$scope.flag = "-";
}else{
$scope.flag = "";}
}
//时间排序
$scope.flag = "";
$scope.bname = "id";
$scope.ptime = function(bname){
$scope.bname = bname;
if($scope.flag == ""){
$scope.flag = "-";
}else{
$scope.flag = "";
}
}
//添加数据保存
$scope.show = false;
$scope.add = function(){
$scope.show = true;
}
$scope.s1 = false; var flag1 = false;
$scope.s2 = false; var flag2 = false;
$scope.s3 = false; var flag3 = false;
$scope.s4 = false; var flag4 = false;
$scope.s5 = false; var flag5 = false;
$scope.s6 = false; var flag6 = false;
$scope.keep = function(){
//判断id
if($scope.jid == "" || $scope.jid == null){
$("#j1").addClass("ya");
$("#i1").addClass("ya2");
$scope.s1 = true;
flag1 = false;
}else{
$scope.s1 = false;
$("#j1").removeClass("ya");
flag1 = true;
}
//判断商品名
if($scope.jsname == "" || $scope.jsname == null){
$("#j2").addClass("ya");
$("#i2").addClass("ya2");
$scope.s2 = true;
flag2 = false;
}else{
$scope.s2 = false;
$("#j2").removeClass("ya");
flag2 = true;
}
//判断用户名
if($scope.jyname == "" || $scope.jyname == null){
$("#j3").addClass("ya");
$("#i3").addClass("ya2");
$scope.s3 = true;
flag3 = false;
}else{
$scope.s3 = false;
$("#j3").removeClass("ya");
flag3 = true;
}
//判断手机号
if($scope.jtelnum == "" || $scope.jtelnum == null){
$("#j4").addClass("ya");
$("#i4").addClass("ya2");
$scope.s4 = true;
flag4 = false;
}else{
$scope.s4 = false;
$("#j4").removeClass("ya");
flag4 = true;
}
//判断价格
if($scope.jprice == "" || $scope.jprice == null){
$("#j5").addClass("ya");
$("#i5").addClass("ya2");
$scope.s5 = true;
flag5 = false;
}else{
$scope.s5 = false;
$("#j5").removeClass("ya");
flag5 = true;
}
//判断城市
if($scope.jcity == "" || $scope.jcity == null){
$("#j6").addClass("ya");
$("#i6").addClass("ya2");
$scope.s6 = true;
flag6 = false;
}else{
$scope.s6 = false;
$("#j6").removeClass("ya");
flag6 = true;
}
if(flag1 && flag2 && flag3 && flag4 && flag5 && flag6 ){
$scope.orders.push({
id:$scope.jid,
sname:$scope.jsname,
yname:$scope.jyname,
telnum:$scope.jtelnum,
price:$scope.jprice,
city:$scope.jcity
});
}
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<h3>商品订单管理系统</h3>
<table border="1" cellpadding="10" cellspacing="0">
<input type="button" value="新增订单" ng-click="add()" />
<input type="button" value="批量删除" ng-click="deleteSel()" />
<input type="text" placeholder="按照商品名称查询..." class="kuan" ng-model="search" />
<input type="text" placeholder="按照手机号查询..." class="sjh" ng-model="telNum" />
<select style="margin-left: 30px;" ng-model="orderStateSel">
<option value="">--按照状态查询--</option>
<option value="true">--已发货--</option>
<option value="false">--未发货--</option>
</select><br /><br />
<tr>
<th><input type="checkbox" ng-click="selectFun()" ng-model="selsectAll"/></th>
<th width="60px" align="center">id<input type="button" value="排序" ng-click="pid('id')"/></th>
<th>商品名</th>
<th width="50px">用户名</th>
<th>手机号</th>
<th width="80px">价格<input type="button" value="排序" ng-click="pprice('price')"/></th>
<th width="40px">城市</th>
<th>下单时间<input type="button" value="排序" ng-click="ptime('time')"/></th>
<th>状态</th>
</tr>
<tr ng-repeat="or in orders | filter:{sname:search,telnum:telNum,orderState:orderStateSel} | orderBy:flag+bname">
<td><input type="checkbox" ng-model="or.state"/></td>
<td>{{or.id}}</td>
<td>{{or.sname}}</td>
<td>{{or.yname}}</td>
<td>{{or.telnum}}</td>
<td>{{or.price | currency:"￥:"}}</td>
<td>{{or.city}}</td>
<td width="200px" align="center">{{or.time | date:"yyyy--MM-dd hh:mm:ss"}}</td>
<td width="120px" align="center">
<button style="background: green; border: none;" ng-show="or.orderState">已发货</button>
<button style="background: yellow; border: none;" ng-show="!or.orderState" ng-click="changeorderState(or)">未发货</button>
</td>
</tr>
</table><br /><br />
<fieldset style="width: 500px;" ng-show="show">
<legend>添加商品列表</legend><br /><br />
<div>
id<input type="text" style="margin-left: 12px;" ng-model="jid" id="j1"/> <input type="text" ng-show="s1" id="i1" placeholder="id不能为空"/><br /><br />
商品名<input type="text" ng-model="jsname" id="j2"/> <input type="text" ng-show="s2" id="i2" placeholder="商品名不能为空"/><br /><br />
用户名<input type="text" ng-model="jyname" id="j3"/> <input type="text" ng-show="s3" id="i3" placeholder="用户号不能为空"/><br /><br />
手机号<input type="text" ng-model="jtelnum" id="j4"/> <input type="text" ng-show="s4" id="i4" placeholder="手机号不能为空"/><br /><br />
价格 <input type="text" ng-model="jprice" id="j5"/> <input type="text" ng-show="s5" id="i5" placeholder="价格不能为空"/><br /><br />
城市 <select ng-model="jcity" id="j6">
<option value="">---选择城市</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="深圳">深圳</option>
</select> <input type="text" ng-show="s6" id="i6" placeholder="城市必须选择"/>
<br /><br />
<button ng-click="keep()">保存</button>
</div>
</fieldset>
</center>
</body>
</html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/angular.js"></script>
<script src="js/jquery-2.1.0.js"></script>
<style>
.kuan{
width: 100px;
height: 20px;
border-top-left-radius: 5em;
border-top-right-radius: 5em;
border-bottom-right-radius: 5em;
border-bottom-left-radius: 5em;
margin-left: 10px;
}
.sjh{
width: 100px;
height: 20px;
border-top-left-radius: 5em;
border-top-right-radius: 5em;
border-bottom-right-radius: 5em;
border-bottom-left-radius: 5em;
margin-left: 10px;
}
.ya{
border: 1px solid red;
}
.ya2{
background-color: yellow;
border: 1px solid red;
}
</style>
<script>
var app = angular.module("myApp",[]);
var time1 = new Date("2017-12-19 9:41:53");
var time2 = new Date("2017-12-18 10:41:53");
var time3 = new Date("2017-12-17 11:41:53");
var time4 = new Date("2017-12-16 12:41:53");
app.controller("myCtrl",function($scope){
$scope.orders = [{
id:2001,
sname:"iPhoneX",
yname:"张三",
telnum:13525565588,
price:8699.00,
city:"北京",
time:time1,
orderState:true,
state:false
},{
id:3006,
sname:"iPhone6",
yname:"王红",
telnum:18524565588,
price:5635.00,
city:"郑州",
time:time2,
orderState:true,
state:false
},{
id:5312,
sname:"iPhone7",
yname:"赵小龙",
telnum:17545585598,
price:6180.00,
city:"北京",
time:time3,
orderState:false,
state:false
},{
id:2132,
sname:"iPhone8",
yname:"赵强",
telnum:17625565618,
price:7190.00,
city:"上海",
time:time4,
orderState:false,
state:false
}];
//更改状态
$scope.changeorderState = function(or){
or.orderState = true;
}
//全选，全不选
$scope.selsectAll = false;
$scope.selectFun = function(){
if($scope.selsectAll){
for(index in $scope.orders){
$scope.orders[index].state = true;
}
}else{
for(index in $scope.orders){
$scope.orders[index].state = false;
}
}
}
//批量删除已发货商品
$scope.deleteSel = function(){
var selArr = [];
for(index in $scope.orders){
if($scope.orders[index].state){//多选框被选中的商品
if($scope.orders[index].orderState){//多选框被选中的已发货商品
selArr.push($scope.orders[index]);
}
}
}
if(selArr.length > 0){
for(index in selArr){
for(index2 in $scope.orders){
if(selArr[index] == $scope.orders[index2]){
$scope.orders.splice(index2,1);
}
}
}
}else{
alert("先选择被选中的已发货商品");
}
}
//id排序
$scope.flag = "";
$scope.bname = "id";
$scope.pid = function(bname){
$scope.bname = bname;
if($scope.flag == ""){
$scope.flag = "-";
}else{
$scope.flag = "";
}
}
//价格排序
$scope.flag = "";
$scope.bname = "id";
$scope.pprice = function(bname){
$scope.bname = bname;
if($scope.flag == ""){
$scope.flag = "-";
}else{
$scope.flag = "";}
}
//时间排序
$scope.flag = "";
$scope.bname = "id";
$scope.ptime = function(bname){
$scope.bname = bname;
if($scope.flag == ""){
$scope.flag = "-";
}else{
$scope.flag = "";
}
}
//添加数据保存
$scope.show = false;
$scope.add = function(){
$scope.show = true;
}
$scope.s1 = false; var flag1 = false;
$scope.s2 = false; var flag2 = false;
$scope.s3 = false; var flag3 = false;
$scope.s4 = false; var flag4 = false;
$scope.s5 = false; var flag5 = false;
$scope.s6 = false; var flag6 = false;
$scope.keep = function(){
//判断id
if($scope.jid == "" || $scope.jid == null){
$("#j1").addClass("ya");
$("#i1").addClass("ya2");
$scope.s1 = true;
flag1 = false;
}else{
$scope.s1 = false;
$("#j1").removeClass("ya");
flag1 = true;
}
//判断商品名
if($scope.jsname == "" || $scope.jsname == null){
$("#j2").addClass("ya");
$("#i2").addClass("ya2");
$scope.s2 = true;
flag2 = false;
}else{
$scope.s2 = false;
$("#j2").removeClass("ya");
flag2 = true;
}
//判断用户名
if($scope.jyname == "" || $scope.jyname == null){
$("#j3").addClass("ya");
$("#i3").addClass("ya2");
$scope.s3 = true;
flag3 = false;
}else{
$scope.s3 = false;
$("#j3").removeClass("ya");
flag3 = true;
}
//判断手机号
if($scope.jtelnum == "" || $scope.jtelnum == null){
$("#j4").addClass("ya");
$("#i4").addClass("ya2");
$scope.s4 = true;
flag4 = false;
}else{
$scope.s4 = false;
$("#j4").removeClass("ya");
flag4 = true;
}
//判断价格
if($scope.jprice == "" || $scope.jprice == null){
$("#j5").addClass("ya");
$("#i5").addClass("ya2");
$scope.s5 = true;
flag5 = false;
}else{
$scope.s5 = false;
$("#j5").removeClass("ya");
flag5 = true;
}
//判断城市
if($scope.jcity == "" || $scope.jcity == null){
$("#j6").addClass("ya");
$("#i6").addClass("ya2");
$scope.s6 = true;
flag6 = false;
}else{
$scope.s6 = false;
$("#j6").removeClass("ya");
flag6 = true;
}
if(flag1 && flag2 && flag3 && flag4 && flag5 && flag6 ){
$scope.orders.push({
id:$scope.jid,
sname:$scope.jsname,
yname:$scope.jyname,
telnum:$scope.jtelnum,
price:$scope.jprice,
city:$scope.jcity
});
}
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<h3>商品订单管理系统</h3>
<table border="1" cellpadding="10" cellspacing="0">
<input type="button" value="新增订单" ng-click="add()" />
<input type="button" value="批量删除" ng-click="deleteSel()" />
<input type="text" placeholder="按照商品名称查询..." class="kuan" ng-model="search" />
<input type="text" placeholder="按照手机号查询..." class="sjh" ng-model="telNum" />
<select style="margin-left: 30px;" ng-model="orderStateSel">
<option value="">--按照状态查询--</option>
<option value="true">--已发货--</option>
<option value="false">--未发货--</option>
</select><br /><br />
<tr>
<th><input type="checkbox" ng-click="selectFun()" ng-model="selsectAll"/></th>
<th width="60px" align="center">id<input type="button" value="排序" ng-click="pid('id')"/></th>
<th>商品名</th>
<th width="50px">用户名</th>
<th>手机号</th>
<th width="80px">价格<input type="button" value="排序" ng-click="pprice('price')"/></th>
<th width="40px">城市</th>
<th>下单时间<input type="button" value="排序" ng-click="ptime('time')"/></th>
<th>状态</th>
</tr>
<tr ng-repeat="or in orders | filter:{sname:search,telnum:telNum,orderState:orderStateSel} | orderBy:flag+bname">
<td><input type="checkbox" ng-model="or.state"/></td>
<td>{{or.id}}</td>
<td>{{or.sname}}</td>
<td>{{or.yname}}</td>
<td>{{or.telnum}}</td>
<td>{{or.price | currency:"￥:"}}</td>
<td>{{or.city}}</td>
<td width="200px" align="center">{{or.time | date:"yyyy--MM-dd hh:mm:ss"}}</td>
<td width="120px" align="center">
<button style="background: green; border: none;" ng-show="or.orderState">已发货</button>
<button style="background: yellow; border: none;" ng-show="!or.orderState" ng-click="changeorderState(or)">未发货</button>
</td>
</tr>
</table><br /><br />
<fieldset style="width: 500px;" ng-show="show">
<legend>添加商品列表</legend><br /><br />
<div>
id<input type="text" style="margin-left: 12px;" ng-model="jid" id="j1"/> <input type="text" ng-show="s1" id="i1" placeholder="id不能为空"/><br /><br />
商品名<input type="text" ng-model="jsname" id="j2"/> <input type="text" ng-show="s2" id="i2" placeholder="商品名不能为空"/><br /><br />
用户名<input type="text" ng-model="jyname" id="j3"/> <input type="text" ng-show="s3" id="i3" placeholder="用户号不能为空"/><br /><br />
手机号<input type="text" ng-model="jtelnum" id="j4"/> <input type="text" ng-show="s4" id="i4" placeholder="手机号不能为空"/><br /><br />
价格 <input type="text" ng-model="jprice" id="j5"/> <input type="text" ng-show="s5" id="i5" placeholder="价格不能为空"/><br /><br />
城市 <select ng-model="jcity" id="j6">
<option value="">---选择城市</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="深圳">深圳</option>
</select> <input type="text" ng-show="s6" id="i6" placeholder="城市必须选择"/>
<br /><br />
<button ng-click="keep()">保存</button>
</div>
</fieldset>
</center>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 使用vue根据状态添加列表数据和删除列表数据的实例
- jQuery validate 根据上下文条件动态给字段添加或删除验证选项？
- 隔行变色，选中变色，鼠标变小手样式；姓名查询条件 过滤敏感字符 下拉列表排序 非空验证添加信息 点击按钮删除
- svn在linux下的使用（svn命令行）ubuntu 删除 新增 添加 提交 状态查询 恢复
- 监测程序详细介绍，快捷键的设置；txt文件里面一行行的读取、删除、添加字符串等；根据程序路径名以及程序名判断程序是否在运行；
- 转载Entity Framework 5.0（EF first）中的添加，删除，修改，查询，状态跟踪操作
- 给数组添加一个根据指定下标删除元素的方法、得到0-100的随机数不重复（js）、得到外联样式的css样式值
- svn在linux下的使用（svn命令行）ubuntu 删除 新增 添加 提交 状态查询 恢复
- 模拟月考，全选，ID排序，价格排序，状态，批量删除，添加，新增
- 用户名查询、手机号查询、选择城市、选择状态、选择月份、ID排序、添加数据、批量发货、批量删除、敏感字、修改数据）
- jquery validate 插件动态添加删除验证规则
- 我用JS写的一段创建TABLE，添加行，模糊匹配，根据CHECKBOX删除内容，创建标题的代码（删除完再添加行有计数器的BUG）
- 订单用户表1（用户查询 、手机号查询 、选择城市 、选择状态、月份查询 、ID排序 、添加数据、批量发货、批量删除）
- svn在linux下的使用（svn命令行）删除 新增 添加 提交 状态查询 恢...
- svn在linux下的使用（svn命令行）ubuntu 删除 新增 添加 提交 状态查询 恢复
- 刷新SQL Server所有视图、函数、存储过程 更多 sql 此脚本用于在删除或添加字段时刷新相关视图，并检查视图、函数、存储过程有效性。 [SQL]代码 --视图、存储过程、函数名称 DECLARE @NAME NVARCHAR(255); --局部游标 DECLARE @CUR CURSOR --自动修改未上状态为旷课 SET @CUR=CURSOR SCROLL DYNAMIC FO
- jquery 验证 添加 批量删除 全选/反选
- jQuery表单验证添加数据删除数据
- svn在linux下的使用（svn命令行）ubuntu 删除 新增 添加 提交 状态查询 恢复
- gridview添加,删除,编辑DropDownList 根据值对应相应的选择项