这里主要实现一个页面有两个分页,实现勾选互不影响,提交数据
php后端--这里需要去了解一下display和fetch的区别去看手册吧
public function couponAdd(){
$this->display('couponAdd');
}
public function product($model='product',$keyword=''){
$keyword=I('keyword');
if($keyword!=''){
$where['name|commodity_code']=['like','%'.$keyword."%"];
}
$title=I('cid',' ');
if($title!=null){
$proMap['cid']=$title;
$proMap['status']=2;
$specs=M('product_specs')->where($proMap)->field('product_id')->select();
}
if($specs){
$where['id']=['in',implode(',',array_unique(array_column($specs, 'product_id')))];
}
$map['status']=1;
$lists=M('product_category')->where($map)->select();
//获取列表数据
//统计要查询数据的数量
$page_size =1;//评论根据系统设置查询的条数
$page = intval($_REQUEST['p']);
if(empty($page))$page = 1;
$limit = (($page-1)*$page_size).",".$page_size ;
$where['status']=1;
$list = M($model)->where($where)->order('id desc')->limit($limit)->select();
$count[0]['count'] = M($model)->where($where)->count("*");
//end
$param = '';
$Page = new \Think\Ajaxpage($count[0]['count'],$page_size, indexc,$param);// 实例化分页类 传入总记录数和每页显示的记录数(25)
$show = $Page->show();// 分页显示输出
$this->assign('titId',$title);
$this->assign('keyword',$keyword);
$this->assign('pageProduct',$show);
$this->assign('list',$lists);
$this->assign('product', $list);
$html['content'] = $this->fetch('product');
$this->ajaxReturn($html);
}
public function category($model='product_category',$keywords=''){
//获取列表数据
//统计要查询数据的数量
$keywords=I('keywords');
if($keywords!=''){
$where['title']=['like','%'.$keywords."%"];
}
$page_size = C('LIST_ROWS');
$page = intval($_REQUEST['p']);
if(empty($page))$page = 1;
$limit = (($page-1)*$page_size).",".$page_size ;
//让分页支持多条件查询
$where['status']=1;
$list = M($model)->where($where)->order('id desc')->limit($limit)->select();
$count[0]['count'] = M($model)->where($where)->count("*");
$param = '';
//$map['status'] = array('gt',1);
$Page = new \Think\Ajaxpage($count[0]['count'],$page_size, indexs,$param);// 实例化分页类 传入总记录数和每页显示的记录数(25)
$show = $Page->show();// 分页显示输出
$this->assign('keywords',$keywords);
$this->assign('pageCate',$show);
$this->assign('listCate', $list);
$html['content'] = $this->fetch('category');
$this->ajaxReturn($html);
}
还有一个问题就是分页问题,这里都想不到咋处理,你可以在Think这个中添加一下代码,然后命名Ajaxpage.php,这里可以在url地址栏中不显示分页提交的数据
<?php
/**
* ajax分页类,有namespace,使用方法:
* 控制器直接$ajaxpage = new \Think\Ajaxpage($p1,$p2,$p3);
* @param unknowtype
* @return return_type
* @author jachin 2020-04-17
*/
namespace Think;
class Ajaxpage {
// 分页栏每页显示的页数
public $rollPage = 5;
// 页数跳转时要带的参数
public $parameter ;
// 默认列表每页显示行数
public $listRows = 20;
// 起始行数
public $firstRow ;
// 分页总页面数
protected $totalPages ;
// 总行数
protected $totalRows ;
// 当前页数
protected $nowPage ;
// 分页的栏的总页数
protected $coolPages ;
// 分页显示定制
protected $config = array('header'=>'条记录','prev'=>'上一页','next'=>'下一页','first'=>'第一页','last'=>'最后一页','theme'=>' %totalRow% %header% %nowPage%/%totalPage% 页 %upPage% %downPage% %first% %prePage% %linkPage% %nextPage% %end%');
// 默认分页变量名
protected $varPage;
public function __construct($totalRows,$listRows='',$ajax_func,$parameter='') {
$this->totalRows = $totalRows;
$this->ajax_func = $ajax_func;
$this->parameter = $parameter;
$this->varPage = 'p' ;
if(!empty($listRows)) {
$this->listRows = intval($listRows);
}
$this->totalPages = ceil($this->totalRows/$this->listRows); //总页数
$this->coolPages = ceil($this->totalPages/$this->rollPage);
$this->nowPage = !empty($_GET[$this->varPage])?intval($_GET[$this->varPage]):1;
if(!empty($this->totalPages) && $this->nowPage>$this->totalPages) {
$this->nowPage = $this->totalPages;
}
$this->firstRow = $this->listRows*($this->nowPage-1);
}
public function nowpage($totalRows,$listRows='',$ajax_func,$parameter='') {
$this->totalRows = $totalRows;
$this->ajax_func = $ajax_func;
$this->parameter = $parameter;
$this->varPage = 'p' ;
if(!empty($listRows)) {
$this->listRows = intval($listRows);
}
$this->totalPages = ceil($this->totalRows/$this->listRows); //总页数
$this->coolPages = ceil($this->totalPages/$this->rollPage);
$this->nowPage = !empty($_GET[$this->varPage])?intval($_GET[$this->varPage]):1;
if(!empty($this->totalPages) && $this->nowPage>$this->totalPages) {
$this->nowPage = $this->totalPages;
}
$this->firstRow = $this->listRows*($this->nowPage-1);
return $this->nowPage;
}
public function setConfig($name,$value) {
if(isset($this->config[$name])) {
$this->config[$name] = $value;
}
}
public function show() {
if(0 == $this->totalRows) return '';
$p = $this->varPage;
$nowCoolPage = ceil($this->nowPage/$this->rollPage);
$url = $_SERVER['REQUEST_URI'].(strpos($_SERVER['REQUEST_URI'],'?')?'':"?").$this->parameter;
$parse = parse_url($url);
if(isset($parse['query'])) {
parse_str($parse['query'],$params);
unset($params[$p]);
$url = $parse['path'].'?'.http_build_query($params);
}
//上下翻页字符串
$upRow = $this->nowPage-1;
$downRow = $this->nowPage+1;
if ($upRow>0){
$upPage="<a class='ajaxify' id='big' href='JavaScript:".$this->ajax_func."(".$upRow.")'>".$this->config['prev']."</a>";
}else{
$upPage="";
}
if ($downRow <= $this->totalPages){
$downPage="<a class='ajaxify' id='big' href='javascript:".$this->ajax_func."(".$downRow.")'>".$this->config['next']."</a>";
}else{
$downPage="";
}
// << < > >>
if($nowCoolPage == 1){
$theFirst = "";
$prePage = "";
}else{
$preRow = $this->nowPage-$this->rollPage;
$prePage = "<a class='ajaxify' id='big' href='javascript:".$this->ajax_func."(".$preRow.")'>上".$this->rollPage."页</a>";
$theFirst = "<a class='ajaxify' id='big' href='javascript:".$this->ajax_func."(1)' >".$this->config['first']."</a>";
}
if($nowCoolPage == $this->coolPages){
$nextPage = "";
$theEnd="";
}else{
$nextRow = $this->nowPage+$this->rollPage;
$theEndRow = $this->totalPages;
$nextPage = "<a class='ajaxify' id='big' href='javascript:".$this->ajax_func."(".$nextRow.")' >下".$this->rollPage."页</a>";
$theEnd = "<a class='ajaxify' id='big' href='javascript:".$this->ajax_func."(".$theEndRow.")' >".$this->config['last']."</a>";
}
// 1 2 3 4 5
$linkPage = "";
for($i=1;$i<=$this->rollPage;$i++){
$page=($nowCoolPage-1)*$this->rollPage+$i;
if($page!=$this->nowPage){
if($page<=$this->totalPages){
$linkPage .= " <a class='ajaxify' id='big' href='javascript:".$this->ajax_func."(".$page.")'> ".$page." </a>";
}else{
break;
}
}else{
if($this->totalPages != 1){
$linkPage .= " <span class='current'>".$page."</span>";
}
}
}
$pageStr = str_replace(
array('%header%','%nowPage%','%totalRow%','%totalPage%','%upPage%','%downPage%','%first%','%prePage%','%linkPage%','%nextPage%','%end%'),
array($this->config['header'],$this->nowPage,$this->totalRows,$this->totalPages,$upPage,$downPage,$theFirst,$prePage,$linkPage,$nextPage,$theEnd),$this->config['theme']);
return $pageStr;
}
}
因为同一个页面有多个分页会出现很多问题,但是这不是唯一的方法,还有一个方法就是在Page中找到
红色的部分是注释掉,蓝色的是新加的
couponAdd.html页面
<div class="data-table table-striped form-item" id="tabss">
<ul class="tab-nav nav tabs" >
<li data-tab="tab1" class="current"><a class="tab" href="javascript:void(0);">商品</a></li>
<li data-tab="tab2" ><a class="tab" href="javascript:void(0);">类目</a></li>
</ul>
<a class="confirm ajax-get btn submit-btn" id="deselect">清空选择</a>
<a class="confirm ajax-get btn btn-return" id="allProduct">全部商品</a>
<div id="tab1">/div>
<div id="tab2"></div>
</div>
<script type="text/javascript">
//清除所有缓存数据sessionStorage
$('#deselect').on('click',function(){
sessionStorage.clear();
$("#tabss").load(location.href);
// location.reload();
});
$('#allProduct').on('click',function(){
sessionStorage.setItem('flag',1);
$("#tabss").load(location.href);
})
var init_id = 1;//初始化页面 init_id==1
var current=$('.current .tab').text();
$('.tabs li').click(function(){
current=$(this).text();
if(current=='商品'){
indexc(init_id);
}else{
indexs(init_id);
}
});
if(current=='商品'){
indexc(init_id);
}
function indexc(id){
var keyword=$('#keyword').val();
if(typeof(keyword)=='undefined'){
keyword='';
}
var name=$('#name').val();
if(typeof(name)=='undefined'){
name='';
}
var id = id;
//把数据传递到要替换的控制器方法中
$.ajax({
url:'{:U(product)}',
type:"GET",
async:false,
dataType:"JSON",
data:{'p':id,'keyword':keyword,'cid':name},
success:function(data){
$("#tab1").replaceWith(data.content); //html块替换html的div
},
error:function(data){
console.log("4:ajax not run~");
}
});
}
//初始化页面 init_id==1
function indexs(id){
var keywords=$('#keywords').val();
if(typeof(keywords)=='undefined'){
keywords='';
}
var id = id;
//把数据传递到要替换的控制器方法中
$.ajax({
url:'{:U(category)}',
type:"GET",
async:false,
dataType:"JSON",
//data:{'p':id,'id':deal_id},
data:{'p':id,'keywords':keywords},
success:function(data){
$("#tab2").replaceWith(data.content); //html块替换html的div
},
error:function(data){
console.log("4:ajax not run~");
}
});
}
$(function(){
showTab();
//搜索功能
$("#search").click(function() {
var url = $(this).attr('url');
var query = $('.search-form').find('input').serialize();
query = query.replace(/(&|^)(\w*?\d*?\-*?_*?)*?=?((?=&)|(?=$))/g,'');
query = query.replace(/^&/g, '');
if (url.indexOf('?') > 0) {
url += '&' + query;
} else {
url += '?' + query;
}
window.location.href = url;
});
/* 状态搜索子菜单 */
$(".search-form").find(".drop-down").hover(function(){
$("#sub-sch-menu").removeClass("hidden");
},function(){
$("#sub-sch-menu").addClass("hidden");
});
$("#sub-sch-menu li").find("a").each(function(){
$(this).click(function(){
var text = $(this).text();
$("#sch-sort-txt").text(text).attr("data",$(this).attr("value"));
$("#sub-sch-menu").addClass("hidden");
})
});
});
function setCateId(){
obj = document.getElementsByName("cateId");
check_val = [];
not_check = [];
for(k in obj){
if(obj[k].checked)
check_val.push(obj[k].value);
else
not_check.push(obj[k].value);
}
if(sessionStorage.getItem('flag')!=null){
sessionStorage.removeItem('flag');
}
var cate=sessionStorage.getItem('cateId');
if (cate != null) {
cateId=JSON.parse(cate);
var cateIds = cateId.filter(function(e) {
return not_check.indexOf(e) < 0;
});
var newcateId=cateIds.concat(check_val.filter(function(v) {
return cateIds.indexOf(v) === -1
}));
sessionStorage.setItem("cateId",JSON.stringify(newcateId));
}else{
sessionStorage.setItem("cateId",JSON.stringify(check_val));
}
};
function setProductId(){
obj = document.getElementsByName("productId");
check_val = [];
not_check = [];
for(k in obj){
if(obj[k].checked)
check_val.push(obj[k].value);
else
not_check.push(obj[k].value);
}
if(sessionStorage.getItem('flag')!=null){
sessionStorage.removeItem('flag');
}
var product=sessionStorage.getItem('productId');
if (product != null) {
productId=JSON.parse(product);
var productIds = productId.filter(function(e) {
return not_check.indexOf(e) < 0;
});
var newproductId=productIds.concat(check_val.filter(function(v) {
return productIds.indexOf(v) === -1
}));
sessionStorage.setItem("productId",JSON.stringify(newproductId));
}else{
sessionStorage.setItem("productId",JSON.stringify(check_val));
}
}
</script>
category.html页面
<div id="tab2" class="tab-pane in tab2" style="width: 60%;margin-top: 10px;">
<div class="cf">
<div class="search-form fr cf">
<div class="sleft" style="margin-bottom: 10px;">
<input type="text" name="keywords" id="keywords" class="search-input" value="{:I('keywords')}" placeholder="请输入关键词">
<a class="sch-btn" href="javascript:;" id="search" onclick="indexs(1)"><i class="btn-search"></i></a>
</div>
</div>
</div>
<table>
<thead>
<tr>
<th style="width: 20%" class="row-selected">
<input class="checkbox" name="selectAlla" id="selectAlla" type="checkbox">
</th>
<th style="width: 40%">ID</th>
<th style="width: 40%">类目名称</th>
</tr>
</thead>
<tbody>
<notempty name="listCate">
<volist name="listCate" id="vo">
<tr>
<td style="width: 20%"><input class="cateId row-selected" type="checkbox" name="cateId" value="{$vo.id}"></td>
<td style="width: 40%">{$vo.id}</td>
<td style="width: 40%">{$vo.title}</td>
</tr>
</volist>
<else/>
<td colspan="10" class="text-center"> aOh!</td>
</notempty>
</tbody>
</table>
<div class="page">
{$pageCate}
</div>
<input type="hidden" id="msg" value="" >
</div>
<script type="text/javascript">
//显示缓存中的数据,如果该数据存在,那么就check状态
$().ready(function(){
var cateId =JSON.parse(sessionStorage.getItem('cateId'));//获取sessionStorage中存放的值
var allProduct=sessionStorage.getItem('flag');
if(cateId!=null){
flag=1;//文本框中的值有和当前页对应的值就选中
flags=1;
$("input[name='cateId']").each(function(){
for(var i=0;i<cateId.length;i++){
if($(this).val()==cateId[i]){
$(this).attr('checked',true);
flag++;
}
}
flags++;
});
//判断该页面是否所有的选择都被选择,都被选择,那么就勾选表格头部的复选框
if(flag==flags){
$("input[name='selectAlla']").each(function(){
$(this).attr('checked',true);
});
}
}
//判断是否是全选状态
if(allProduct==1){
//勾选表格所有的复选框
$("input[name='cateId']").each(function(){
$(this).attr('checked',true);
});
//勾选表格头部的复选框
$("input[name='selectAlla']").each(function(){
$(this).attr('checked',true);
});
}
});
$(function() {
var $selectAll = $("#selectAlla");
$selectAll.click(function() {
// alert($selectAll.prop("checked"));
if ($selectAll.prop("checked") == true) {
// 上面的复选框已被选中
$(":checkbox[name='cateId']").prop("checked", true);
} else {
// 上面的复选框没被选中
$(":checkbox[name='cateId']").prop("checked", false);
}
//调用前面的函数
setCateId();
});
//单个勾选复选框
$(".cateId").click(function(){
var option = $(".cateId");
option.each(function(i){
if(!this.checked){
$("#selectAlla").prop("checked", false);
return false;
}else{
$("#selectAlla").prop("checked", true);
}
});
setCateId();
});
});
</script>
product.html页面
<div id="tab1" class="tab-pane in tab1" style="width: 60%;margin-top: 10px;">
<div class="cf">
<select name="findProductname" class="productname" id="name">
<empty name="titId">
<option value="">-----选择-----</option>
<volist name="list" id="vos" >
<option value="{$vos.id}">{$vos.title}</option>
</volist>
<else />
<volist name="list" id="vos" >
<option value="{$vos.id}" <eq name="vos.id" value="$titId" > selected </eq>>{$vos.title}</option>
</volist>
<option value="">-----选择-----</option>
</empty>
</select>
<div class="search-form fr cf">
<div class="sleft" style="margin-bottom: 10px;">
<input type="text" name="keyword" class="search-input" id="keyword" value="{:I('keyword')}" placeholder="请输入关键词">
<a class="sch-btn" href="javascript:;" id="search" onclick="indexc(1)"><i class="btn-search"></i></a>
</div>
</div>
</div>
<table>
<thead>
<tr>
<th class="row-selected" style="width: 20%">
<input id="selectAll" name="selectAll" class="checkbox" type="checkbox">
</th>
<th style="width: 40%">商品编号</th>
<th style="width: 40%">商品名称</th>
</tr>
</thead>
<tbody>
<notempty name="product">
<volist name="product" id="vo">
<tr>
<td style="width: 20%"><input class="productId row-selected" type="checkbox" name="productId" value="{$vo.id}"></td>
<td style="width: 40%">{$vo.commodity_code}</td>
<td style="width: 40%">{$vo.name}</td>
</tr>
</volist>
<else/>
<td colspan="10" class="text-center"> aOh!</td>
</notempty>
</tbody>
</table>
<div class="page">
{$pageProduct}
</div>
</div>
<script type="text/javascript">
$('.productname').on("change",function(){
indexc(1);
})
$().ready(function(){
var productId =JSON.parse(sessionStorage.getItem('productId'));
//获取sessionStorage中存放的值
var allProduct=sessionStorage.getItem('flag');
if(productId!=null){
flag=1;//文本框中的值有和当前页对应的值就选中
flags=1;
$("input[name='productId']").each(function(){
for(var i=0;i<productId.length;i++){
if($(this).val()==productId[i]){
$(this).attr('checked',true);
flag++;
}
}
flags++;
});
if(flag==flags){
$("input[name='selectAll']").each(function(){
$(this).attr('checked',true);
});
}
}
if(allProduct==1){
$("input[name='productId']").each(function(){
$(this).attr('checked',true);
});
$("input[name='selectAll']").each(function(){
$(this).attr('checked',true);
});
}
});
$(function() {
var $selectAll = $("#selectAll");
$selectAll.click(function() {
// alert($selectAll.prop("checked"));
if ($selectAll.prop("checked") == true) {
// 上面的复选框已被选中
$(":checkbox[name='productId']").prop("checked", true);
} else {
// 上面的复选框没被选中
$(":checkbox[name='productId']").prop("checked", false);
}
setProductId();
});
$(".productId").click(function(){
var option = $(".productId");
option.each(function(i){
if(!this.checked){
$("#selectAll").prop("checked", false);
return false;
}else{
$("#selectAll").prop("checked", true);
}
});
setProductId();
});
});
</script>
整个代码还是有问题的,我后期优化,比如当你勾选了全部选择,那么你去取消一个勾选的时候会出现一个问题
目前的方法是先取消选择,然后再去勾选单个复选框(这个是最笨的方法了,更优的方法后期在加)。
还有一个问题代码冗余,可以优化代码比如我之前在不断调试,所以就没有优化,setPriductId()和setCategory()这两个方法是否可以合并呢,通过传参来实现岂不是更好。我有想过全部用公共函数来实现