<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
</head>
<body>
<div class="search layui-form" lay-filter="search">
<div style="width: 860px;margin: 100px auto">
<div class="price layui-inline">
<div class="layui-inline">
<label class="layui-form-label">范围</label>
<div class="layui-input-inline" style="width: 100px;">
<input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input"
required lay-verify="required">
</div>
<div class="layui-form-mid">-</div>
<div class="layui-input-inline" style="width: 100px;">
<input type="text" name="price_max" placeholder="￥" autocomplete="off" class="layui-input"
required lay-verify="required">
</div>
</div>
<div class="layui-inline">
<button class="layui-btn" lay-submit lay-filter="price">搜索</button>
</div>
</div>
<div class="name layui-inline">
<div class="">
<label class="layui-form-label">按名称搜索</label>
<div class="layui-input-inline">
<input required placeholder="请输入类型" autocomplete="off" class="layui-input" name="name">
</div>
<div class="layui-inline">
<div class="layui-btn name">搜索</div>
</div>
<div class="layui-inline">
<div class="layui-btn desc">价格排序</div>
</div>
</div>
</div>
</div>
<div class="table" style="width: 700px;margin: 0 auto">
<table class="layui-table">
<colgroup>
<col width="150">
<col width="200">
<col>
</colgroup>
<thead>
<tr>
<th>id</th>
<th>产品名称</th>
<th>价格</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.8.3/jquery.js"></script>
<script src="https://www.layuicdn.com/layui/layui.js"></script>
<script>
var flag = true;
Array.prototype.price = function (type, atr) {
var compare = function (atr) {
return function (a, b) {
var value1 = a[atr];
var value2 = b[atr];
return value1 - value2
}
}
var arr = this.sort(compare(atr));
if (type == 1) {
return arr;
} else {
return arr.reverse();
}
}
layui.use(['form'], function () {
var form = layui.form;
form.on('submit(price)', function (data) {
var arr1 = arr.filter(function (item) {
return Number(data.field.price_min) <= Number(item.price) && Number(item
.price) <= Number(data.field.price_max)
})
console.log(arr1)
edit(arr1);
})
});
$('.name.layui-btn').click(function () {
if ($('input[name="name"]').val() == '') {
layer.msg('品牌不能为空');
return;
}
var arr1 = arr.filter(function (item) {
return item.name == $('input[name="name"]').val();
})
edit(arr1);
})
var arr = [{
id: 1,
name: '小米',
price: 3999
}, {
id: 2,
name: 'oppo',
price: 999
}, {
id: 3,
name: '荣耀',
price: 1299
}, {
id: 4,
name: '华为',
price: 1999
}];
edit(arr);
function edit(arr) {
var str = '';
arr.forEach(function (item) {
str +=
` <tr>
<td>${item.id}</td>
<td>${item.name}</td>
<td>${item.price}</td>
</tr>`
})
$('tbody').html(str);
}
$('.desc').click(function () {
if (flag) {
flag = false;
arr.price(1, 'price');
edit(arr);
} else {
flag = true;
arr.price(0, 'price')
edit(arr);
}
})
</script>
</html>
实现功能
- 给Array原型对象添加排序方法 price 可以通过价格实现正反排序 Array.prototype.price
2.通过forEach方法遍历数组，实现DOM添加
3.通过filter方法实现数据的筛选
图1.png
图2.png
图3.png
正序
正序.png
反序
反序.png
网友评论