zTreeの簡単な例

zTreeの簡単な例zTreeは、jQueryによって実現される多機能「ツリープラグイン」である.優れた性能、柔軟な構成、多様な機能の組み合わせがzTreeの最大の利点です.
zTree公式サイト
zTreeAPIダウンロードリンク
ページには主にいくつかのファイルが導入されています.

<link type="text/css" rel="stylesheet" href="zTree/zTreeStyle.css" />
<script type="text/javascript" src="js/jquery.ztree.core-3.5.js">script>
<script type="text/javascript" src="js/jquery.ztree.excheck-3.5.js">script>

htmlページ:

<div class="edit_content">
            <div class="qxlb">
                <div class="add_title"> 
                    <span>    span>
                div>
                <div class="qxlb_content">
                <ul id="tree" class="ztree">ul>
                div>
            div>
  div>

コアjs:

<SCRIPT type="text/javascript">
var zTree;
//      
function createTree() {
    var setting = {
        check:{
            enable:true
        },
        view: {
            dblClickExpand: true,
            expandSpeed: ""
        },
        //    
        async: {
            enable: true,//        
            url:"/role/getResourcesList.do", //          URL   
            otherParam: [ "roleId", '${updateRole.id}']
            
        },
        
        //  data   pIdKey,idKey,name                  ， sql        json       ，                 
        data: {
            simpleData: {
                enable: true,
                pIdKey: "PARENTID",
                idKey: "ID"
            },
                key: {
                    checked: "CHECKED",
                    name:"NAME"
                }
        },
        callback: {
          onAsyncSuccess: zTreeOnAsyncSuccess  
    }  
    };
    //      
    zTree = $.fn.zTree.init($("#tree"), setting);   
    zTree.expandAll(true);
}
/*         tree          */
var firstAsyncSuccessFlag = 0;
function zTreeOnAsyncSuccess(event, treeId, msg) {  
if (firstAsyncSuccessFlag == 0) {  
          try {  
                 //             
                 var selectedNode = zTree.getSelectedNodes();  
                 var nodes = zTree.getNodes();  
                 zTree.expandNode(nodes[0], true);  
                 var childNodes = zTree.transformToArray(nodes[0]);  
                 zTree.expandNode(childNodes[1], true);  
                 zTree.selectNode(childNodes[1]);  
                 var childNodes1 = zTree.transformToArray(childNodes[1]);  
                 zTree.checkNode(childNodes1[1], true, true);  
                 firstAsyncSuccessFlag = 1;  
           } catch (err) {  
           
           }  
     }  
}

$(function(){
    //         
    createTree();   
});

function submitRole(){
    //       ，    
    var nodes = zTree.getCheckedNodes();
    var ids = [];
    for(var i=0,l=nodes.length;i//var _resourcesIds=ids.join(",");
    document.getElementById("hidden_resourceList").value=ids.join(",");
            
    //$("#resourcesRoleListForm").submit();
}
SCRIPT>