生活随笔
收集整理的這篇文章主要介紹了
JS_综合，全面性增删改查，多条件查询，排序，点击发货
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
=======================================================================================
<!DOCTYPE html>
<html ng-app="OrderApp">
<head><meta charset="UTF-8"><title>訂單管理
</title><script type="text/javascript" src="../jquery.1.12.4.js"></script><script type="text/javascript" src="../angular-1.3.0.js"></script><script type="text/javascript" src="data.js"></script><style type="text/css">* {
font-size:
14px;
margin:
0;
padding:
0;}
body {
padding:
16px 32px;}.
filter {
position:
relative;
width:
800px;
height:
40px;
margin:
0 auto;}.
filter input {
width:
152px;
height:
24px;
border:
1px solid #999;
border-radius:
4px;
padding-left:
8px;}.
filter select {
width:
86px;
height:
24px;
border:
1px solid #999;
border-radius:
4px;}.
buttons {
width:
800px;
height:
40px;
margin:
0 auto;}.
buttons button {
width:
80px;
height:
24px;
background-color:
green;
border:
0;
border-radius:
4px;
color:
white;}.
buttons .
remove_btn {
background-color:
red;}.
list {
width:
800px;
margin:
0 auto;}.
list table tr {
height:
32px;}.
list thead tr {
background-color:
#777;}.
list tbody tr:
nth-child(
odd) {
background-color:
#ccc;}.
list tbody tr:
nth-child(
even) {
background-color:
#fff;}.
list button {
width:
40px;
height:
18px;
line-height:
18px;
background-color:
green;
border:
0;
border-radius:
4px;
color:
white;
font-size:
8px;}.
form {
width:
460px;
border:
1px solid #999;
margin:
0 auto;}.
form div {
clear:
both;}.
form .
formErr {
border:
1px solid red;}.
form .
label {
display:
block;
float:
left;
width:
80px;
height:
40px;
line-height:
40px;
text-align:
end;}.
form .
txt {
display:
block;
float:
left;
width:
340px;
height:
40px;
line-height:
40px;
padding-left:
16px;}.
form input {
width:
312px;
height:
24px;
border:
1px solid #999;
border-radius:
4px;
padding-left:
8px;}.
form select {
width:
86px;
height:
24px;
border:
1px solid #999;
border-radius:
4px;}.
form button {
width:
56px;
height:
24px;
background-color:
green;
border:
0;
border-radius:
4px;
color:
white;}.
form .
errTips {
width:
226px;
background-color:
lightpink;
color:
darkred;
border-radius:
4px;
margin-left:
96px;
margin-top:
6px;
margin-bottom:
4px;
padding:
16px 48px;}
</style><script type="text/javascript">// 全選/全不選
$(
function () {
$(
"input[name='check_all']").
click(
function () {
var checked =
this.
checked;
// 獲取 <input type="checkbox" name="check_all"/> 中checked屬性的值
$(
"input[name='order_id[]']").
each(
function () {
this.
checked =
checked;
// 依次設置每一個 <input type="checkbox" name="order_id[]"/> 中checked屬性的值
});});});
var app =
angular.
module(
"OrderApp", []);
app.
controller(
"OrderCtrl",
function ($scope) {$scope.
data =
data;
var id =
12;$scope.
filterByMonth =
function (order) {
if ($scope.filter_begin_month ==
undefined || $scope.filter_begin_month ==
"") {
return true;}
if ($scope.filter_end_month ==
undefined || $scope.filter_end_month ==
"") {
return true;}
var beginMonth =
parseInt($scope.filter_begin_month);
var endMonth =
parseInt($scope.filter_end_month);
if (
beginMonth >
endMonth) {
return true;}
var month = order.
dtCreated.
substr(
0, order.
dtCreated.
indexOf(
"-"));
month =
parseInt(
month);
return (
month >=
beginMonth &&
month <=
endMonth);};
// 發貨
$scope.
deliver =
function (id) {
for (
var i in $scope.
data) {
if ($scope.
data[
i].id == id) {$scope.
data[
i].
status =
"已發貨";}}};
// 批量發貨
$scope.
batchDeliver =
function () {
$(
"input[name='order_id[]']:checked").
each(
function () {$scope.
deliver(
this.id);});};
// 刪除
$scope.
remove =
function (id) {
for (
var i in $scope.
data) {
if ($scope.
data[
i].id == id) {$scope.
data.
splice(
i,
1);}}};
// 批量刪除
$scope.
batchRemove =
function () {
$(
"input[name='order_id[]']:checked").
each(
function () {$scope.
remove(
this.id);});};$scope.
isShowAddOrderForm =
false;$scope.
showAddOrderForm =
function () {$scope.
isShowAddOrderForm =
true;};$scope.
errTips = [];$scope.
submitAddOrderForm =
function () {$scope.
errTips = [];$scope.
goodsNameClassName =
"";$scope.
userNameClassName =
"";$scope.
phoneClassName =
"";$scope.
hasErr =
false;
if ($scope.
goodsName ==
undefined || $scope.
goodsName ==
"" || $scope.
goodsName.
trim() ==
"") {$scope.
errTips.
push(
"商品名不能為空！");$scope.
goodsNameClassName =
"formErr";$scope.
hasErr =
true;}
if ($scope.
userName ==
undefined || $scope.
userName ==
"" || $scope.
userName.
trim() ==
"") {$scope.
errTips.
push(
"用戶名不能為空！");$scope.
userNameClassName =
"formErr";$scope.
hasErr =
true;}
if ($scope.
phone ==
undefined || $scope.
phone ==
"" || $scope.
phone.
trim() ==
"") {$scope.
errTips.
push(
"手機號不能為空！");$scope.
phoneClassName =
"formErr";$scope.
hasErr =
true;}
if ($scope.
city ==
undefined || $scope.
city ==
"" || $scope.
city.
trim() ==
"") {$scope.
errTips.
push(
"請選擇城市！");$scope.
hasErr =
true;}
if ($scope.
goodsName.
trim().
length <
6 || $scope.
goodsName.
trim().
length >
20) {$scope.
errTips.
push(
"商品名必須是6-20個字符！");$scope.
goodsNameClassName =
"formErr";$scope.
hasErr =
true;}
if ($scope.
userName.
trim().
length <
4 || $scope.
userName.
trim().
length >
16) {$scope.
errTips.
push(
"用戶名必須是4-16個字符！");$scope.
userNameClassName =
"formErr";$scope.
hasErr =
true;}
if ($scope.
phone.
trim().
length !=
11) {$scope.
errTips.
push(
"手機號格式不正確！");$scope.
phoneClassName =
"formErr";$scope.
hasErr =
true;}
if ($scope.
hasErr) {
return;}$scope.
data.
push({
id: ++
id,
goodsName: $scope.
goodsName,
userName: $scope.
userName,
phone: $scope.
phone,
price:
4550.00,
city: $scope.
city,
dtCreated:
"10-16 10:00",
status:
"待發貨"
});};});
</script>
</head>
<body ng-controller="OrderCtrl">
<div class="filter"><input type="text" placeholder="用戶名搜索" ng-model="filter_user_name"/><input type="text" placeholder="手機號搜索" ng-model="filter_phone"/><select class="choose_city" ng-model="filter_city"><option value="">選擇城市
</option><option value="北京">北京
</option><option value="上海">上海
</option><option value="天津">天津
</option><option value="重慶">重慶
</option></select><select class="choose_status" ng-model="filter_status"><option value="">選擇狀態
</option><option value="待發貨">待發貨
</option><option value="已發貨">已發貨
</option><option value="已收貨">已收貨
</option></select><select class="choose_time_begin_month" ng-model="filter_begin_month"><option value="">開始月份
</option><option value="1">01
</option><option value="2">02
</option><option value="3">03
</option><option value="4">04
</option><option value="5">05
</option><option value="6">06
</option><option value="7">07
</option><option value="8">08
</option><option value="9">09
</option><option value="10">10
</option><option value="11">11
</option><option value="12">12
</option></select> -
<select class="choose_time_end_month" ng-model="filter_end_month"><option value="">結束月份
</option><option value="1">01
</option><option value="2">02
</option><option value="3">03
</option><option value="4">04
</option><option value="5">05
</option><option value="6">06
</option><option value="7">07
</option><option value="8">08
</option><option value="9">09
</option><option value="10">10
</option><option value="11">11
</option><option value="12">12
</option></select><select class="id_order" ng-model="id_order_type"><option value="">ID排序
</option><option value="id">ID正序
</option><option value="-id">ID倒序
</option></select>
</div><div class="buttons"><button class="add_btn" ng-click="showAddOrderForm();">新增訂單
</button><button class="deliver_btn" ng-click="batchDeliver()">批量發貨
</button><button class="remove_btn" ng-click="batchRemove()">批量刪除
</button>
</div><div class="list"><table width="800px" cellspacing="0" rules="cols" border="1px"><thead><tr><th width="4%"><input type="checkbox" name="check_all"/></th><th width="6%">ID
</th><th width="12%">商品名
</th><th width="10%">用戶名
</th><th width="14%">手機號
</th><th width="10%">價格
</th><th width="10%">城市
</th><th width="18%">下單時間
</th><th width="8%">狀態
</th><th width="8%">操作
</th></tr></thead><tbody><tr align="center"
ng-repeat="order in data | filter: {userName: filter_user_name} | filter: {phone: filter_phone} | filter: {city: filter_city} | filter: {status: filter_status} | filter: filterByMonth | orderBy: id_order_type"><td><input type="checkbox" name="order_id[]" id="{{ order.id }}"/></td><td>{{
order.id }}
</td><td>{{
order.
goodsName }}
</td><td>{{
order.
userName }}
</td><td>{{
order.
phone }}
</td><td>{{
order.
price |
currency: "￥"}}
</td><td>{{
order.
city }}
</td><td>{{
order.
dtCreated }}
</td><td><span ng-show="order.status=='待發貨'" ng-click="deliver(order.id)"><a href="javascript: void(0);">發貨
</a></span><span ng-show="order.status=='已發貨'">已發貨
</span><span ng-show="order.status=='已收貨'">已收貨
</span></td><td><a href="javascript: void(0);" ng-click="remove(order.id)">刪除
</a></td></tr></tbody></table>
</div><div class="form" ng-show="isShowAddOrderForm"><div><span class="label">新增訂單
</span><span class="txt"></span></div><div><span class="label">商品名
</span><span class="txt"><input type="text" placeholder="6-20個字符" ng-model="goodsName" ng-class="goodsNameClassName"/></span></div><div><span class="label">用戶名
</span><span class="txt"><input type="text" placeholder="4-16個字符" ng-model="userName" ng-class="userNameClassName"/></span></div><div><span class="label">手機號
</span><span class="txt"><input type="text" ng-model="phone" ng-class="phoneClassName"/></span></div><div><span class="label">城市
</span><span class="txt"><select ng-model="city"><option value="">選擇城市
</option><option value="北京">北京
</option><option value="上海">上海
</option><option value="天津">天津
</option><option value="重慶">重慶
</option></select></span></div><div class="errTips" ng-show="hasErr"><ul><li ng-repeat="msg in errTips">{{
msg }}
</li></ul></div><div><span class="label"></span><span class="txt"><button ng-click="submitAddOrderForm()">提交
</button></span></div><div style="clear:
both"></div>
</div>
</body>
</html>
=====================================數組的數據========================
var data = [{
id:
1,
goodsName:
"iPhone 8 Plus",
userName:
"曹操",
phone:
"15111111111",
price:
7588.00,
city:
"北京",
dtCreated:
"09-04 10:00",
status:
"已發貨"
},{
id:
2,
goodsName:
"華為 暢享6S",
userName:
"劉備",
phone:
"15222222222",
price:
899.00,
city:
"天津",
dtCreated:
"08-09 10:00",
status:
"已發貨"
},{
id:
3,
goodsName:
"努比亞Z17",
userName:
"孫權",
phone:
"15333333333",
price:
2099.00,
city:
"上海",
dtCreated:
"07-01 10:00",
status:
"待發貨"
},{
id:
4,
goodsName:
"三星 Galaxy S7",
userName:
"司馬懿",
phone:
"15444444444",
price:
2999.00,
city:
"北京",
dtCreated:
"06-02 10:00",
status:
"已發貨"
},{
id:
5,
goodsName:
"魅藍5S",
userName:
"夏侯淳",
phone:
"15555555555",
price:
999.00,
city:
"北京",
dtCreated:
"10-03 10:00",
status:
"已發貨"
},{
id:
6,
goodsName:
"三星 Galaxy Note8",
userName:
"張遼",
phone:
"15666666666",
price:
2599.00,
city:
"北京",
dtCreated:
"04-02 10:00",
status:
"已收貨"
},{
id:
7,
goodsName:
"OPPO R9sk",
userName:
"關羽",
phone:
"15777777777",
price:
4999.00,
city:
"北京",
dtCreated:
"03-09 10:00",
status:
"已發貨"
},{
id:
8,
goodsName:
"紅米Note4X",
userName:
"張飛",
phone:
"15888888888",
price:
999.00,
city:
"上海",
dtCreated:
"05-18 10:00",
status:
"已收貨"
},{
id:
9,
goodsName:
"紅米5A",
userName:
"周瑜",
phone:
"15999999999",
price:
599.00,
city:
"重慶",
dtCreated:
"06-16 10:00",
status:
"待發貨"
},{
id:
10,
goodsName:
"小米Mix2",
userName:
"黃蓋",
phone:
"13111111111",
price:
3299.00,
city:
"北京",
dtCreated:
"03-15 10:00",
status:
"待發貨"
},{
id:
11,
goodsName:
"小米Note5",
userName:
"黃忠",
phone:
"13222222222",
price:
699.00,
city:
"重慶",
dtCreated:
"02-28 10:00",
status:
"待發貨"
},{
id:
12,
goodsName:
"VIVO X20",
userName:
"趙云",
phone:
"13333333333",
price:
2998.00,
city:
"上海",
dtCreated:
"08-22 10:00",
status:
"已發貨"
}
];
總結
以上是生活随笔為你收集整理的JS_综合，全面性增删改查，多条件查询，排序，点击发货的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
