nodetree多级分类展示

最新推荐文章于 2022-10-13 16:26:50 发布

芝麻开门2015

最新推荐文章于 2022-10-13 16:26:50 发布

阅读量2.6k

点赞数

分类专栏： thinkphp5

本文链接：https://blog.csdn.net/resilient/article/details/82794340

版权

thinkphp5 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

效果如下

1.基于TP5代码

需要准备几个js文件

<script src="/static/js/jquery-1.4.4.min.js" charset="utf-8"></script>
<script src="/static/js/common.js" charset="utf-8"></script>
<script src="/static/js/jquery.ztree.core.js" charset="utf-8"></script>
<script src="/static/js/jquery.ztree.excheck.js" charset="utf-8"></script>

2.目录路径

相关控制器代码

goodsclass.php

<?php
/**
 * User: xym
 * Date: 2018/9/20
 * Time: 上午8:53
 */
namespace app\index\controller;
use think\Controller;
use think\Db;
use think\Model;
Class GoodsClass extends Controller{
    public function classlist(){
    $data=Db::name('goods_class')->select();
    $this->assign('data',$data);
    return $this->fetch();
    }


    public function classadd(){
        $res=Db::name('goods_class')->field("*,concat(path,',',pid) as paths")->order('paths')->select();
      //  var_dump($res);exit();
        foreach ($res as $k=>$v){
            $res[$k]['name']=str_repeat('|---',$v['level']).$v['name'];
        }

        var_dump($res);
        $this->assign('data',$res);
        return $this->fetch();
    }

    //添加分类到数据库
    public function add(){
       // print_r($_POST);
        $data['name']=$_POST['name'];
        $data['pid']=$_POST['pid'];


        if(!empty($data['name'])){
            if($data['pid']==0){
                $data['level']=1;
                $re= Db::name('goods_class')->insertGetId($data);
                $path['path']='0'.','.$re;
                Db::name('goods_class')->where('id',$re)->update($path);
                $this->success('顶级添加分类成功');
            }
        $res=Db::name('goods_class')->field('path')->find($data['pid']);
        $data['path']=$res['path'];
        $data['level']=substr_count($data['path'],',');
        $re= Db::name('goods_class')->insertGetId($data);
            $path['path']=$data['path'].','.$re;
            $path['level']=substr_count($path['path'],',');
            Db::name('goods_class')->where('id',$re)->update($path);
            $this->success('添加分类成功');

        }else{
            $this->error('分类名称为空');
        }
    }

    public function getGoodCateGory(){
        $category= Db::name('goods_class')->field('id,pid as pId,name')->select();
        if($category){
            foreach ($category as $k=>$v){
                $category[$k]['open']=true;
            }
            $this->success('获取商品分类成功','',$category);
        }else{
            $this->error('获取商品分类失败');
        }

    }

}

html代码

classlist.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<link rel="stylesheet" href="/static/css/zTreeStyle/zTreeStyle.css" type="text/css">
<body>
<input type="hidden" name="cate" id="cate" value="">
<div class="zTreeDemoBackground left"  style="overflow-y:auto;">
    <ul id="goods_class" class="ztree"></ul>
</div>


</body>
<script src="/static/js/jquery-1.4.4.min.js" charset="utf-8"></script>
<script src="/static/js/common.js" charset="utf-8"></script>
<script src="/static/js/jquery.ztree.core.js" charset="utf-8"></script>
<script src="/static/js/jquery.ztree.excheck.js" charset="utf-8"></script>
<script>

    var setting = {
        check: {
            enable: true
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        callback: {
            onCheck: zTreeOnCheck
        },
        view: {
            selectedMulti: false
        }
    };
    setting.check.chkboxType = { "Y" : "ps", "N" : "ps" };
    //Y 属性定义 checkbox 被勾选后的情况；
    //N 属性定义 checkbox 取消勾选后的情况；
    //"p" 表示操作会影响父级节点；
    //"s" 表示操作会影响子级节点。


    function zTreeOnCheck(event, treeId, treeNode) {
        //获取选中的节点id的数据
        var treeObj=$.fn.zTree.getZTreeObj("goods_class"),
            nodes=treeObj.getCheckedNodes(true),
            v=""
        for(var i=0;i<nodes.length;i++) {
            v += nodes[i].id+","+nodes[i].name+","+nodes[i].pId+"#";
        }
        $('#cate').val(v);
        refreshLayers();
        clearCheckedOldNodes();


    }
    //刷新图层的显示情况
    var layers;
    function refreshLayers() {
        var zTree = $.fn.zTree.getZTreeObj("goods_class");
        var changedNodes = zTree.getChangeCheckedNodes();
        for ( var i=0 ; i < changedNodes.length ; i++ ){
            var treeNode = changedNodes[i];
            layers = map.getLayersByName(treeNode.name);
            if(layers!=null && layers[0]!=null){
                layers[0].setVisibility(treeNode.checked);
            }
        }
    }
    //清理善后工作
    function clearCheckedOldNodes() {
        var zTree = $.fn.zTree.getZTreeObj("goods_class"),
            nodes = zTree.getChangeCheckedNodes();
        for (var i=0, l=nodes.length; i<l; i++) {
            nodes[i].checkedOld = nodes[i].checked;
        }


    }
    $(document).ready(function(){
        getGoodsCategory();
        function getGoodsCategory() {
           // alert('func');
            var arr;
            $.ajax({
                url: '/index/goodsclass/getGoodCateGory',
                dataType: 'json',
                success: function (result) {
                    if (result.code) {
                        $.fn.zTree.init($("#goods_class"), setting,result.data);
                    }else{
                        alert(result.msg);
                    }
                }
            });
        }
    });
</script>
</html>

芝麻开门2015

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
nodetree多级分类展示

效果如下 1.基于TP5代码需要准备几个js文件&lt;script src="/static/js/jquery-1.4.4.min.js" charset="utf-8"&gt;&lt;/script&gt;&lt;script src="/static/js/common.js" charset="utf-8"&gt;&lt;/script
复制链接

扫一扫