1<table class="layui-hide" id="category"></table> 2 3 4 5<script type="text/javascript" src="__PLUGINS__/axios/axios.min.js"></script> 6<script type="text/javascript"> 7 8 layui.use('table', function(){ 9 var table = layui.table; 10 11 table.render({ 12 elem: '#category' 13 ,url:"{:url('category/cate_list')}" 14 ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档 15 layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局 16 //,curr: 5 //设定初始在第 5 页 17 ,groups: 1 //只显示 1 个连续页码 18 ,first: false //不显示首页 19 ,last: false //不显示尾页 20 21 } 22 ,cols: [[ 23 {field:'id', width:80, title: 'ID', sort: true} 24 ,{field:'pid', width:100, title: 'PID'} 25 ]] 26 27 }); 28 }); 29 30 31</script>
在这里url在js加载后,会带两个参数,一个page,一个limit 如下所示
http://www.xx.com/admin/category/cate\_list.html?page=1&limit=10
1 public function cate_list(){ 2 //获取分页page和limit参数 3 $page=input("get.page")?input("get.page"):1; 4 $page=intval($page); 5 $limit=input("get.limit")?input("get.limit"):1; 6 $limit=intval($limit); 7 $start=$limit*($page-1); 8 //分页查询 9 $cate_list=Db::name("category")->limit($start,$limit)->select(); 10 $list["msg"]=""; 11 $list["code"]=0; 12 $list["count"]=100; 13 $list["data"]=$cate_list; 14 if(empty($cate_list)){ 15 $list["msg"]="暂无数据"; 16 } 17 18 return json($list); 19 20 }
注1:TP5中,这里分页得到值后查询后,使用return json_encode($list) 是不行的,必须要用json($list)才会返回一个对象,json_encode只是返回的一个json字符串
注2:这个$list,也就是我们返回的值,要根据一定的格式来,msg,code,count,不能少,data里面才是你查询出去的值.
///////////////////////////////////////////3.7日更新////////////////////////////////////////////////////////
///////////////////////////////////////////3.7日更新////////////////////////////////////////////////////////
///////////////////////////////////////////3.7日更新////////////////////////////////////////////////////////
今天主要是,要完成这样一个有查看和修改发布字段的表格,涉及到表格的一些其他使用
不多批夸,先上代码,再解释.
注意,这里的php代码是使用了TP5的框架.然后ajax提交是使用的axios,因为这个出错了catch(error)报错比较舒服,感觉用着比jquery安逸一些.而且jquery小一些.
1{include file="Common/header"} 2 3<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;"> 4 <legend>文章列表><a href="{:url('category/add')}" >添加栏目</a></legend> 5</fieldset> 6 7<!--表格加载div--> 8<table class="layui-hide" id="article_tab" lay-filter="article_tab"></table> 9<!--这个是选择框tpl--> 10<script type="text/html" id="show_tpl"> 11 <input type="checkbox" name="status" value="{{d.id}}" lay-skin="switch" lay-text="显示|隐藏" lay-filter="show_switch" {{ d.status == 1 ? 'checked' : '' }} > 12</script> 13<!--这两个是工具栏tpl--> 14<script type="text/html" id="action_bar"> 15 <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a> 16 <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="update">修改</a> 17</script> 18 19 20 21<script type="text/javascript" src="__PLUGINS__/axios/axios.min.js"></script> 22<script type="text/javascript"> 23 24 layui.use('table', function(){ 25 var table = layui.table,form=layui.form; 26 27 //渲染表格 28 table.render({ 29 elem: '#article_tab' 30 ,url:"{:url('Article/arc_list')}" 31 ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档 32 layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局 33 //,curr: 5 //设定初始在第 5 页 34 ,groups: 1 //只显示 1 个连续页码 35 ,first: false //不显示首页 36 ,last: false //不显示尾页 37 38 } 39 ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增 40 ,cols: [[ 41 {field:'id', width:80, title: 'ID', sort: true} 42 ,{field:'title', width:150, title: '标题'} 43 ,{field:'keywords',width:260,title:'关键词'} 44 ,{field:'description',width:360,title:'简介'} 45 ,{field:'status',width:100,title:'是否发布',templet: '#show_tpl', unresize: true} 46 ,{field:'cate_url',width:150,title:'操作',toolbar:'#action_bar'} 47 ]] 48 49 }); 50 51 //修改文章发布状态(单选框选择事件) 52 form.on('switch(show_switch)', function(obj){ 53 var id=parseInt(this.value); 54 var status=obj.elem.checked; 55 status=status==true?1:0; 56 57 58 axios.post("{:url('Article/status_update')}", { 59 id: id, 60 status:status 61 }) 62 .then(function (response) { 63 layer.msg(response.data.msg); 64 65 }) 66 .catch(function (error) { 67 console.log(error); 68 }); 69 }); 70 71 //表格工具栏 72 table.on('tool(article_tab)', function(obj){ 73 var data = obj.data; 74 console.log(data); 75 if(obj.event === 'detail'){ 76 //当事件为查看详情的时候,open一个页面,内容为data.content 77 layer.open({ 78 type: 1 79 ,title: "文章详情" //不显示标题栏 80 ,titleAlign:'c' 81 ,closeBtn: false 82 ,area: '300px;' 83 ,shade: 0.8 84 ,id: 'LAY_article' //设定一个id，防止重复弹出 85 ,btn: ['确定'] 86 ,btnAlign: 'c' 87 ,content:data.content 88 ,moveType: 1 89 }); 90 } else if(obj.event === 'update'){ 91 //当事件为修改的时候,跳转页面 92 window.location.href="{:url('Article/update')}"+"?id="+data.id; 93 } 94 }); 95 96 97 }); 98 99 100</script> 101 102{include file="Common/footer"} 103 104<?php 105/** 106 * Created by PhpStorm. 107 * User: martinby 108 * Date: 2018/3/6 109 * Time: 22:49 110 */ 111namespace app\admin\controller; 112 113use think\Controller; 114use think\Db; 115 116class Article extends Controller{ 117 //首页 118 public function index(){ 119 120 return $this->fetch("Article/index"); 121 } 122 123 //读取文章列表 124 public function arc_list(){ 125 //获取分页page和limit参数 126 $page=input("get.page")?input("get.page"):1; 127 $page=intval($page); 128 $limit=input("get.limit")?input("get.limit"):1; 129 $limit=intval($limit); 130 $start=$limit*($page-1); 131 //分页查询 132 $count=Db::name("article")->count("id"); 133 $cate_list=Db::name("article")->limit($start,$limit)->order('id desc')->select(); 134 135 136 $list["msg"]=""; 137 $list["code"]=0; 138 $list["count"]=$count; 139 $list["data"]=$cate_list; 140 if(empty($cate_list)){ 141 $list["msg"]="暂无数据"; 142 } 143 144 return json($list); 145 } 146 147 //显示文章添加页面 148 public function add(){ 149 $web["title"]="文章添加"; 150 $this->assign("web",$web); 151 return $this->fetch("Article/add"); 152 } 153 154 //执行数据添加 155 public function do_add(){ 156 if(request()->isPost()){ 157 $data["title"]=input("post.title"); 158 $data["keywords"]=input("post.keywords"); 159 $data["description"]=input("post.description"); 160 $data["content"]=input("post.content"); 161 $data["create_time"]=time(); 162 $data["status"]=0; 163 164 $vali_res=$this->validate($data,"Article.add"); 165 if($vali_res===true){ 166 $res=Db::name("article")->insert($data); 167 if($res==1){ 168 $response["code"]=1; 169 $response["msg"]="文章添加成功!"; 170 }else{ 171 $response["code"]=0; 172 $response["msg"]="文章加入数据库失败!"; 173 } 174 175 }else{ 176 $response["code"]=0; 177 $response["msg"]=$vali_res; 178 } 179 return json($response); 180 181 } 182 } 183 184 //修改发布状态 185 public function status_update(){ 186 if(request()->isPost()){ 187 $id=input("post.id"); 188 $status=input('post.status'); 189 190 191 if($id==null||$id==""||$status==""||$status==null){ 192 return json(["code"=>0,"msg"=>"参数获取有误"]); 193 } 194 195 $res=Db::name("article")->where(["id"=>$id])->update(["status"=>$status]); 196 if($res==1){ 197 return json(["code"=>1,"msg"=>"发布成功"]); 198 }else{ 199 return json(["code"=>0,"msg"=>"修改失败"]); 200 } 201 202 } 203 } 204 205 //显示修改页面 206 public function update(){ 207 208 } 209 210 211 //修改数据提交处理 212 public function do_update(){ 213 214 } 215 216 217 218}
//第一部分,如何加载出那个是否发布的选择框,这里的{{d.id}}是框架的写法,获取你这一条数据的id值,
{{ d.status == 1 ? 'checked' : '' }}这一串代码是根据你的status值判断,如果status为1,就为checked选中
1<!--这个是选择框tpl--> 2<script type="text/html" id="show_tpl"> 3 <input type="checkbox" name="status" value="{{d.id}}" lay-skin="switch" lay-text="显示|隐藏" lay-filter="show_switch" {{ d.status == 1 ? 'checked' : '' }} > 4</script>
//表格这里,我们引入上面选择框tpl的id,即#show_tpl ,{field:'status',width:100,title:'是否发布',templet: '#show_tpl', unresize: true}
当你的选择框从未选择,变成选中状态,我们如何去获取值,并且请求后台改变这个状态呢?
//修改文章发布状态(单选框选择事件) form.on('switch(show_switch)', function(obj){ //这里这个show_switch是上面的tpl的lay-filter的值,要进行对应 var id=parseInt(this.value);//这里获取的是你这一条数据的id值 var status=obj.elem.checked;//获取状态的checked,打印出来选中为true,未选中为false status=status==true?1:0;//把这个状态值进行判断一下,如果true,为1,否则,为false
//这一块儿为post提交到后台,进行数据处理即可 axios.post("{:url('Article/status_update')}", { id: id, status:status }) .then(function (response) { //layer弹出后台返回的信息 layer.msg(response.data.msg); }) .catch(function (error) { //打印报错的值. console.log(error); }); });
//第二部分,如何往里面加添加按钮,即工具栏
首先,我们还是要先写工具栏的tpl的html,然后用js加载进去渲染
<!--这两个是工具栏tpl--> <script type="text/html" id="action\_bar"> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="update">修改</a> </script>table引入进去,进行渲染
,{field:'cate_url',width:150,title:'操作',toolbar:'#action_bar'} //对应上面代码的id
按钮绑定事件处理
//表格工具栏 table.on('tool(article_tab)', function(obj){ //这个article_tab是你的table的lay-filter的值 var data = obj.data; console.log(data); if(obj.event === 'detail'){ //这里这个detail跟上面tpl里面的lay-event对应 //这里面的内容具体写什么,都可以,, //当事件为查看详情的时候,open一个页面,内容为data.content layer.open({ type: 1 ,title: "文章详情" //不显示标题栏 ,titleAlign:'c' ,closeBtn: false ,area: '300px;' ,shade: 0.8 ,id: 'LAY_article' //设定一个id，防止重复弹出 ,btn: ['确定'] ,btnAlign: 'c' ,content:data.content ,moveType: 1 }); } else if(obj.event === 'update'){ //当事件为修改的时候,跳转页面 window.location.href="{:url('Article/update')}"+"?id="+data.id; } });