【Fancytree】------- Fancytree 树结构使用示例代码

我会带着你远行 2022-02-03 12:37 301阅读 0赞

>     <!DOCTYPE html>
>     <html lang="en">
>     <head>
>         <meta charset="UTF-8">
>         <title>督导首页</title>
>         <link href="/libs/layui/v2.4.5/css/layui.css" rel="stylesheet" type="text/css">
>         <link rel="stylesheet" href="/libs/bootstrap/css/bootstrap.min.css" />
>         
>         <link href="/libs/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" />
>         
>         <link href="/libs/font-awesome-4.7.0/css/font-awesome.css" rel="stylesheet" />
>         <link rel="stylesheet" href="/libs/cdn/animate.css" />
>         <link rel="stylesheet" href="/libs/cdn/ionicons.min.css" />
>         
>         <link rel="stylesheet" href="/libs/adminlte/css/skins/_all-skins.css" />
>         
>         <link rel="stylesheet" href="/libs/fancytree/skin-bootstrap/ui.fancytree.less"/>
>         <link rel="stylesheet" href="/jruntime/views/layui/css/base.css">
>         <link rel="stylesheet" href="/jydd/css/treeconfig.css">
>         <style>
>             td span .fancytree-expander {
>                 margin-top: -5px;
>                 margin-right: 5px;
>             }
>             .fancytree-checkbox {
>                 font-size: 19px;
>                 padding-right: 5px;
>                 vertical-align: -3px;
>             }
>     
>             .school-tab-item{
>                 height: 410px;
>                 overflow: auto;
>             }
>         </style>
>     </head>
>     <body>
>     <div class="homenotice-body">
>         <div class="col-lg-12 col-md-12">
>             <div class="" style="position: fixed;top: 10px;right: 15px;z-index: 111;">
>                 <button type="button" class="layui-btn  layui-btn-normal" id="btn-save">确定</button>
>             </div>
>             <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
>     
>                 <ul class="layui-tab-title" >
>                     <li class="layui-this">教育局</li>
>                     <li>学校</li>
>     
>                 </ul>
>                 <div class="layui-tab-content" style="height: 100px;">
>                     <div class="layui-tab-item layui-show">
>                         <div class="school-tab-item">
>                             <table id="JY_tree" class="table  table-hover table-striped  table-bordered">
>                                 <thead style="background-color: #F2F2F2;font-weight: bold;border-bottom: 0px;">
>                                 
>                                 <tr>
>                                     <th style="text-align: left">
>                                         部门名称
>                                     </th>
>                                     <th style="text-align: center;">部门编码</th>
>                                     <th style="text-align: center;">组织类别</th>
>                                 </tr>
>                                 </thead>
>                                 <tbody>
>                                 
>                                 <tr>
>                                     <td></td>
>                                     <td style="text-align: center"></td>
>                                     <td style="text-align: center"></td>
>                                 </tr>
>                                 </tbody>
>                             </table>
>                         </div>
>     
>                     </div>
>                     <div class="layui-tab-item">
>                         <div class="school-tab-item">
>                             <table id="SH_tree" class="table  table-hover table-striped  table-bordered">
>                                 <thead style="background-color: #F2F2F2;font-weight: bold;border-bottom: 0px;">
>                                 
>                                 <tr>
>                                     <th style="text-align: left">
>                                         学校名称
>                                     </th>
>                                     <th style="text-align: center;">部门编码</th>
>                                     <th style="text-align: center;">组织类别</th>
>                                 </tr>
>                                 </thead>
>                                 <tbody>
>                                 
>                                 <tr>
>                                     <td></td>
>                                     <td style="text-align: center"></td>
>                                     <td style="text-align: center"></td>
>                                 </tr>
>                                 </tbody>
>                             </table>
>                         </div>
>                     </div>
>     
>                 </div>
>             </div>
>     
>         </div>
>     
>     </div>
>     
>     <script src="/libs/layui/v2.4.5/layui.js"></script>
>     <script src="/libs/jquery/jquery-3.2.1.min.js"></script>
>     <script src="/libs/jquery-ui-1.12.1/jquery-ui.js"></script>
>     <script src="/libs/jquery/jquery.cookie.js"></script>
>     <script src="/libs/bootstrap/js/bootstrap.min.js"></script>
>     <script src="/libs/layer3.1.1/layer.js"></script>
>     <script src="/libs/fancytree/jquery.fancytree.js"></script>
>     <script src="/libs/fancytree/jquery.fancytree.dnd.js"></script>
>     <script src="/libs/fancytree/jquery.fancytree.edit.js"></script>
>     <script src="/libs/fancytree/jquery.fancytree.glyph.js"></script>
>     <script src="/libs/fancytree/jquery.fancytree.gridnav.js"></script>
>     <script src="/libs/fancytree/jquery.fancytree.table.js"></script>
>     <script src="/libs/fancytree/jquery.fancytree.wide.js"></script>
>     <script src="/libs/fancytree/jquery.fancytree.fixed.js"></script>
>     <script src="/jruntime/views/core/core.js"></script>
>     <script src="/libs/tools/jquery.formFill.js"></script>
>     <script src="/libs/split/split.min.js"></script>
>     <script>
>     
>                 var dataarray=[];
>                 function datalist(data) {
>                     for(var i=0;len=data.length,i<len;i++){
>                         // if(data[i]["children"]!=null && data[i]["children"]!="null" && data[i]["children"].length>0){
>                         //     datalist(data[i]["children"]);
>                         // }else{
>                             if(data[i]["children"]==null || data[i]["children"]=="null"){
>                                 dataarray.push(data[i]["data"]);
>                             }
>     
>                        // }
>                     }
>                 }
>     
>                 var imx_type ="教育局";
>                 var imx_rowID=localStorage.PULISHID;
>                 var _font={
>                     map: {
>                         doc: "glyphicon glyphicon-list-alt",
>                         docOpen: "glyphicon glyphicon-list-alt",
>                         checkbox: "fa fa-square-o",
>                         checkboxSelected: "fa fa-check-square-o",
>                         checkboxUnknown: "glyphicon glyphicon-share",
>                         dragHelper: "glyphicon glyphicon-play",
>                         dropMarker: "glyphicon glyphicon-arrow-right",
>                         error: "glyphicon glyphicon-warning-sign",
>                         expanderClosed: "glyphicon glyphicon-menu-right",
>                         expanderLazy: "glyphicon glyphicon-menu-right",  // glyphicon-plus-sign
>                         expanderOpen: "glyphicon glyphicon-menu-down",  // glyphicon-collapse-down
>                         folder: "glyphicon glyphicon-folder-close",
>                         folderOpen: "glyphicon glyphicon-folder-open",
>                         loading: "glyphicon glyphicon-refresh glyphicon-spin"
>                     }
>                 };
>                 window.mc_IsLoading=true;
>                 $(document).ready(function () {
>     
>                     fn_getMCTree("JY_tree",imx_type,"com.jydd.bapi.NOTICE.BAPI_GetFanvyTreeAdv",window.mc_IsLoading);
>                     function fn_getMCTree(v_element,v_type,v_api,v_isLoading) {
>                         var json={};
>                         json.token = sessionStorage.getItem("_pub_token");
>                         // json.api = "com.jydd.bapi.ESPIndex.BAPI_GetFanvyTreeAdv";
>                         json.api = v_api;
>                         json.clz = "";
>                         var params =[];
>                         params.push("ORG_DEPARTMENT");
>                         params.push(imx_rowID?imx_rowID:"");
>                         params.push(v_type);
>                         json.data = JSON.stringify(params);
>                         $.ajax({
>                             type: "POST",
>                             url:"/BAPI/api",
>                             data:json,
>                             dataType:"text",
>                             async: true,
>                             success:function(result) {
>                                 //console.log(result);
>                                 try {
>                                     var json= JSON.parse(result);
>                                     // console.log(json);
>                                     if(json.success==1){
>                                         mc_treedata = json.json;
>                                         if(v_isLoading){
>                                             $("#"+v_element+"").fancytree({
>                                                 extensions: [/*"dnd",*/ "edit", "glyph", "table"],
>                                                 checkbox: true,
>                                                 // autoCollapse: true,
>                                                 debugLevel: 2,
>                                                 quicksearch: true,
>                                                 icon: false,
>                                                 dnd: {
>                                                     focusOnClick: true,
>                                                     dragStart: function (node, data) {
>                                                         return false;
>                                                     },
>                                                     dragEnter: function (node, data) {
>                                                         return false;
>                                                     },
>                                                     dragDrop: function (node, data) {
>                                                         return false;
>                                                     }
>                                                 },
>                                                 glyph: _font,
>                                                 source: mc_treedata,
>                                                 table: {
>                                                     indentation: 20,
>                                                     // nodeColumnIdx: 0, //将节点标题渲染到第一列
>                                                     nodeColumnIdx:0 // render the node title into the 2nd column
>     
>                                                 },
>                                                 activate: function (event, data) {
>                                                 },
>                                                 renderColumns: function (event, data) {
>                                                     var node = data.node;
>                                                   //  console.log(node);
>                                                     $tdList = $(node.tr).find(">td");
>                                                     //标题栏
>                                                     $tdList.eq(1).text(node.data["CODE"]);
>                                                     $tdList.eq(2).text(node.data["ORG_TYPE_NAME"]);
>                                                 },
>                                                 wide: {
>                                                     iconWidth: "1em",     // Adjust this if @fancy-icon-width != "16px"
>                                                     iconSpacing: "0.5em", // Adjust this if @fancy-icon-spacing != "3px"
>                                                     levelOfs: "1.5em"     // Adjust this if ul padding != "16px"
>                                                 },
>                                                 dropMarkerOffsetX: 42,  // absolute position offset for .fancytree-drop-marker
>                                                 // relatively to ..fancytree-title (icon/img near a node accepting drop)
>                                                 dropMarkerInsertOffsetX: -16,
>                                                 select: function (event, data) {
>                                                     var node = data.node;
>                                                     var __parent = node.getParent();
>     
>                                                     if (__parent.title == "root" && __parent.key.indexOf("root") >= 0) {
>                                                         var __parent = null;
>                                                     }
>     
>                                                     if (node.isSelected()) {
>                                                         if (node.isUndefined()) {
>                                                             // Loadand select all child nodes
>                                                             node.load().done(function () {
>                                                                 node.visit(function (childNode) {
>                                                                     childNode.setSelected(true);
>                                                                 });
>     
>                                                             });
>                                                         } else {
>                                                             // Selectall child nodes
>                                                             node.visit(function (childNode) {
>                                                                 childNode.setSelected(true);
>                                                             });
>                                                         }
>                                                     }
>                                                     else {
>                                                         if (node.isUndefined()) {
>                                                             // Loadand select all child nodes
>                                                             node.load().done(function () {
>                                                                 node.visit(function (childNode) {
>                                                                     childNode.setSelected(false);
>                                                                 });
>                                                             });
>                                                         } else {
>                                                             // Selectall child nodes
>                                                             node.visit(function (childNode) {
>                                                                 childNode.setSelected(false);
>                                                             });
>                                                         }
>                                                     }
>     
>     
>     
>                                                     //var __countSelect = 0;
>     
>                                                     var __countUnSelect = 0;
>                                                     if (__parent) {
>                                                         var __children = __parent.getChildren();
>                                                         for (var i = 0; i < __children.length; i++) {
>                                                             if (__children[i].selected) {
>                                                             } else {
>                                                                 __countUnSelect++;
>                                                             }
>                                                         }
>     
>                                                         if (__countUnSelect == __children.length) {
>                                                             __parent.setSelected(false);
>                                                         }
>     
>                                                         __countUnSelect = 0;
>                                                     }
>     
>                                                 }
>                                             });
>                                             v_isLoading = false;
>                                             window.mc_IsLoading=false;
>                                         }else {
>                                             $("#"+v_element+"").fancytree("option", "source", mc_treedata);
>                                         }
>     
>                                         var __moduleNode = $.ui.fancytree.getTree("#"+v_element+"");
>                                         if (__moduleNode.toDict(false)) {
>                                             __moduleNode.getFirstChild().setExpanded(true);
>                                         }
>     
>                                     }
>                                 }
>                                 catch (e) {
>                                     console.log(e);
>                                 }
>                             }
>                         });
>     
>                     }
>     
>                     fn_getMCTree2("SH_tree","学校","com.jydd.bapi.NOTICE.BAPI_GetFanvyTreeAdv",window.mc_IsLoading);
>                     function fn_getMCTree2(v_element,v_type,v_api,v_isLoading) {
>                         var json={};
>                         json.token = sessionStorage.getItem("_pub_token");
>                         // json.api = "com.jydd.bapi.ESPIndex.BAPI_GetFanvyTreeAdv";
>                         json.api = v_api;
>                         json.clz = "";
>                         var params =[];
>                         params.push("ORG_DEPARTMENT");
>                         params.push(imx_rowID?imx_rowID:"");
>                         params.push(v_type);
>                         json.data = JSON.stringify(params);
>                         $.ajax({
>                             type: "POST",
>                             url:"/BAPI/api",
>                             data:json,
>                             dataType:"text",
>                             async: true,
>                             success:function(result) {
>                                 //console.log(result);
>                                 try {
>                                     var json= JSON.parse(result);
>                                     // console.log(json);
>                                     if(json.success==1){
>                                         mc_treedata = json.json;
>                                         if(v_isLoading){
>                                             $("#"+v_element+"").fancytree({
>                                                 extensions: [/*"dnd",*/ "edit", "glyph", "table"],
>                                                 checkbox: true,
>                                                 // autoCollapse: true,
>                                                 debugLevel: 2,
>                                                 quicksearch: true,
>                                                 icon: false,
>                                                 dnd: {
>                                                     focusOnClick: true,
>                                                     dragStart: function (node, data) {
>                                                         return false;
>                                                     },
>                                                     dragEnter: function (node, data) {
>                                                         return false;
>                                                     },
>                                                     dragDrop: function (node, data) {
>                                                         return false;
>                                                     }
>                                                 },
>                                                 glyph: _font,
>                                                 source: mc_treedata,
>                                                 table: {
>                                                     indentation: 20,
>                                                     // nodeColumnIdx: 0, //将节点标题渲染到第一列
>                                                     nodeColumnIdx:0 // render the node title into the 2nd column
>     
>                                                 },
>                                                 activate: function (event, data) {
>                                                 },
>                                                 renderColumns: function (event, data) {
>                                                     var node = data.node;
>                                                    // console.log(node);
>                                                     $tdList = $(node.tr).find(">td");
>                                                     //标题栏
>                                                     $tdList.eq(1).text(node.data["CODE"]);
>                                                     $tdList.eq(2).text(node.data["ORG_TYPE_NAME"]);
>                                                 },
>                                                 wide: {
>                                                     iconWidth: "1em",     // Adjust this if @fancy-icon-width != "16px"
>                                                     iconSpacing: "0.5em", // Adjust this if @fancy-icon-spacing != "3px"
>                                                     levelOfs: "1.5em"     // Adjust this if ul padding != "16px"
>                                                 },
>                                                 dropMarkerOffsetX: 42,  // absolute position offset for .fancytree-drop-marker
>                                                 // relatively to ..fancytree-title (icon/img near a node accepting drop)
>                                                 dropMarkerInsertOffsetX: -16,
>                                                 select: function (event, data) {
>                                                     var node = data.node;
>                                                     var __parent = node.getParent();
>     
>                                                     if (__parent.title == "root" && __parent.key.indexOf("root") >= 0) {
>                                                         var __parent = null;
>                                                     }
>     
>                                                     if (node.isSelected()) {
>                                                         if (node.isUndefined()) {
>                                                             // Loadand select all child nodes
>                                                             node.load().done(function () {
>                                                                 node.visit(function (childNode) {
>                                                                     childNode.setSelected(true);
>                                                                 });
>     
>                                                             });
>                                                         } else {
>                                                             // Selectall child nodes
>                                                             node.visit(function (childNode) {
>                                                                 childNode.setSelected(true);
>                                                             });
>                                                         }
>                                                     }
>                                                     else {
>                                                         if (node.isUndefined()) {
>                                                             // Loadand select all child nodes
>                                                             node.load().done(function () {
>                                                                 node.visit(function (childNode) {
>                                                                     childNode.setSelected(false);
>                                                                 });
>                                                             });
>                                                         } else {
>                                                             // Selectall child nodes
>                                                             node.visit(function (childNode) {
>                                                                 childNode.setSelected(false);
>                                                             });
>                                                         }
>                                                     }
>     
>     
>     
>                                                     //var __countSelect = 0;
>     
>                                                     var __countUnSelect = 0;
>                                                     if (__parent) {
>                                                         var __children = __parent.getChildren();
>                                                         for (var i = 0; i < __children.length; i++) {
>                                                             if (__children[i].selected) {
>                                                             } else {
>                                                                 __countUnSelect++;
>                                                             }
>                                                         }
>     
>                                                         if (__countUnSelect == __children.length) {
>                                                             __parent.setSelected(false);
>                                                         }
>     
>                                                         __countUnSelect = 0;
>                                                     }
>     
>                                                 }
>                                             });
>                                             v_isLoading = false;
>                                             window.mc_IsLoading=false;
>                                         }else {
>                                             $("#"+v_element+"").fancytree("option", "source", mc_treedata);
>                                         }
>     
>                                         var __moduleNode = $.ui.fancytree.getTree("#"+v_element+"");
>                                         if (__moduleNode.toDict(false)) {
>                                             __moduleNode.getFirstChild().setExpanded(true);
>                                         }
>     
>                                     }
>                                 }
>                                 catch (e) {
>                                     console.log(e);
>                                 }
>                             }
>                         });
>     
>                     }
>                     //保存
>                     $("#btn-save").off("click").on("click",function (e) {
>                         var _Nodes=$.ui.fancytree.getTree("#JY_tree").getSelectedNodes();
>                         var _Nodess=$.ui.fancytree.getTree("#SH_tree").getSelectedNodes();
>                         dataarray=[];
>                         console.log(_Nodes);
>                         console.log(_Nodess);
>                         if(_Nodes.length==0 && _Nodess.length==0){
>                             top.window.layer.msg("请选择保存范围！");
>                             return;
>                         }
>                         //var _data=[];
>                         if(_Nodes.length>0){
>                             datalist(_Nodes);
>                         }
>                         if(_Nodess.length>0){
>                             datalist(_Nodess);
>                         }
>                         var data_s=[];
>                         if(dataarray.length>0){
>                             for(var i=0;len=dataarray.length,i<len;i++){
>                                 var data={};
>                                 data["ID"]=dataarray[i]["ID"];
>                                 data["CNAME"]=dataarray[i]["CNAME"];
>                                 data_s.push(data);
>                             }
>                         }
>                         console.log(dataarray);
>                         sessionStorage.setItem("schooljcxxdata",JSON.stringify(data_s));
>                         top.window.layer.close(localStorage.layerindex);
>                         // var jparams =[];
>                         // jparams.push("ES_NOTICE_TARGET");
>                         // jparams.push(localStorage.PULISHID ==""? "" : localStorage.PULISHID);
>                         // jparams.push(JSON.stringify(dataarray));
>                         //  var _api="com.jydd.bapi.NOTICE.BAPI_Save_checkbox_fancytree";
>                         //  jYd.fnAjax(jparams,_api,function (ret) {
>                         //      top.window.layer.msg(ret.message);
>                         //      top.window.layer.close(localStorage.layerindex);
>                         //  });
>     
>                     });
>     
>     
>     
>                 });
>     
>     
>     
>     
>         // tab 事件
>         layui.use('element', function(){
>             var $ = layui.jquery
>                 ,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
>         });
>     
>     
>     </script>
>     </body>
>     </html>
> 
>