Ztree应用_01

请选择分类:
<input type="hidden" name="goods_category_id" id="goods_category_id" value="{$row.goods_category_id}"/>
<input type="text" disabled="disabled" style="padding-left:1em" id="goods_category_name"/>
<ul id="parent_nodes" class="ztree"></ul>

必须加载下面这两个文件,应该还要加载jquery.min.js

<link href="__ZTREE__/zTreeStyle.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="__ZTREE__/jquery.ztree.core.min.js"></script>

<script type="text/javascript">
    var setting = {
        data: {
            simpleData: {
                enable: true,
                pIdKey:'parent_id',
            }
        },
        callback:{
            onClick:function(event,tree_ele,node){
                $('#goods_category_id').val(node.id);
                $('#goods_category_name').val(node.name);
            },
        },
    };
    var zNodes = {$gcs};//这个是后台传来的分类数据必须是json字符串 json_encode(二维数组)
    $(document).ready(function() {
        var ztree_obj = $.fn.zTree.init($("#parent_nodes"),setting,zNodes);//初始化
        ztree_obj.expandAll(true);//展开树状,默认收起
      //判断是否存在row,修改时才生效
        <present name="row">
            //回显数据，选中父级节点
            //找到节点
            var parent_node = ztree_obj.getNodeByParam('id',{$row.goods_category_id});
            ztree_obj.selectNode(parent_node);
            $('#goods_category_name').val(parent_node.name);
        </present>
    });
</script>