jquery选中checkbox事件-PHP教你如何制作网站（十四）ajax显示列表文章、全选、取消

bendan520 2023年9月2日 jquery 0

在学习文章列表之前，先了解一下文章编辑，这里可能会出现错误。

添加文章和编辑文章使用模板。 如果添加文章时模板中没有显示news_name形参，而模板中的值直接使用{$newsinfo.news_name}，则会出现错误。

2种处理方法：

1）添加时赋空值

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

2）模板中使用php7的写法，并使用“??” 如下：

3）如果保存到数据库时不勾选该复选框，则该名称不会被传递，我们在获取时要添加一个判断

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

图1 列表样式

文章列表常用功能操作

1.全选或取消

这里我没有使用窃听进行所有选择，而是继续使用jquery

html代码

选择框放置在class='a'的td中

选择div中的all并添加自己的类，selectall

确定全选框是否被选中。 如果选中，则文章列表的选择框也必须选中，否则不应选中。

$(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');
});

在这里您可以看到只有复选框被刷新。

2. Ajax显示文章列表

html代码：

		

            

                选择
                排序

稍后会显示数组都具有相同的属性，但这里只写了 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+=" ";
						text+=" ";
						text+=" ";
						text+="";
					}
					$('.tba').html(text);
					$(".pager").html(result.pagels);
					layui.use('form', function(){
						var form = layui.form;
						form.render();
					});
				} 
			}
		});

1）； 因为打开页面时需要使用ajax读取数据，而点击分页时，也需要使用ajax读取数据。 这里定制了一个方法：getajax，它封装了ajax。 我比较懒，直接在getajax中给表添加形参，从而封装起来。 不适合所有人。 可以是ajax(url,参数)； 然后根据返回值进行操作，具体看自己的习惯；

2）我设置的返回数据的json格式，msg存放的是正确返回的数据jquery选中checkbox事件，error是错误码，0000是正确的，大家可以根据自己的习惯这样做； 这里我在js中使用for in循环，或者php后台读取时，直接将这个html添加到foreach循环中然后返回；

3）用ajax显示列表时jquery选中checkbox事件，我们不能再使用tp6提供的分页了。 需要我们自己写。 我们之前说过我们创建了一个新的 cm 类。 我们可以说说这个分页的cm类，因为ajax读取的是分页的页码，所以不需要链接；

4）如果ajax返回的是字符串，并且里面写入的内容是json格式，可以使用JSON.parse(ressu); 在js中将其转换为json格式；

字符串结果转为 json：

var ressuobj=JSON.parse(ressu);

分页代码；

public  function pager($pagecount,$ipage){
  //ipage是当前页   $pagecount 总页码
		$pagstr='
    ';
		$totalpagt=10;
		if($ipage==1){
			$pagstr.="
  • <
    • ";
		}else{
			$pagstr.="
  • <
    • ";
		}
		if($ipage<=5){
			$startsp=1;
			if($pagecount<=$totalpagt){
				$endsp=$pagecount;
			}else{
				$endsp=$totalpagt;
			}
		}else{
			if($pagecount$pagecount-5){
					$endsp=$pagecount;
					$startsp=$ipage-($totalpagt-($pagecount-$ipage))+1;
				}
			}
		}
		for($is=$startsp;$is<=$endsp;$is++){
			if((int)$ipage==(int)$is){
				$pagstr.="
  • ".$is."
    • ";
			}else{
				$pagstr.="
  • ".$is."
    • ";
			}
		}
		if($ipage==$pagecount){
			$pagstr.="
  • >
    • ";
		}else{
			$pagstr.="
  • >
    • ";
		}
		$pagstr.="
";
		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。 添加几次就习惯了，就会知道如何持续渲染；

图2 ajax显示列表效果

过程：

（1）打开页面，在控制器中传入模板参数（分页或者其他，默认分页开始是第一页，为1）；

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

（3）将返回的列表重新组织为for in循环格式（返回格式也可以写在PHP页面上），通过.html（文本）显示在网页上；

(4)layui重新渲染；

3.删除、更新排序

它们都放在一个表单中，所以就会有一个处理程序，所以我们需要判断按钮名称的值。

php代码

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

排序操作后必须添加exit，否则删除操作也会执行。 也可以用if else，但是必须加exit。

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