关于layUI.tree第三方扩展的使用

关于layUI.tree第三方扩展的使用

Scroll Down
  • 如何显示
  • 如何获取数据
  • 如何使用事件监听
关于不同的扩展的显示有不同的使用方式
  1. ul id="demoTree" class="dtree" data-id="0"></ul>
  2. <div class="eleTree ele1"></div>
  3. <div class="tree"><ul id="demo"></ul></div>

第一种,是名为‘dtree’的layui第三方扩展的显示方式

第二种,是名为‘eleTree’的第三方扩展

第三种,是layUI默认的tree显示

如何获取数据

首先,需要引入不同扩展的css样式与js脚本

这里是dtree的css与js引用方式
<link rel="stylesheet" href="/layui_ext/dtree/dtree.css">
<link rel="stylesheet" href="/layui_ext/dtree/font/dtreefont.css">

这里是eleTree的css与js引用方式
<link rel="stylesheet" href="/css/eleTree.css">

接着,需要使用layUI加载所需要的模块

以eleTree扩展为例,此处为前端代码

layui.config({
       base: "/js/layui/lay/mymodules/"  //此处为eleTree的所在的模块(js文件)
    }).use(['jquery','table','eleTree','code','form','slider'], function() {
    	//此处是加载与配置tree
    	var $ = layui.jquery;
      	var eleTree = layui.eleTree;
      	var table = layui.table;
      	var code = layui.code;
    	var form = layui.form;
    	var slider = layui.slider;
		//这里我使用ajax异步获取
    	//也可以使用var data = {<?php echo $tree;?>}的方式模板赋值
    	$.ajax({
        	type:'get',
        	dataType: "json",
        	url:"index.php/admin/dossier/ajaxLst",//此处为接口地址
        	success:function(data){
            	console.log(data);
            	var data =data;
            	var obj={				//以下是配置tree属性
                	elem: '.ele1',
                	data: data,
                	// url: "/backend/public/index.php/admin/dossier/ajaxLst",
                	renderAfterExpand: true,
                	expandOnClickNode: true,
                	accordion:true,
                	contextmenuList:["copy","add","edit","remove"],
                	defaultCheckedKeys: [23]
            	};
            	var el1=eleTree.render(obj);//加载eleTree
        	}
    	});
    }

此处默认已经引入layUI的CSS样式与JS脚本

此处为后端代码

	//接收ajax异步数据
    public function ajaxLst()
    {
        $cate = new Catetree();
        $_tree = db('case_folder')->field('id,folder_name label,pid')->select();
        $treesRes = $this->get_attr($_tree,0);
        $treesRes = json_encode($treesRes);
        print_r($treesRes);
    }

    //重组数据结构,无限级分类排序
    public function get_attr($a,$pid){
        $tree = array();                                //每次都声明一个新数组用来放子元素
        foreach($a as $v){
            if($v['pid'] == $pid){                      //匹配子记录
                $v['children'] = $this->get_attr($a,$v['id']); //递归获取子记录
                if($v['children'] == null){
                    unset($v['children']);             //如果子元素为空则unset()进行删除,说明已经到该分支的最后一个元素了(可选)
                }
                $tree[] = $v;                           //将记录存入新数组
            }
        }
        return $tree;                                  //返回新数组
    }
}

遗留问题,为何在thinkinPHP5中,return返回json时会自动转义。导致数据格式不正确,所以此处使用print_r()。

事件的监听调用

以编辑为例,此处为前端代码

			var el1=eleTree.render(obj);//加载eleTree
			// 节点被编辑事件
            eleTree.on("nodeEdit(data1)",function(d) {
               // var arr=[];
               var data = {
                  id : d.data.id,
                  folder_name : d.value
               };
               console.log(data);
               // arr.push(data);
               $.ajax({
                  type:'post',
                  contentType:"application/json",
                  dataType:'json',
                  url:editUrl,
                  data:JSON.stringify(data),
                  success:function(data){
                     console.log(data);
                     layer.msg('修改成功!');
                  }
               });

               console.log('被编辑了');
            });

此处为后端代码

				$data = input('post.');  //获取前端数据
				//编辑
                $save = db('case_folder')->update($data);
                if($save){
                    exit(json_encode(array('code'=>0,'msg'=>'保存成功')));
                }else{
                    exit(json_encode(array('code'=>1,'msg'=>'保存失败')));
                }