8 分类编辑功能的实现

8 分类编辑功能的实现

抽岁裳前场畏扮抗来省辑侍酮

---

修改视图中编辑按钮的处理url

将

改为提交到edit()方法，并以get的形式传递id

创建edit()

<?php
namespace app\admin\controller;

//引入公共控制器
use app\common\controller\Base;
//引入模板
use app\common\model\Category as CateModel;

class Category extends Base
{
    public function index()
    {
        //显示分类表中的所有数据
        // 1.获取分页信息
        //  代码解释：all()查询分页表中的所有数据   按照id 升序排列

        $cates = CateModel::all(function($query){
            $query->order('cate_id','asc');
        });
        // 2.模板赋值
        $this->view->cates=$cates;

        // 3.渲染模板
        return $this->view->fetch();
    }

    //编辑分类信息
    public function  edit()
    {
        //获取要修改的分类id: cateId
        //这里直接使用系统控制器的request函数  不需要再引入request对象
        $cateId=$this->request->param('cateid');
        dump($cateId);
    }

    
}

点击编辑，数据成功提交到edit()中

---

完善edit()

<?php
namespace app\admin\controller;

//引入公共控制器
use app\common\controller\Base;
//引入模板
use app\common\model\Category as CateModel;

class Category extends Base
{
    public function index()
    {
        //显示分类表中的所有数据
        // 1.获取分页信息
        //  代码解释：all()查询分页表中的所有数据   按照id 升序排列

        $cates = CateModel::all(function($query){
            $query->order('cate_id','asc');
        });
        // 2.模板赋值
        $this->view->cates=$cates;

        // 3.渲染模板
        return $this->view->fetch();
    }

    //编辑分类信息
    public function  edit()
    {
        //获取要修改的分类id: cateId
        //这里直接使用系统控制器的request函数  不需要再引入request对象
        $cateId=$this->request->param('cateid');
        //根据当前分类id,获取对应的分类名称,返回的是数组
        $cate=CateModel::get($cateId);
        //模板赋值
        $this->view->assign('cate',$cate);
        //模板赋值的另一种写法  通过魔术方法set()实现
        // $this->view->cate=$cate;
        //渲染模板
        return $this->view->fetch();

    }

    
}

复制x-admin里面的admin-edit.html改名为edit.html 并输出数据

{include file="common@header"}
    <div class="x-body">
        <form class="layui-form">
          <div class="layui-form-item">
              <label for="phone" class="layui-form-label">
                  栏目类型
              </label>
              <div class="layui-input-inline">
                  <input type="text" value="{$cate.cate_name}" id="cate_name" name="cate_name"
                  autocomplete="off" class="layui-input">
              </div>
          </div>
          <div class="layui-form-item">
              <label for="L_email" class="layui-form-label">
                  排序
              </label>
              <div class="layui-input-inline">
                  <input type="text" value="{$cate.cate_order}" id="cate_order" name="cate_order"
                  autocomplete="off" class="layui-input">
              </div>
          </div>
          <div class="layui-form-item">
            <label for="L_email" class="layui-form-label">
                类型
            </label>
            <div class="layui-input-inline">
                <select name="cate_type" lay-verify="" id="cate_type">
                  <option value="1" selected="">列表页</option>
                  <option value="0">单页面</option>
                </select> 
            </div> 
        </div>
          <div class="layui-form-item">
              <label for="L_repass" class="layui-form-label">
              </label>
              <button  class="layui-btn" lay-filter="add" lay-submit="">
                  保存
              </button>
          </div>
      </form>
    </div>
    <script>
        layui.use(['form','layer'], function(){
            $ = layui.jquery;
          var form = layui.form
          ,layer = layui.layer;
        

          //监听提交
          form.on('submit(add)', function(data){
            console.log(data);
            //发异步，把数据提交给php
            layer.alert("增加成功", {icon: 6},function () {
                // 获得frame索引
                var index = parent.layer.getFrameIndex(window.name);
                //关闭当前frame
                parent.layer.close(index);
            });
            return false;
          });
          
          
        });
    </script>
  </body>

</html>

点击编辑：

---

完成保存的逻辑

edit.html 的script代码

<script>
        layui.use(['form','layer'], function(){
            $ = layui.jquery;
          var form = layui.form
          ,layer = layui.layer;
        

          //监听提交
          form.on('submit(add)', function(data){
            console.log(data);
            //发异步，把数据提交给php
            $.post("{:url('doEdit')}",{
                'cate_name':$('#cate_name').val(),
                'cate_order':$('#cate_order').val(),
                'cate_type':$('#cate_type').val(),
                'cate_id':{$cate.cate_id}
            },function($data){

            })
            layer.alert("增加成功", {icon: 6},function () {
                // 获得frame索引
                var index = parent.layer.getFrameIndex(window.name);
                //关闭当前frame
                parent.layer.close(index);
            });
            return false;
          });
          
          
        });
    </script>

创建doEdit()方法

<?php
namespace app\admin\controller;

//引入公共控制器
use app\common\controller\Base;
//引入模板
use app\common\model\Category as CateModel;

class Category extends Base
{
    public function index()
    {
        //显示分类表中的所有数据
        // 1.获取分页信息
        //  代码解释：all()查询分页表中的所有数据   按照id 升序排列

        $cates = CateModel::all(function($query){
            $query->order('cate_id','asc');
        });
        // 2.模板赋值
        $this->view->cates=$cates;

        // 3.渲染模板
        return $this->view->fetch();
    }

    //编辑分类信息
    public function  edit()
    {
        //获取要修改的分类id: cateId
        //这里直接使用系统控制器的request函数  不需要再引入request对象
        $cateId=$this->request->param('cateid');
        //根据当前分类id,获取对应的分类名称,返回的是数组
        $cate=CateModel::get($cateId);
        //模板赋值
        $this->view->assign('cate',$cate);
        //模板赋值的另一种写法  通过魔术方法set()实现
        // $this->view->cate=$cate;
        //渲染模板
        return $this->view->fetch();

    }

    //处理编辑操作
    public function  doEdit()
    {
        echo $this->request->param('cate_name');
    }

    
}

编辑保存后

---

完善doEdit()的逻辑

    //处理编辑操作
    public function  doEdit()
    {
        //根据分类id查询分类模型,并返回分类模板的实例对象
        $cate=CateModel::get($this->request->param('cate_id'));

        ////直接更新分类实例的对应字段信息:以对象属性方式
        $cate->cate_name=$this->request->param('cate_name');
        $cate->cate_order=$this->request->param('cate_order');
        $cate->cate_type=$this->request->param('cate_type');

        //更新模型并判断是否成功?
        if($cate->save())
        {
            //可以返回状态0/1之间切换来测试前端的提示信息
            return ['status'=>1,'msg'=>'更新成功'];
        }
        return ['status'=>0,'msg'=>'更新失败'];

    }

测试：

---

完善edit.html的回调函数

{include file="common@header"}
    <div class="x-body">
        <form class="layui-form">
          <div class="layui-form-item">
              <label for="phone" class="layui-form-label">
                  栏目类型
              </label>
              <div class="layui-input-inline">
                  <input type="text" value="{$cate.cate_name}" id="cate_name" name="cate_name"
                  autocomplete="off" class="layui-input">
              </div>
          </div>
          <div class="layui-form-item">
              <label for="L_email" class="layui-form-label">
                  排序
              </label>
              <div class="layui-input-inline">
                  <input type="text" value="{$cate.cate_order}" id="cate_order" name="cate_order"
                  autocomplete="off" class="layui-input">
              </div>
          </div>
          <div class="layui-form-item">
            <label for="L_email" class="layui-form-label">
                类型
            </label>
            <div class="layui-input-inline">
                <select name="cate_type" lay-verify="" id="cate_type">
                  <option value="1" selected="">列表页</option>
                  <option value="0">单页面</option>
                </select> 
            </div> 
        </div>
          <div class="layui-form-item">
              <label for="L_repass" class="layui-form-label">
              </label>
              <button  class="layui-btn" lay-filter="add" lay-submit="">
                  保存
              </button>
          </div>
      </form>
    </div>
    <script>
        layui.use(['form','layer'], function(){
            $ = layui.jquery;
          var form = layui.form
          ,layer = layui.layer;
        

          //监听提交
          form.on('submit(add)', function(data){
            console.log(data);
            //发异步，把数据提交给php
            $.post("{:url('doEdit')}",{
                'cate_name':$('#cate_name').val(),
                'cate_order':$('#cate_order').val(),
                'cate_type':$('#cate_type').val(),
                'cate_id':{$cate.cate_id}
            },function(data){
                if(data.status==1)
                {
                    layer.alert(data.msg, {icon: 6},function () {
                    // 获得frame索引
                    var index = parent.layer.getFrameIndex(window.name);
                    //关闭当前frame
                    parent.layer.close(index);
                
                    });
                }
                else
                {
                    layer.alert("更新失败", {icon: 6},function () {
                    // 获得frame索引
                    var index = parent.layer.getFrameIndex(window.name);
                    //关闭当前frame
                    parent.layer.close(index);
                
                    });
                }
                
                
                
            })
            
            

            
            return false;
          });
          
          
        });
    </script>
  </body>

</html>

执行：

---

趁路掠免哄黎星豆诬化晦县朔