console
$(function() {
$('thead').find('.hover-content .list').click(function() {
var val = $(this).data('value'),
target = $(this).parents('ul').data('target');
$(target).val(val).parents('form').submit();
});
$('body').on('click', '[data-dismiss="modal"]', function() {
$(this).parents('.modal').addClass('hide');
});
$('body').on('click', '.filter-switch', function() {
$('.filter-detail').toggle();
});
$('.check-all').on('change', function() {
var check = $(this).prop('checked');
$(this).parents('table').find('.check-one').prop('checked', check);
});
$('.check-one').on('change', function() {
var table = $(this).parents('table'),
checkAll = table.find('.check-all');
if (table.find('.check-one:not(:checked)').length <= 0) {
checkAll.prop('checked', true);
} else {
checkAll.prop('checked', false);
}
});
$('body').on('click', '.hw-select', function(e) {
if ($(this).find('.hw-input').prop('disabled')) return;
var selectOptions = $(this).find('.select-options');
if (selectOptions.css('display') == 'none') {
selectOptions.slideDown(100);
} else {
selectOptions.slideUp(100);
}
});
$('body').on('mousedown', '.select-options .option', function() {
$(this).siblings().removeClass('selected');
$(this).addClass('selected');
$(this).parent().siblings('input').val($(this).data('value'));
$(this).parent().siblings('.show-option').html($(this).find('span').text());
});
$('body').on('blur', '.hw-select', function() {
var selectOptions = $(this).find('.select-options');
selectOptions.slideUp(100);
});
var clientH = window.screen.availHeight;
$('.hover-th').on('mouseenter', function(e) {
var top = e.clientY;
if (clientH - top <= 240) {
$(this).find('.hover-content').addClass('top-hover');
} else {
$(this).find('.hover-content').removeClass('top-hover');
}
});
});
$(function() {
$('.table-page').on('change', '.select', function() {
$(this).parents('form').submit();
});
var pageNum = $('#page-num'),
pElem = pageNum.parents('.page'),
max = pageNum.data('max') || 1,
url = pageNum.data('url'),
get = pageNum.data('get');
pageNum.on('change', function() {
var num = $(this).val(),
elem = null,
errorElem = null;
if (num <= max) {
location.href = url + '/' + num + get;
}
});
$(document).bind('keydown', function(e) {
if(event.keyCode == 13) {
var num = pageNum.val();
if (num && num <= max) {
location.href = url + '/' + num + get;
}
return false;
}
});
pageNum.on('input propertychange', function() {
var num = +$(this).val();
if (num < 1 || !/^[1-9]{1,}\d*$/.test(num)) {
return $(this).val(1);
}
if (num > max) {
return $(this).val(max);
}
});
});
<div class="hw-iframe">
<div class="hw-header-wrapper">
<div class="hw-header">
<div class="hw-header__item--left">
标题组件-右侧有操作按钮
</div>
<div class="hw-header__item--right">
<div class="hw-btn-group">
<button class="hw-btn--default">默认按钮</button>
<button class="hw-btn--normal">常态按钮</button>
<button class="hw-btn--hover"> 悬浮按钮 </button>
</div>
</div>
</div>
</div>
<div class="hw-filter-wrapper">
<div class="hw-filter">
<form method="GET" action="">
<div class="default-filter">
<div class="hw-input-label">
<div class="form-control">
<div class="hw-search-prevent">
<input type="text" id="company-name" class="hw-input" readonly="" value="">
<button class="search-btn" type="submit"><i class="iconfont"></i></button>
</div>
</div>
<div class="filter-switch" data-status="">更多筛选条件<i class="iconfont"></i></div>
</div>
<div class="filter-detail">
<div class="filter-item">
<div class="hw-select-wrapper">
<label class="name" for="">订单状态</label>
<div class="select-group">
<div class="select-input">
<input type="text" readonly="" placeholder="待发货">
<i class="iconfont"></i>
</div>
<div class="select-detail">
<div class="select-detail__item">待发货</div>
<div class="select-detail__item">待发货</div>
<div class="select-detail__item">待发货</div>
</div>
</div>
</div>
<div class="hw-input-label">
<div class="name">代码</div>
<div class="form-control">
<input class="hw-input" type="text" name="credit_code" value="">
</div>
</div>
<div class="hw-input-label">
<label class="name" for="">选择日期</label>
<div class="input-icon-group">
<input type="text" onclick="WdatePicker()" placeholder="选择日期">
<div class="icon-wrapper">
<i class="iconfont"></i>
</div>
</div>
</div>
<div class="hw-input-label">
<label class="name" for="">选择日期</label>
<div class="input-icon-group">
<input type="text" onclick="WdatePicker()" placeholder="选择日期">
<div class="icon-wrapper">
<i class="iconfont"></i>
</div>
</div>
</div>
<div class="hw-input-label">
<label class="name" for="">选择日期</label>
<div class="input-icon-group">
<input type="text" onclick="WdatePicker()" placeholder="选择日期">
<div class="icon-wrapper">
<i class="iconfont"></i>
</div>
</div>
</div>
<div class="operate-btns">
<button class="hw-btn hw-default-btn" type="reset"><i class="iconfont"></i>重置</button>
<button class="hw-btn"><i class="iconfont"></i>查询</button>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="main-table-wrap">
<form id="table-form" method="POST" action="">
<table cellspacing="0" cellpadding="0" border="0">
<colgroup>
<col class="col-3">
<col class="col-20">
<col class="col-6">
<col class="col-7">
<col class="col-4">
<col class="col-5">
<col class="col-10">
</colgroup>
<thead>
<tr>
<th>
<label for="radio1" class="hw-checkbox__label">
<input type="checkbox" class="hw-checkbox__input check-all">
<i class="iconfont"></i>
<i class="iconfont"></i>
</label>
</th>
<th>商品信息</th>
<th>数量<small>( 包 )</small></th>
<th>提货货值</th>
<th class="hover-th">
<span>订单状态<i class="iconfont"></i></span>
<div class="hover-content">
<ul class="info" data-target="#state">
<li class="list active" data-value="">全部</li>
<li class="list" data-value="1">待发货 </li>
<li class="list" data-value="2">待收货</li>
</ul>
</div>
</th>
<th>收件地址</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr class="order-title">
<td>
<label for="radio1" class="hw-checkbox__label">
<input type="checkbox" name="checkbox0" class="hw-checkbox__input check-one">
<i class="iconfont"></i>
<i class="iconfont"></i>
</label>
</td>
<td colspan="5">订单号：20171202120030<span>提交时间：2017-12-02 12:00:30</span></td>
<td class="opt"><i class="iconfont"></i></td>
</tr>
<tr>
<td>
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1251074959,534534460&fm=27&gp=0.jpg">
</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td class="opt">
<a class="blue-color" href=""><i class="iconfont"></i>编辑</a>
<a class="orange-color" href=""><i class="iconfont"></i>上架</a>
</td>
</tr>
<tr class="order-title">
<td>
<label for="radio1" class="hw-checkbox__label">
<input type="checkbox" name="checkbox0" class="hw-checkbox__input check-one">
<i class="iconfont"></i>
<i class="iconfont"></i>
</label>
</td>
<td colspan="5">订单号：20171202120030<span>提交时间：2017-12-02 12:00:30</span></td>
<td class="opt"><i class="iconfont"></i></td>
</tr>
<tr>
<td>
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1251074959,534534460&fm=27&gp=0.jpg">
</td>
<td>SoLove米菲纸尿裤 L码（50片*2包）</td>
<td>x 1000</td>
<td rowspan="2" class="border-left-1px">￥25666.00</td>
<td rowspan="2">待发货</td>
<td rowspan="2">张小花</td>
<td rowspan="2" class="opt">
<a class="blue-color" href=""><i class="iconfont"></i>编辑</a>
<a class="orange-color" href=""><i class="iconfont"></i>上架</a>
</td>
</tr>
<tr>
<td>
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1251074959,534534460&fm=27&gp=0.jpg">
</td>
<td>SoLove米菲纸尿裤 L码（50片*2包）</td>
<td>x 1000</td>
</tr>
</tbody>
</table>
</form>
<form action="" method="get">
<div class="table-page">
共2622条
<div class="page-nums">
<a class="pre disabled">上一页</a>
<a class="current" href="http://www.jfxm.com/Admin/AdminHouse/getHouseList/all/0/1?">1</a>
<a class="" href="http://www.jfxm.com/Admin/AdminHouse/getHouseList/all/0/2?">2</a>
<a class="" href="http://www.jfxm.com/Admin/AdminHouse/getHouseList/all/0/3?">3</a>
<a class="" href="http://www.jfxm.com/Admin/AdminHouse/getHouseList/all/0/4?">4</a>
<a class="" href="http://www.jfxm.com/Admin/AdminHouse/getHouseList/all/0/5?">5</a>
<a href="http://www.jfxm.com/Admin/AdminHouse/getHouseList/all/0/2?" class="next">下一页</a>
</div>
<span class="page" style="vertical-align: top;">
<span style="vertical-align: top;">前往</span>
<input style="vertical-align: middle; line-height: 30px;" type="text" name="" value="" class="turn-page-num" id="page-num" data-max="132" data-url="http://www.jfxm.com/Admin/AdminHouse/getHouseList/all/0" data-get="?">
<span>页</span>
</span>
</div>
</form>
</div>
</div>