<!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-signexpanderOpen: "glyphicon glyphicon-menu-down", // glyphicon-collapse-downfolder: "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 nodesnode.load().done(function () {node.visit(function (childNode) {childNode.setSelected(true);});});} else {// Selectall child nodesnode.visit(function (childNode) {childNode.setSelected(true);});}}else {if (node.isUndefined()) {// Loadand select all child nodesnode.load().done(function () {node.visit(function (childNode) {childNode.setSelected(false);});});} else {// Selectall child nodesnode.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 nodesnode.load().done(function () {node.visit(function (childNode) {childNode.setSelected(true);});});} else {// Selectall child nodesnode.visit(function (childNode) {childNode.setSelected(true);});}}else {if (node.isUndefined()) {// Loadand select all child nodesnode.load().done(function () {node.visit(function (childNode) {childNode.setSelected(false);});});} else {// Selectall child nodesnode.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>
详细解决方案
【Fancytree】------- Fancytree 树结构使用示例代码
热度：9 发布时间：2023-12-17 01:47:56.0