ztree管理html元素,ZTree的使用

ztree和input整合

需要导入相应的包：

//主要控制ztree的点击事件等

//主要控制ztree的样式显示

html标签写好

//在这是为了存储其他的信息，类似名字对应的id等等

javascript的控制内容

initZTree:function(){

var data;

//在这是为了让他隐藏不占用位置

$("#tree").attr("style", "width:95%;min-height:200px;display:none;overflow-y:auto;overflow-x:auto;position:absolute;z-index:1000");

$.myAjax({

url: "http://192.168.12.127:8088//unit/findUnitsTreeBySystemId.action", //拿取需要的数据

type: "post",

data:{'unitId':JSON.parse(sessionStorage.getItem("systemAccount")).unitId,'typeId':0,'systemId':1},

dataType: "json",

async: false,

success: function(res) {

if(res.resultCode=200){

var treeArr = [];

var tempArr = {};

for(var i = 0;i

点击事件

function zTreeOnClick (event, treeId, treeNode) {// 点击 树的事件 这里写入自己要写的操作

if(treeNode.level == 2 || treeNode.level == 1 || treeNode.level == 3 || treeNode.level ==4 || treeNode.level == 0){

//alert("点击");

$('#reportOrganname').val(treeNode.name);

$('#reportOrganId').val(treeNode.id);

$("#tree").toggle();

}

/* if(treeId == 'add-modal-select-tree') {

_iframe.$("#add-modal-department").val(treeNode.name);

_iframe.$("#sourceOrganId").val(treeNode.id);

_iframe.$("#add-modal-select-tree").toggle()

}*/

}

这是设置ztree的隐藏和显示的方法 我们把他设置为reportOrganname框的触发事件

$('#reportOrganname').focus(function(){

$("#tree").toggle();return false;

})

这里为了判断当选中的是空的时候我们也将隐藏的input内容清空以免影响数据

function clearOrgan(){

if($("#reportOrganname").val()==''||$("#reportOrganname").val()==undefined){

$("#reportOrganId").val('');

}

}

看一下最后结果：

点击之后

数据回显且展示对应设置项