layui tree 树结构使用举例

html部分

<ul id="cateTree"></ul>

 

js部分

<script>
      layui.use(['form','layer','tree'], function(){
         $ = layui.jquery;
         var form = layui.form
         ,layer = layui.layer;
         
         layui.tree({
            elem: '#cateTree' //指定元素
            ,target: '_blank' //是否新选项卡打开（比如节点返回href才有效）
            ,click: function(item){ //点击节点回调
               //$("#cateName").val(item.name);
               $("#parent_id").val(item.id);
               //console.log(item);

            }
            ,nodes: {$nodes}
         });
         
          //监听提交
          form.on('submit(add)', function(data){
            //获取元素的值，发异步，把数据提交给php
            var parent_id = $("#parent_id").val();
            $.ajax
            ({
                type:"post",
                url : "__CONTROLLER__/categoryAddSave",
                data : {
                           name:data.field.name,
                           show_order:data.field.show_order,
                           parent_id:parent_id,
                           type:data.field.type,
                           alias_key:data.field.alias_key,
                       },
                dataType:"json",    
                success:function(callBack)
                {
                  if(callBack.state == 1)
                  {
                    layer.msg("增加成功", {icon: 1,time: 1000},function () {
                        // 获得frame索引
                        var index = parent.layer.getFrameIndex(window.name);
                        //关闭当前frame
                        parent.layer.close(index);
                        parent.location.reload();
                    });
                  }
                  else if(callBack.state == 2)
                  {
                    layer.msg("增加失败", {icon: 2,time: 1000},function () {
                        // 获得frame索引
                        var index = parent.layer.getFrameIndex(window.name);
                        //关闭当前frame
                        parent.layer.close(index);
                    });
                  }
                }
            });
            return false;
          });
  
        });
   </script>

 

PHP部分

控制器:

public function categoryAddShow()
    {
      $categoryDB = M('category');
      $category = $categoryDB->select();

      $arrs = array();
      $cateNodes = json_encode(recur($arrs,$category));

      $this->assign('nodes',$cateNodes);
        $this->display();
    }

公共文件

<?php
   function recur($arrs,$category,$parent_id=0)
   {
      foreach ($category as $k => $v)
      {
         if($v['parent_id'] == $parent_id)
         {
             $arr = array('name' => $v["name"],'id'=>$v['id'],'children'=>array());
             $arr['children'] = recur($arr["children"],$category,$v['id']);
             array_push($arrs,$arr);
         }
      }
      return $arrs;
    }  
?>