php手把手教你做网站(十四)ajax显示列表文章，全选，取消

学习文章列表之前先学习一下文章编辑的一点注意，可能会出错的地方。

添加文章和编辑文章使用一个模板，如果添加文章的时候没有对news_name赋值显示到模板，而模板内value直接使用{$newsinfo.news_name}这种情况下会出错。

2个办法处理：

1）添加的时候赋空值

$newsinfo['news_name']='';
View::assign('$newsinfo',$newsinfo);

2）模板内使用php7的写法，使用“??”具体如下：

<input type='text'  value='{$newsinfo.news_name??""}'>

3）保存到数据库的时候checkbox如果是没有选中，是不会传递name的，获取的时候我们应该加上判断

$xuanzhong=isset(input('post.tuiian'))?1:0;

文章列表常见的功能操作

1、全选或者取消

这里的全选我没有使用监听，而是继续使用了jquery

html代码

<td align="center" class='a'><input type="checkbox" name="checkbox[]" value="11"  lay-skin="primary" /></td>

选择框放到了class='a'的td里边

<div class="layui-input-inline selectall" ><input type="checkbox" value='check' name='chkall'  title='全选' > 

全选放到了div 加入了自己的classs，electall

判断全选框是否选中，选中的话文章列表的选择框也要选中，反之不选

$(document).ready(function() {
    $(".action").click(function(){ 
        $('.a').find('input[name="checkbox[]"]').prop('checked',$(this).find('input').is(':checked')?true:false);
		    layui.use('form', function(){
          var form = layui.form;
			    form.render('checkbox');
        });
	});
});

使用了layui的样式，选中或者取消以后要再次刷新，或者叫渲染吧

layui.use('form', function(){
      var form = layui.form;
			form.render('checkbox');
});

这里可以看到只刷新了checkbox。

2、ajax显示文章列表

html代码：

		<table width="100%" border="0" cellpadding="10" cellspacing="0" class="layui-table ">
            <tr>
                <th width="40" align="center">选择</th>
                <th  align="center">排序</th>
            </tr>
	   </table>
	   <table width="100%" border="0" cellpadding="10" cellspacing="0" class="layui-table tba">

	   </table>

后边显示字段都是一个性质，这里就只写了2个

js代码

 $(document).ready(function() {
		var pager={$p};
		getajax(pager);
    $(document).delegate(".pager li a", 'click', function() {
		   var pager=$(this).attr('datapage');
		   getajax(pager);
		});
  });

function getajax(pager){
		$.ajax({
			url: "/admin.php/cmmodule/list.html",
			data: {"p":pager},
			type: 'post',
			dataType: 'json',
			success: function(result) {
				if (result.error == "0000") {
					console.log(result.msg);
					var text="";
					for (x in result.msg) {
					    text+=" <tr>";
						text+=" <td align=\"center\" class='a'  width='40'><input type=\"checkbox\" name=\"checkbox[]\" value=\""+result.msg[x].id+"\"  lay-skin=\"primary\" /></td>";
						text+=" <td align=\"center\"><input type=\"text\" name=\"modulesort["+result.msg[x].id+"]\" size='4' class=\"layui-input sortinput inpMain\" value=\""+result.msg[x].module_sort+"\"/></td>";
						text+="</tr>";
					}
					$('.tba').html(text);
					$(".pager").html(result.pagels);
					layui.use('form', function(){
						var form = layui.form;
						form.render();
					});

				} 
			}
		});

1）；因为打开页面要用ajax 读取数据，点击分页也要ajax读取数据，这里自定义了一个方法：getajax，封装了ajax，比较偷懒了在getajax直接赋值到table里边了，这样封装不适合所有的。可以是ajax(url,参数)；然后根据返回值操作，具体要看自己的习惯；

2）返回数据我设置的json格式，msg存放的是正确返回的数据，error是错误编码，0000是正确的，这个可以自己按照习惯来；这里我使用了for in在js循环了，也可以php后台执行读取的时候直接foreach循环把这些html加入以后再返回；

3）ajax显示列表，就不能再使用tp6提供的分页了，需要我们自己写。前边我们说了自己新建了cm类，这个分页我们可以写到cm类里边，因为是ajax读取分页的页数，也就不需要再有链接；

4）如果ajax返回的是字符串，里边写的是json格式，可以使用js里边的JSON.parse(ressu);转成json格式;

字符串ressu转json：

var ressuobj=JSON.parse(ressu);

分页代码;

public  function pager($pagecount,$ipage){
  //ipage是当前页   $pagecount 总页码
		$pagstr='<ul class="pagination">';
		$totalpagt=10;
		if($ipage==1){
			$pagstr.="<li class=\"disabled\"><span><</span></li>";
		}else{
			$pagstr.="<li ><a datapage=1><</a></li>";
		}
		if($ipage<=5){
			$startsp=1;
			if($pagecount<=$totalpagt){
				$endsp=$pagecount;
			}else{
				$endsp=$totalpagt;
			}
		}else{
			if($pagecount<=$totalpagt){
				$endsp=$pagecount;
				$startsp=1;
			}else{
				$endsp=$ipage+5;
				$startsp=$ipage-4;
				if($ipage>$pagecount-5){
					$endsp=$pagecount;
					$startsp=$ipage-($totalpagt-($pagecount-$ipage))+1;
				}
			}
		}
		for($is=$startsp;$is<=$endsp;$is++){
			if((int)$ipage==(int)$is){
				$pagstr.="<li class=\"active\" ><a datapage=".$is.">".$is."</a></li>";
			}else{
				$pagstr.="<li ><a datapage=".$is.">".$is."</a></li>";
			}
		}
		if($ipage==$pagecount){
			$pagstr.="<li class=\"disabled\"><span>></span></li>";
		}else{
			$pagstr.="<li><a datapage=".$pagecount.">></a></li>";
		}
		$pagstr.="</ul>";
		return $pagstr;
	}

仅供参考，比较简单，判断起始，截止的页码，然后for循环；

4）后端读取文章列表

public function list(){
		$pagesize="1";
		$page=(int)input('post.p');
		$newslist=Db::name('web_news')->page($page,$pagesize)->order("id desc")->select();
		$newscount=Db::name('web_news')->field('id')->count();
		$pagecount=ceil($newscount/$pagesize);

		echo json_encode(array('error'=>'0000','msg'=>$newslist,'pagels'=>$this->pager($pagecount,$page)));
		exit;
}

5）要再次渲染，因为以前表格是没有数据的，新加进来的没有layui的样式，多加几次就习惯了，会知道不断渲染；

流程：

（1）打开页面在控制器向模板赋值参数（分页或者其他的，分页默认开始是第一页，也就是1）；

（2）渲染模板执行模板内的ajax，再次请求页面返回文章列表信息；

（3）返回的列表for in循环重组格式（也可以php页面写好返回格式）通过.html(text)显示到网页；

（4）layui重新渲染；

3、删除，更新排序

都是放到了一个form里边，所以处理程序也会是一个，所以我们需要对按钮name的value进行判断。

<input name="mysub" class="layui-btn" type="submit" value="更新排序"/>

php代码

if(input('post.mysub')=='更新排序'){
   排序操作
   exit;
}
删除操作

排序操作以后一定要加exit，不然也会执行删除操作，也可以使用if else 就是必须加exit了。

if(){
排序
}else{
删除
}

4、推荐到首页显示

使用的是layui中的开关事件，获取到的是true，false我是转成了1,0，获取文章的编号（开关的value存放的是文章编号），然后ajax操作，通知php页面推荐字段转成推荐，或者是取消推荐。

html代码

<input type="checkbox" value='91'   lay-filter="switch" lay-skin="switch"  lay-text="是|否">

获取文章编号 data.value；

使用layui监听switch，括号中的switch和html内的lay-filter="switch"，这2个名称是switch是对应的，一样就好可以按照自己的习惯命名；

layer.msg提示返回的信息，成功推荐到首页，或者是已经取消推荐；

layui.use('form', function(){
  var form = layui.form;
  form.on('switch(switch)', function(data){
    console.log(this.checked);
    var artid= data.value;
    var czcode=0;
    if(this.checked){
       czcode=1;
    }
    //详细的ajax代码上边有这里就不多余重复了  
    $.ajax({
      data: {"czcode":czcode,"artid":artid},
      success: function(result) {
        layer.msg(result.msg, {time: 2000});
      }
    }) 
  })  
});

总结，讲完文章列表，一个网站大体的功能就全部完成了，至于实现产品，或者成功案例等等，只是叫法的不同，本质还是添加表单，选择分类，上传图片等，无非就是换了个名称，新闻标题换成产品名称，如果看完这十几章，相信即使是初学的也该能搭建网站。

要想快速掌握开发一个网站的能力，我们应该是逆向思维，弄清楚开发一个网站需要哪些知识，而不是学了所有的，然后需要哪些，再从知识库里挑选。