根据树形点击回填子节点信息查询:
根据点击左边树形图的子节点来回填三个信息,分别是区域编号、区域名称、营销经理
这三个黑色的文本框是无法选中的,需要通过点击树形图的子节点来进行回填数据
选中一个子节点信息“现业工商户部”后,会回填出“现业工商户部”的详细信息,他的编号,名称以及经理都回填到文本框上,然后进行查询,根据这三个条件查询对应信息
右边的清空按钮是用来清空这三个无法选中的文本框里面的信息的,清空之后再查询
就可以查询出所有的信息,只有选中子节点才会根据给出的条件判断进行相对应的查询
//树形回填的js代码
$(function () {
var zNodes = [];
var setting = {
view: {
selectedMulti: false, //设置是否允许同时选中多个节点-禁止多点同时选中的功能
},
check: {
enable: false, //需要显示 checkbox
chkStyle: "checkbox",
autoCheckTrigger: false
},
data: {
simpleData: {
enable: true//使用简单 Array 格式的数据
}
},
edit: {
enable: true//设置 zTree 是否处于编辑状态
},
callback: {
onClick: zTreeOnclick,
},
};
//树形数据(航线)显示
$.getJSON("${ctx}/servlet/YxhfgzServlet?cyy=selectSX", function (data) {//这句是链接
if (data != null) {
for (var i in data) {
var cc = {};
cc.id = data[i].areaID;
cc.pId = data[i].locationID
if ((data[i].regionName) == null) {
cc.name = $.trim(data[i].regionName);
}
if ((data[i].regionName) != null) {
cc.name = $.trim(data[i].regionName);
}
if ((data[i].locationID) == null || (data[i].locationID) == 0) {
cc.pId = 0;
}
cc.open = false;
zNodes.push(cc); //push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。
}
$(document).ready(function () {
$.fn.zTree.init($("#tree"), setting, zNodes);
});
}
})
})
function zTreeOnclick(event, treeId, treeNode) {//树形点击回填事件
var areaID = treeNode.id;
if (areaID == undefined) {
areaID = 0;
}
$.post("${ctx}/servlet/YxhfgzServlet?cyy=selectSXID", { areaID: areaID }, function (data) {
//下面是回填的三个数据
$("#QuYuBiangHao").val(data.data[0].areaNumber);
$("#QuYuMingCheng").val(data.data[0].regionName);
$("#YingXiaoJingLi").val(data.data[0].managerName);
})
}
jsp页面的树形的一样样式:
<div style="height:550px;padding:0;overflow:auto; border:1px solid #cccccc ;"><!-- 树形 -->
<ul id="tree" class="ztree"></ul>
</div>
这个树形是用以下四个插件做的:
zTree_v3-master/css/demo.css
zTree_v3-master/css/zTreeStyle.css
zTree_v3-master/js/jquery.ztree.core.js
zTree_v3-master/js/jquery.ztree.excheck.min.js