表单中显示ztree树结构

1. 效果图

   
   

2. 制作步骤

1. 页面的HTML

                    

                                <div class="col-md-6 col-sm-6"  >
                                        <div class="form-group ">
                                            <label class="col-sm-3 control-label" for="">
                                                所属组织
                                                <span id="label_orgname"><font
                                                    color="RED" style="font-size: 12px">*</font></span>
                                            </label>
                                            <div class="col-sm-9" style="text-align:left;">
                                                <div style=" border-collapse: separate;display: table;"  id="dept_div">
                                                    <input type="text"  id="textorg"  placeholder="请选择所属部门" name="orgname"  readonly="readonly"
                                                    style=" border-bottom-right-radius: 0px;border-top-right-radius: 0px;" 
                                                    class="form-control" data-bv-field="contacts_id" />
                                                    <i style="display: none;" class="form-control-feedback" data-bv-icon-for="contacts_id"></i>
                                                    <div onclick="showMenu('dept_div'); return false;" style="cursor:pointer;" class="input-group-addon"> 
                                                       <!--  <span class="glyphicon-user glyphicon"></span> -->选择
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    
  <!-- 一般讲该段代码放在form标签的外层,这样就会显示在最上方-->                                  
                    <div id="menuContent" class="menuContent"
                        style="background: #fff; display: none; position: absolute; border: 1px solid #ddd; border-radius: 5px;">
                        <ul id="dept_tree" class="ztree"
                            style="margin-top: 0; width: 296px;">
                        </ul>
                    </div>

1. 页面的js-----初始化ztree

    
   

jQuery(document).ready(function() {
            $.ajax({
                    url:baseURL+'/umuser/getTreeData.action',
                    dataType: 'json',
                    type:'post',
                    async: false,
                    success: function(data){
                        zNodes=data;
                    }
                });
                
                $.fn.zTree.init($("#dept_tree"), setting, zNodes);

});

        var setting = {
                 data: {
                     simpleData: {
                         enable: true
                     }
                 },
                 callback: {
                     onClick:function zTreeOnClick(event, treeId, treeNode){
                             //获得父节点的name 和 id
                             var ids=[];
                             var parentsids = getParentids(ids,treeNode);//获得当前节点的父节点id
                             parentsids.push(treeNode.id);
                             var names=[];
                             var parentsnames = getParentnames(names,treeNode);//获得当前节点的父节点name
                             parentsnames.push(treeNode.name);
                             
                             //alert(parentsids+'    '+parentsnames);
                             //var id = treeNode.id;
                             $('#parentids').val(parentsids+'');//设置parentsids的值
                             $('#parentnames').val(parentsnames+'');//设置parentsnames的值
                             $('#textorg').val(treeNode.name);//设置节点所属部门的值
                             $('#orgid').val(treeNode.id);//设置orgid
                             //$('#frm_umuser').bootstrapValidator('revalidateField', 'dept_name');
                              $("#usersForm").data('bootstrapValidator').updateStatus('orgname', 'VALIDATED', null).validateField('orgname');
                        
                             hideMenu();
                         }
                 },
                 view:{
                     fontCss:{font:{'background-color':'black', 'color':'white'}}
                 }
                 
             };

1. 写"显示/隐藏"的js方法

        //隐藏zTree外围div容器
             function hideMenu() {
                 $("#menuContent").fadeOut("fast");
                 $("body").unbind("mousedown", onBodyDown);
             }

             //点击“选择”后显示zTree树
             function showMenu(id) {
                 CurInput = 1; //标记第一个文本框
                 var cityObj = $("#"+id);
                 var cityOffset = $("#"+id).offset();
                 var w=$("#"+id).css('width');
                 var sw=w.substr(0,w.length-2)-12+'px';
                 $("#dept_tree").width(sw);
                 
                 //定位zTree外围div容器位置
                 //alert(cityOffset.left+":"+cityOffset.top);
                 $("#menuContent").css({
                    // left: cityOffset.left-mod_left + "px",
                    // top: cityOffset.top-mod_top-24 + "px"
                    left:cityOffset.left + "px",
                    top: cityOffset.top+30 + "px"
                 }).slideDown("fast");
                 //绑定页面的鼠标按下事件
                 $("body").bind("mousedown", onBodyDown);
             }
             //判断当前事件来源
             function onBodyDown(event) {
                 if (! (event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length > 0)) {
                     hideMenu();
                 }
             }