ztree + 异步加载

ztree 的异步加载:就是一级一级的从下加载数据,从点击省加载到市,点击某个市加载县.....

XML

<select id="findProvinceList" resultType="com.zhiguangyun.modules.datavalid.entity.Region">
        SELECT
            AREA_NAME as "areaName",
            REGION_CODE  as "regionCode",
            '0' as "pid",
            AREA_NAME as "name"
        FROM
            tb_admindivision  where
            REGION_CODE LIKE '%000000000000'
             order by  REGION_CODE
    </select>
    
    <select id="findAreaList" resultType="com.zhiguangyun.modules.datavalid.entity.Region">
        SELECT
            AREA_NAME as "areaName",
            REGION_CODE  as "regionCode",
            PARENTCODE   as "pid",
            AREA_NAME as "name"    
        FROM
            tb_admindivision  where
            PARENTCODE = #{id}
             order by  REGION_CODE
    </select>
    
    <select id="findOrgList" resultType="com.zhiguangyun.modules.datavalid.entity.Region">
        SELECT
            ORG_NAME   as "orgName",
            ORG_CODE   as "orgCode",
            AREA_CODE  as "pid",
            ORG_NAME   as "name"    
        FROM
            TB_ORGANIZATION  where
            AREA_CODE = #{id}
             order by AREA_CODE
    </select>

controller

/**
     * 获取省份数据
     */
    @RequestMapping(value = "provinceData")
    @ResponseBody
    public List<Region> provinceData() {
        List<Region> provinceList = dataSourceService.findProvinceList();
        for (int i = 0; i < provinceList.size(); i++) {
            String provinceId = provinceList.get(i).getRegionCode().substring(0, 2);
            provinceList.get(i).setId(provinceId);
            provinceList.get(i).setIsParent((true));
        }
        return provinceList;
    }

    /**
     * 获取市县镇村数据
     */
    @RequestMapping(value = "dataRegion")
    @ResponseBody
    public List<Region> dataRegion(String id) {
        List<Region> list = null;
        if (id.length() == 2 || id.length() == 4) {
            // 市 县
            Region region = new Region();
            region.setId(id);
            list = dataSourceService.findAreaList(region);
            for (int i = 0; i < list.size(); i++) {
                String rId = list.get(i).getRegionCode().substring(0, id.length() + 2);
                list.get(i).setId(rId);
                list.get(i).setIsParent(true);
            }
        } else if (id.length() == 6) {
            // 镇
            Region region = new Region();
            region.setId(id);
            list = dataSourceService.findAreaList(region);
            for (int i = 0; i < list.size(); i++) {
                String rId = list.get(i).getRegionCode().substring(0, id.length() + 3);
                list.get(i).setId(rId);
                list.get(i).setIsParent(true);
            }
        } else if (id.length() == 9) {
            // 村
            Region region = new Region();
            region.setId(id);
            list = dataSourceService.findAreaList(region);
            for (int i = 0; i < list.size(); i++) {
                String rId = list.get(i).getRegionCode().substring(0, id.length() + 3);
                list.get(i).setId(rId);
                List<Region> listChild = new ArrayList<Region>();
                listChild = dataSourceService.findOrgList(list.get(i));
                if (listChild.size() != 0)
                    list.get(i).setIsParent(true);
            }
        }

        else if (id.length() == 12) {
            // 机构
            Region region = new Region();
            region.setId(id);
            list = dataSourceService.findOrgList(region);
            
        }
        return list;
    }

entity

public class Region {

    private String areaName;    //地区名
    private String regionCode;  //地区表(tb_admindivision)地区编码
    private String orgName; //机构名称
    private String orgCode; //机构编码
    private String name;
    private boolean isParent;
    private String id;
    private String pid;

jsp

<link href="${ctxStatic}/jquery-ztree/3.5.12/css/zTreeStyle/metro.css" rel="stylesheet" type="text/css"/>
<script src="${ctxStatic}/jquery-ztree/3.5.12/js/jquery.ztree.all-3.5.min.js" type="text/javascript"></script>

<script type="text/javascript">
    var setting = {
        async : {
            enable : true,
            url : "${ctx}/datavalid/dataSource/dataRegion",
            autoParam : [ "id" ],
        },
        data : {
            simpleData : {
                enable : true,
                idKey : "id",
                pidKey : "pid"
            }
        },
        callback : {
            onClick : zTreeOnclick
        }
    };

    $(document).ready(function() {
        initZTree();
    });

    function initZTree() {
        $.ajax({
            url : "${ctx}/datavalid/dataSource/provinceData",
            type : "post",
            dataType : "json",
            success : function(data) {
                /*  alert(JSON.stringify(data)); */
                $.fn.zTree.init($("#ztree"), setting, data);
            },
            error : function() {

            }
        });
    }
    function zTreeOnclick(event, treeId, treeNode) {
        if (treeNode.orgName != null) {
            window.parent.document.getElementById("orgName").value = ""
                    + treeNode.orgName;
            window.parent.document.getElementById("orgCode").value = ""
                    + treeNode.orgCode;
            //关闭此页面
            var index = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index);
        }
    };
</script>

效果:

猜你喜欢

转载自blog.csdn.net/qq_25221835/article/details/81667534
今日推荐