各种查询排序

最新推荐文章于 2023-06-18 14:27:34 发布
最新推荐文章于 2023-06-18 14:27:34 发布
阅读量415 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wanglinuo521/article/details/79068163
版权
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../libs/jquery-1.11.0.min.js"></script>
<script src="../libs/angular.min.js"></script>
<style>
#div1 {
width: 800px;
height: 50PX;
background: yellow;
}

input {
margin-top: 10px;
}

table {
margin-top: 20px;
width: 800px;
height: 50PX;
text-align: center;
}

.inp1 {
background: #5CD6FF;
}

.true {
background: greenyellow;
}

.false {
background: yellow;
}

.div2 {
width: 800px;
border: 1px solid black;
}
/*隔行换色*/

tr:nth-of-type(odd) {
background: white;
}
/*隔行换色*/

tr:nth-of-type(even) {
background: #EEEEEE;
}
/*处焦换色*/

tr:nth-of-type(odd):hover {
background: blue;
}
/*处焦换色*/

tr:nth-of-type(even):hover {
background: blue;
}
</style>


</head>
<body ng-app="myapp" ng-controller="mycontroller">
<div id="div1">
<input type="button" value="新增订单" ng-click="xx1()" />
<input type="button" value="批量删除" style="margin-left: 20px;" ng-click="dele($index)" />
<input type="text" placeholder="按商品名查询" style="margin-left: 20px;" ng-keydown="huiche($event)" ng-model="name_s" />
<input type="text" placeholder="按手机号名查询" style="margin-left: 20px;" ng-keydown="huiche2($event)" ng-model="tell_s" />
<select ng-change="isFaHuo()" ng-model="fahuo" ng-init="fahuo='--按状态查询--'">
<option>--按状态查询--</option>
<option>已发货</option>
<option>未发货</option>
</select>
</div>
<table border="1px" cellspacing="0" cellpadding="0">


<tr style="background: grey;">
<td><input type="checkbox" /></td>
<td>id<input type="button" value="排序" class="inp1" ng-click="id_px()" /></td>
<td>商品名</td>
<td>用户名</td>
<td>手机号</td>
<td>价格<input type="button" value="排序" class="inp1" ng-click="price_px()" /></td>
<td>城市</td>
<td>下单日期 <input type="button" value="排序" class="inp1" ng-click="date_px()" /></td>
<td>状态</td>
</tr>


<tr ng-repeat="good in goods">
<td><input type="checkbox" ng-click="shifou($index)" /></td>
<td>{{good.id}}</td>
<td>{{good.gname}}</td>
<td>{{good.user}}</td>
<td>{{good.tel}}</td>
<td>{{good.price|currency:"￥："}}</td>
<td>{{good.city}}</td>
<td>{{good.time|date:"yyyy-MM-dd HH-mm-ss"}}</td>
<td><input type="button" value="{{good.state|myfilter}}" class="{{good.state}}" ng-click="fahuo1($index)" /></td>
</tr>
</table>
 
<fieldset class="div2" style="margin-top: 50px;" ng-show="show1">
<center>
 <h1>新增订单</h1>
 </center>
<legend>添加订单信息</legend>
<center>

商品名：<input type="text" id="s1" ng-model="shapp2" />
<span id="sp1"></span>
</br>
用户名：<input type="text" id="n1" ng-model="name2" />
<span id="sp2"></span>
</br>
手机号：<input type="text" id="t1" ng-model="tell1" />
<span id="sp3"></span>
</br>
价格为：<input type="text" id="p1" ng-model="price1" />
<span id="sp4"></span>
</br>
城&nbsp;&nbsp;&nbsp;市&nbsp;:
<select ng-change="changsi()" id="c1" ng-model="cs1" ng-init="cs1='--按状态查询--'" style="width: 180px;">
<option>--按状态查询--</option>
<option>河南</option>
<option>河北</option>
<option>山西</option>
</select>
<span id="sp5"></span>


</br>


<input type="button" value="保存" ng-click="bz()" />
</center>
</fieldset>
<script type="text/javascript">
var mo = angular.module("myapp", []);
mo.controller("mycontroller", function($scope) {


//初始数据


var arr = [{
"id": 2001,
"isChecked": false,
"gname": "iphoneX",
"user": "张三",
"tel": 12345678998,
"price": 8699.00,
"city": "北京",
"time": new Date(16666456).getTime(),
"state": false
}, {
"id": 3006,
"isChecked": false,
"gname": "iphone6",
"user": "lisi",
"tel": 132898765765,
"price": 5638.00,
"city": "郑州",
"time": new Date(1678645).getTime(),
"state": false
}, {
"id": 5312,
"isChecked": false,
"gname": "iphone7",
"user": "赵小龙",
"tel": 15072656676,
"price": 6180.00,
"city": "北京",
"time": new Date(12546546546543).getTime(),
"state": false
}, {
"id": 2132,
"isChecked": false,
"gname": "iphone8",
"user": "赵强",
"tel": 186765446788,
"price": 7190.00,
"city": "上海",
"time": new Date(167864554).getTime(),
"state": false
}];
//把数据赋给显示数组
$scope.goods = arr;
//回车查询商品名事件
$scope.huiche = function($event) {
var names_1 = []; //临时数组
var hui = $event.keyCode //获取回车事件的触发
var name = $scope.name_s; //获取输入框的值
if(hui == 13) { //回车 触发值是13
for(var i = 0; i < arr.length; i++) {
if(arr[i].gname.indexOf(name) != -1) { //循环获取数组的name值如果包含name值
names_1.push(arr[i]); //赋给我的临时数组
}
}
$scope.goods = names_1; //赋给显示数组
}


}


$scope.huiche2 = function($event) {
var tell_1 = []; //临时数组
var hui = $event.keyCode; //获取回车事件的触发
var tell = $scope.tell_s; //获取输入框的值
if(hui == 13) { //回车 触发值是13
for(var i = 0; i < arr.length; i++) { //循环获取数组的电话的值如果包含tell值
if(arr[i].tel.indexOf(tell)) {
tell_1.push(arr[i] != -1); //赋给我的临时数组
}


}
$scope.goods = tell_1; //赋给显示数组
}


}


$scope.fahuo1 = function($index) {
//状态赋值
arr[$index].state = !arr[$index].state;
}


$scope.isFaHuo = function() { //状态的下拉事件
var fh = []; //临时数组
var zt1 = $scope.fahuo; //取出状态
if(zt1 == "已发货") {
for(var i = 0; i < arr.length; i++) {
var f = arr[i].state; //取出state的值
if(f) { //等于true
fh.push(arr[i]); //赋值给临时数组
}
}
} else {
for(var i = 0; i < arr.length; i++) {
var f1 = arr[i].state; //取出state的值
if(f1 == false) { //等于false
fh.push(arr[i]); //赋值给临时数组
}
}
}


$scope.goods = fh; //赋给显示数组
//跟据状排序
//id排序
var id_flas1 = false; //标识符
$scope.id_px = function() {
//死格式
if(id_flas1 == false) {
fh.sort(function(a, b) {
return a.id - b.id
})
} else {
fh.sort(function(a, b) {
return b.id - a.id
})
}
id_flas1 = !id_flas1
}


var price_flas2 = true; //标识符
//价格排序
$scope.price_px = function() {
if(price_flas2) {
fh.sort(function(a, b) {
return a.price - b.price
})
} else {
fh.sort(function(a, b) {
return b.price - a.price
})
}
price_flas2 = !price_flas2


}


var deta_flas2 = true; //标识符
//时间排序
$scope.date_px = function() {
if(deta_flas2) {
fh.sort(function(a, b) {
return a.time - b.time
})
} else {
fh.sort(function(a, b) {
return b.time - a.time
})
}
deta_flas2 = !deta_flas2
}


}


//根据未选状态排序
var id_flas = false; //标识符
//id排序
$scope.id_px = function() {
if(id_flas == false) {
arr.sort(function(a, b) {
return a.id > b.id
})
} else {
arr.sort(function(a, b) {
return a.id < b.id
})
}
id_flas = !id_flas
}
var price_flas = false; //标识符
//价格排序
$scope.price_px = function() {
if(price_flas == false) {
arr.sort(function(a, b) {
return a.price > b.price
})
} else {
arr.sort(function(a, b) {
return a.price < b.price
})
}
price_flas = !price_flas


}
var deta_flas = false; //标识符
//时间排序
$scope.date_px = function() {
if(deta_flas == false) {
arr.sort(function(a, b) {
return a.time > b.time
})
} else {
arr.sort(function(a, b) {
return a.time < b.time
})
}
deta_flas = !deta_flas
}
//获取checked的状态值
$scope.shifou = function($index) {
$scope.goods[$index].isChecked = !$scope.goods[$index].isChecked
}
//批量删除
$scope.dele = function($index) {
for(var i = $scope.goods.length - 1; i >= 0; i--) { //循环显示数组
var ss = $scope.goods[i].state; //取出state的值
var vv = $scope.goods[i].isChecked; //取出isChecked的值
if(vv && ss) { //都为true
$scope.goods.splice(index, 1) //删除
}
}
}
//点击的新增时间
$scope.xx1 = function() {
$scope.show1 = true; //让div显示


}


$scope.bz = function() {


var sh2 = $scope.shapp2;
var flas = true;
if(sh2 == "" || sh2 == null) {


$("#s1").css({
"border": "1px solid pink"


});
$("#sp1").html("商品不能为空")


flas = false;
return
} else {
$("#s1").css({
"border": "1px solid black "
});
$("#sp1").html("")
flas = true;
}


var name2 = $scope.name2;
var flas1 = true;
if(name2 == "" || name2 == null) {


$("#n1").css({
"border": "1px solid red"
});
$("#sp2").html("用户名不能为空")
flas1 = false;
return
} else {
$("#n1").css({
"border": "1px solid black "
});


$("#sp2").html("")
flas1 = true;
}


var tell1 = $scope.tell1;


var flas2 = true;
if(tell1 == "" || tell1 == null) {


$("#t1").css({
"border": "1px solid red"
});
$("#sp3").html("手机号不能为空")
flas2 = false;
return
} else {
$("#sp3").html("")
$("#t1").css({
"border": "1px solid black "
});
flas2 = true;


}


var price1 = $scope.price1;
var flas3 = true;
if(price1 == "" || price1 == null) {


$("#p1").css({
"border": "1px solid red"
});
$("#sp4").html("价格不能为空")


flas3 = false;
return
} else {
$("#sp4").html("")
$("#p1").css({
"border": "1px solid black "
});
flas3 = true;
}


var cs1 = $scope.cs1;
var flas4 = true;
if(cs1 == "" || cs1 == null || cs1 == "--按状态查询--") {


$("#c1").css({
"border": "1px solid red"
});
$("#sp5").html("请选择城市")
flas4 = false;
return
} else {
$("#sp5").html("")
$("#c1").css({
"border": "1px solid black "
});
flas4 = true;
}


if(flas == true && flas1 == true && flas2 == true && flas3 == true && flas4 == true) {
//随机数0-9999
var aa = Math.random() * 10000;
//化为整数
var vv = Math.floor(aa);


var arr1 = {


"id": vv,
"isChecked": false,
"gname": $scope.shapp2,
"user": $scope.name2,
"tel": $scope.tell1,
"price": $scope.price1,
"city": $scope.cs1,
"time": new Date(25687548).getTime(),
"state": false
}
$scope.show1 = false;//添加成功 隐藏div
arr.push(arr1);//把对象赋给初始数据arr
$scope.goods = arr;//arr赋给显示数据
//把输入框赋为空
$scope.shapp2 = "";
$scope.name2 = "";
$scope.tell1 = "";
$scope.price1 = "";
//赋给初始属性
$scope.cs1 = "--按状态查询--";//


}


}


})
                //根据返回的数据确认state的值
mo.filter("myfilter", function() {
return function(input) {
if(input) {
return "已发货";//是true赋值为已发货
} else {
return "未发货";//是false赋值为已发货
}
return input;
}
})
</script>


</body>
</html>
wanglinuo521
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
查找和排序的基本操作：查找排序算法大集合
dengquanyan6606的博客
07-28 1546
重点 查找算法着重掌握：顺序查找、二分查找、哈希表查找、二叉排序树查找。 排序算法着重掌握：冒泡排序、插入排序、归并排序、快速排序。 顺序查找 算法说明 顺序查找适合于存储结构为顺序存储或链接存储的线性表。 算法思想 顺序查找也称为线形查找，属于无序查找算法。从数据结构线形表的一端开始，顺序扫描，依次将扫描到的结点关键字与给定值k相比较，若相等则表示查找成功；若扫描结束仍没...
MySQL查询优化:连接查询排序浅谈
09-10
总之，对于MySQL查询优化，需要深入理解数据库的工作原理，结合EXPLAIN分析查询执行计划，并结合实际数据分布和业务需求，灵活运用各种优化技巧。只有这样，才能有效地提升查询效率，确保数据库系统的高性能运行。
9.排序查询（select from where order by（asc|desc））
SLSLSLSLSLSLS的博客
07-07 6859
进阶三:排序查询 引入: SELECT * FROM 表名; /* 语法: select * from table where 筛选条件 order by 排序列表 asc|desc(默认升序) 支持多个字段,单个字段,表达式,函数,别名 order by一般放在最后, limit子句除外 */ # 案例: 查询员工信息从薪水高到低显示 #select * from table order by salary desc SELECT * FROM employees ORDE
查找与排序（Find ＆ Sort）
柳小白的博客
08-13 2826
查找 一、顺序查找：从线性表的第一个元素开始，逐个将线性表的元素与被查元素比较。在平均情况下，大约需要比较n/2次 特殊情况： ①线性表是无序表，不管是顺序存储结构还是链式存储结构，都只能用顺序查找 ②线性表是有序的，如果采用链式存储结构，只能用顺序查找 二、二分法查找 线性表条件： ①用顺序存储结构； ②线性表是有序表（元素按非递减排列）； 与中间项比较。最多比log2（n）次 排序 排序：将一个无序序列整理为按值非递减顺序排序的一种方式 逆序：序列中，如果某个元素其后存在一个元素小于它，则称存
【数据结构】查找排序_复习笔记总结
Texcavator的博客
06-18 1277
二叉排序树是一颗空树，或者满足：左子树比根小，右子树比根大，且左右子树都是二叉排序树中序遍历一棵二叉排序树可以得到递增的有序序列。
3.基础查询与排序
liujiesxs的博客
07-11 159
SELECT子句、WHERE子句、GROUP BY子句、HAVING子句、ORDER BY子句
aew数据库查询排序.rar
10-11
在“aew数据库查询排序.rar”这个压缩包中，包含了使用该控件的相关示例。KVADODBGRID提供了直观的界面，使得开发者可以轻松地将数据库字段映射到控件的列，并支持用户交互，例如点击列头进行排序。 接下来，我们...
使用c实现各种排序
05-22
用C实现各种排序，包括希尔排序，快排（改进），插入排序，堆排序，冒泡和冒泡改进
VB 查询结果排序
06-08
4. **SQL查询排序**： 在执行SQL查询时，可以直接在SQL语句中使用`ORDER BY`子句对结果进行排序。例如，`SELECT * FROM TableName ORDER BY FieldName ASC/DESC`。这种方法适用于与数据库交互时，结果集在数据库端...
SQL order by ID desc/asc加一个排序的字段解决查询慢问题
09-10
在给定的问题中，"SQL order by ID desc/asc加一个排序的字段解决查询慢问题"是一个常见的数据库优化技巧。这个问题的根源在于`ORDER BY ID DESC`或者`ORDER BY ID ASC`可能导致性能下降，因为这种排序方式可能不是...
查找和排序
12-21
关于排序的7个算法，包括插入排序，希尔排序，交换排序，快速排序，选择排序，堆排序，归并排序，基数排序
排序+匹配+查找算法
03-18
排序：归并排序，希尔排序，快速排序，堆排序 匹配：KMP,BM,Sunday,KR,Horspool 查找：二分查找
sql查询排序
qq_45713342的博客
01-04 5350
查询排序 如果需要针对查询后的结果，按照指定的数据列进行排序操作，就必须使用ORDER BY 默认排序：按照数据的插入顺序。 select * from emp;观察 语法格式 【3控制要显示的数据列】SELECT[DISTINCT]*|列名称[别名]，列名称[别名]，…… 【1确定数据来源】FROM 表名称[别名] 【2确定满足条件的数据行】[WHERE 过滤条件I(S)] 【4针对查询结果进行排序】[ORDER BY 字段[ASC|DESC]...
排序查询（order by）——MySQL
mankeywang的博客
04-06 1589
文章目录排序查询排序查询导图格式例题 排序查询 排序查询导图 格式 order by 排序列表 [asc/desc]（升序、降序） select [查询列表] from [表[] where [筛选条件] order by 排序列表 [asc/desc]（升序、降序） 特点： asc：升序，desc：降序，如果不写默认是升序 order by 子句支持单个字段、多的字段、表达式、函数、别名 order by 子句一般放在查询语句的最后面 例题 查询员工信息要求工资从高到低排序 select
数据库排序查询
AiShengHuo的博客
11-12 1712
GreenDao 按时间排序 ，可以再表中创建一个时间戳字段，System.currentTimeMillis()　　你保存时间类型应该就可以了。实在不行搞个时间错保存long
9个元素换6次达到排序序列_软件设计师考点整理：排序与查找
weixin_39980917的博客
11-24 135
【考法分析】1、本知识点的主要考查形式有：给定情景描述，指出适用的排序方法；指出特定排序方法的时间复杂度、空间复杂度；指出二分查找的比较次数、比较对象、时间复杂度；指出散列表查找的相关概念描述是否正确。【要点分析】1、顺序查找的思想：将待查找的关键字为key的元素从头到尾与表中元素进行比较，如果中间存在关键字为key的元素，则返回成功；否则，则查找失败。2、二分法查找的基本思想是：（设R[low,...
SQL 排序查询
侯春强的博客
08-28 1770
-- 排序查询(查询排序) 查询排序使用 Sql语句ORDER BY子句实现，主要针对查询后的结果根据指定的数据列进行排序。 ORDER BY 的使用 排序查询的基本语法： SELECT [DISTINCT] 列名 [[AS] 别名] FROM 表名 [表的别名] [WHERE 条件] [ORDER BY] 列名 [ASC|DESC]; 注意：错误，DISTINCT 后，查询的其它字段被消
MySQL中DQL语言之排序查询
仰望与追逐的博客
04-03 152
MySQL中DQL语言之排序查询一、语法二、特点 一、语法 select 查询列表 from 表 where 筛选条件 order by 排序列表 【asc}desc】 二、特点 1、asc ：升序，如果不写默认升序; desc：降序 2、排序列表 支持 单个字段、多个字段、函数、表达式、别名 3、order by的位置一般放在查询语句的最后（除limit语句之外） 以上就是关于mysql...
ES怎么做查询分页排序？
最新发布
07-09
1. 查询条件：您可以使用各种查询类型（如match、term、range等）来指定您的查询条件。 2. 分页：使用`from`和`size`参数来指定要返回的结果的起始位置和大小。`from`参数表示从第几个结果开始返回，`size`参数表示...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值