zTreeツリーのロードが遅い解決策-非同期ロードの使用

zTreeツリーロード
zTreeは、jQueryによる多機能「ツリープラグイン」です.優れたパフォーマンス、柔軟な構成、さまざまな機能の組み合わせがzTreeの最大の利点です.
プロジェクトをする時、私達はいつもzTreeを使うことができて、しかし、ある時、木のデータが多すぎて、木のロードが遅いため、テストが10000本を超えるデータは3秒ぐらいロードしなければなりません.もしもっと多くのデータがあれば、ユーザーの体験はどんな様子ですか?
今日もプロジェクト中にこの問題に遭遇したので、メモを取りに来ました!
1、クエリーデータ
最初のステップはもちろん、必要なツリーデータを検索します.SQLの書き方は以下の通りです.

@Autowired
private JdbcTemplate jdbcTemplate;

@Override
public List findUserList(String areaCode) {
    //            ，   ，        ID
    if(StringUtils.isEmpty(areaCode)) {
        areaCode = "620000";
    }
    StringBuilder sql = new StringBuilder();
    sql.append("SELECT * FROM USER WHERE PART_ID = '" + areaCode + "'");
    //          ，      ，             ，    ，      areaCode    
    if("620000".equals(areaCode)) {
        sql.append("    OR ID = '620000'");
    }
    List list = jdbcTemplate.query(sb.toString(), new Object[] {},new BeanPropertyRowMapper(User.class));
    return list;
}

以上の実装層によれば,データのlist集合を取得し,ztreeに必要なjsonフォーマットデータを接合することができる.
2、JSON文字列のつづり

@Autowired
private UserService userService;

//Controller ，    post
@RequestMapping(value = "/zTree", method = RequestMethod.POST)
public void areaTree(HttpServletRequest request, HttpServletResponse response) {
    //         ID
    String areaCode = request.getParameter("id");
    try {
        //        
        List<User> list = userService.findUserList(areaCode);
        List<Map<String,String>> ztree = new ArrayList<Map<String, String>>();
        if (list != null && !list.isEmpty()) {
            int a = 0;
            //  list      json  
            for (User user : list) {
                a++;
                String id = String.valueOf(user.getId());
                String pId = String.valueOf(user.getPartId());
                Map<String, String> map = new HashMap<String, String>();
                map.put("id", id);
                map.put("pId",pId);
                //                      ，      
                if(id.substring(id.length()-3, id.length()).equals("000")
                {
                    map.put("isParent","true");//   
                }else {
                    map.put("isParent","false");//   
                }
                map.put("name", user.getName());
                map.put("title", user.getName());
                map.put("viewtype", "1");
                map.put("regiontype", "1");
                if(a==1) {
                    map.put("open", "true");//    
                }else {
                    map.put("open", "false");
                }
                ztree.add(map);
            }
        }
        JSONArray array = JSONArray.fromObject(ztree);
        String json = array.toString();
    } catch (Exception e) {
        e.printStackTrace();
    }
}

これで、私たちが必要とするjson文字列がつなぎ合わせられ、次は、ページに表示されます!
3、ページを展示する

<ul id="ztree" class="ztree">ul>


<script>
$(function() {
    //      
    zTree = $.fn.zTree.init($("#ztree"), setting);
});
var zTree;
var setting = {
    async: {
        enable: true,
        type:"post",
        dataType:'json',
        url:"/zTree",//      Controller   
        //   id     id，      ，        id         ，     ， Controller    name      。
        //   String areaCode = request.getParameter("id");
        autoParam:["id"] 
    },
    callback: {
        onClick: zTreeOnClick, //     
        onAsyncSuccess: zTreeOnAsyncSuccess //       
    },
    view:{
        dblClickExpand: false,
        showIcon: false, //    icon  
    },
    data: {
        simpleData: {
            enable: true
        }
    }
};
var firstAsyncSuccessFlag = 0;

function zTreeOnAsyncSuccess(event, treeId, treeNode, msg) {
    var arry = eval(msg);
    var sumProject=0; 
    if (arry.length > 0 && arry[0].res_level=="1") {
        for (var i = 0; i < arry.length; i++) {
            sumProject += parseInt(arry[i].sumProject);
        }
    }
    if (firstAsyncSuccessFlag == 0) {
        try {
            //             
            var selectedNode = zTree.getSelectedNodes();
            var nodes = zTree.getNodes();
            zTree.expandNode(nodes[0], true);
            firstAsyncSuccessFlag = 1;
        } catch (err) {}
    }
}
//     
function zTreeOnClick(e, treeId, treeNode){
    //      ID
    var areaCode = treeNode.id;
    //          
}
script>