前段ztree 树状插件

  效果展示    

 

1: 首先我们需要引入 前段的ztree 插件    配置js 文件    这个插件是基于jquery  必须先引入jquery

 如果 我们 需要完成 点击选择 的样式 则需要引入 excheck .js 文件的

 

2: 配置参数

<script type="text/javascript">
    $(function(){
        var setting = {
　　　　　　　　//设定是否选中
            check: {　　
                enable: true,　　
            },
            data: {
                simpleData: {
                    enable: true,
                    pIdKey:'parent_id',　　　　//parent_id  默认 pid
                    idKey:'permission_id',　　//主键       默认 id
                },
                key: {
                    url: "xUrl" 　　　　　　   //配置默认的 url 地址   会自动生成 的A标签
                }
            },
            callback: {
                onCheck: checkPer　　　　　　//回调函数　　
            }
        };
        var zNodes ={$rows};　　　　　　　　//后端 传过来的json 参数
//        实例化一颗树
        var ztreeobj =  $.fn.zTree.init($("#per_info"),setting,zNodes);
        ztreeobj.expandAll(true); //样式全开
        var perlistdiv = $('#perlist');　　　　//div盒子
        perlistdiv.empty();//删除原有的结果
        function checkPer(event, treeId, treeNode){
            var allcheckedNode = ztreeobj.getCheckedNodes(true);
            perlistdiv.empty();
            $.each(allcheckedNode, function(k, v){　　　　//遍历循环
                perlistdiv.append('<input type="hidden" name="permission_id[]" value="'+v.permission_id+'"/>'); // 只需要 加入到一个 htlml 中的 div 盒子中  用作于数据的添加
            });
        }
    });
</script>



php后端的 调用
1 控制器

public function add(){
    //1实例化对象
    $permissionModel= D('Permission');
    //2 获取所有的
    $rows=$permissionModel->getlist();
    $PermissionModel = D('Permission');
    $rows=$PermissionModel->getList();
    $this->assign('rows',json_encode($rows));
    $this->display();
}

2 模型

//获得 所有树的内容 方法

public function getList($status=0){
//        显示
        $this->where(array('status'=>$status));
        $this->order('left_key asc');
        return $this->select();
    }