【Fancytree】------- Fancytree 树结构使用示例代码
叶阳
<!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="/plugins/flow/youi_css/bootstrap.css" rel="stylesheet" />--> <link href="/libs/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" /> <!-- Icons --> <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="/dist/css/AdminLTE.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;"> <!-- <th style="text-align: center">序号</th>--> <tr> <th style="text-align: left"> 部门名称 </th> <th style="text-align: center;">部门编码</th> <th style="text-align: center;">组织类别</th> </tr> </thead> <tbody> <!-- <td style="text-align: center"></td>--> <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;"> <!-- <th style="text-align: center">序号</th>--> <tr> <th style="text-align: left"> 学校名称 </th> <th style="text-align: center;">部门编码</th> <th style="text-align: center;">组织类别</th> </tr> </thead> <tbody> <!-- <td style="text-align: center"></td>--> <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>
类似资料：