Java树形图

根据树形点击回填子节点信息查询：

根据点击左边树形图的子节点来回填三个信息，分别是区域编号、区域名称、营销经理

这三个黑色的文本框是无法选中的，需要通过点击树形图的子节点来进行回填数据

选中一个子节点信息“现业工商户部”后，会回填出“现业工商户部”的详细信息，他的编号，名称以及经理都回填到文本框上，然后进行查询，根据这三个条件查询对应信息

右边的清空按钮是用来清空这三个无法选中的文本框里面的信息的，清空之后再查询

就可以查询出所有的信息，只有选中子节点才会根据给出的条件判断进行相对应的查询

//树形回填的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