ztree应用_02

应该都要加载jQuery.min.js

<tr>
    <td class="label">权限授予</td>
    <td>
        <div id="permission-ids"></div>
        <ul id="permissions" class="ztree"></ul>
    </td>
</tr>

<link href="__ZTREE__/zTreeStyle.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="__ZTREE__/jquery.ztree.core.min.js"></script>
<js href="__ZTREE__/jquery.ztree.excheck.min.js" />
<script type="text/javascript">
    var setting = {
        check:{
            enable:true,
        },
        data: {
            simpleData: {
                enable: true,
                pIdKey:'parent_id',
            }
        },
        callback:{
            onCheck:function(event,ele_id,node){
              //获取所有被勾选的节点
              var nodes = ztree_obj.getCheckedNodes(true);
              var box = $('#permission-ids');
              box.empty();//先清空然后再添加
              $(nodes).each(function(i,v){
                 var html = '<input type="hidden" name="permission_id[]" value="'+v.id+'"/>';
                 $(html).appendTo(box);
                });
            },
        },
    };

    var zNodes = {$permissions};
    var ztree_obj;
    $(document).ready(function() {
        ztree_obj = $.fn.zTree.init($("#permissions"), setting, zNodes);//初始化ztree
        ztree_obj.expandAll(true);//展开树状结构

        //编辑页面回显关联的权限
        <present name="row">
           var permission_ids = {$row.permission_ids};

    $(permission_ids).each(function(i,v){

        var node = ztree_obj.getNodeByParam('id',v);

        ztree_obj.checkNode(node,true,false,true)
//四个参数的含义   => node,true,false,true
//1.请务必保证此节点数据对象node是 zTree 内部的数据对象
// 2.true 表示勾选节点
//3.表示只修改此节点勾选状态，无任何勾选联动操作
//4. true 表示执行此方法时触发 beforeCheck & onCheck 事件回调函数

    });

       </present>
    });
</script>