效果如下
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
扫描二维码关注公众号,回复:
3303512 查看本文章
<?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>