JS organization relationship is reflected by the array
In the primary ONLOAD event, an array is made, acquire the hierarchical nodes in the hierarchy of the organization relationship diagram, and the number of nodes in the node in the relationship, to obtain the maximum width of the horizontal line.
The following is HTM original code
Organization Structure Figure </ title> <style> .dvitem {position: absolute; width : 24px; Border: 1px Solid # 999999; font-size: 12px; padding: 5px; height: 80px; z-index: 9; background-color: #fffff; line-height: 16px;} a {text-decoration: None; color: # 333333;} .dvhline {position: absolute; z-index: 17; padding: 0px; margin: 0px; border-top: 1px solid # 999999;} .dvline {color: blue; position: absolute; Background-color: # 999999; width: 1px; z-index: 17;} </ style> <script> var DITEM = new array (); var w = 60; var = 40; var h = 80; var boxh = 80; var startLEFT = 400; var starttop = 40; var hr = "<hr size = /" 1 / "Noshade>" var labledv = "<div class = /" DVItem / "style = / "VAR HDV =" <div class = / "DVHLINE /" style = / "width:"; var vdv = "<div class = /" dvline / "style = /" height: " h " PX; / ""; Var endsdv = "/"; var enddv = "</ div>"; var htm = 0; // depth function load_data () {DITEM [0] = " 1 | General Manager | 0 | "; DITEM [1] =" 2 | Operation supervisor | 1 | "; DITEM [2] =" 3 | Technical Director | 1 | "; DITEM [3] =" 4 | Customer Service Director | 2 | "; DITEM [4] = "5 | Business Director | 2 |"; DITEM [5] = "6 | Business Representative | 5 |"; DITEM [6] = "7 | Operation Planning | 2 |"; DITEM [7] = " 8 | Programmer | 3 | "; DITEM [8] =" 9 | Mechanic | 3 | "; LEN = DITEM.LENGTH; SET_ITEM (0, 0); set_max (); write_item (0, 0, 0, 1) VAR HTM1 = ""; for (var i = 0; i <len; i </p>
<p> ) {HTM1 = HTM1 DITEM [i] "<br>";} //Document.getlementByid ("Load_dv" ).innerhtml = htm1; document.getlementByid ("list_dv"). Innerhtml = htm;} // Set hierarchical function set_item (pid, ni) {var n = ni 1; var iary = new array (); for (var i = 0; i <len; i ) {iy = DITEM [i] .split ("| | "); If (iary [2] == pid) {DITEM [I] = DITEM [I] Ni; IF (MaxN <Ni) {MaxN = Ni;} set_item (iary [0], n);}} } // Set the maximum number function set_max () {var iary = new array () {var iary = new array () {var ity; for (var i = 0; i <len; i ) {i = DITEM [i] .split (" | "); ChildNum = GET_CHILD_NUM (iary [0]); if (ChildNum <= 1) {DITEM [I] = DITEM [I] " | 0 ";} else {DITEM [i] = DITEM [i] "|" Get_max (iary [0], iary [3]);}}} function get_max (pid, start) {var ly = new array (); var m = 0; var n = 0; for (VAR J = start; j <= maxn; j ) {for (var i = 0; i <len; i ) {iy = DITEM [i] .split ("|"); if (iary [3] == j) { IF (GET_ROOTID (PID, IARY [0])) {m = m 1;}}} f = 0 {n = m;}} m = 0;} return n;} Function get_rootid (pid, id) {var iary = new array (); for (var i = 0; i <len; i ) {iary = DITEM [i] .split ("|"); if (iary [0] == ID) {IF (iary [2] == pid) {return true; break;} else {return get_rootid (PID, IARY [2]);}}} Return False;} // Number of ID in the ID Function GET_ITEM (ID) {var i; var iTems; var iary = new array (); for (i = 0; i <len; i ) {iy = DITEM [i] .split ("| |"</p>
<p>); If (iary [0] == id) {items = DITEM [I]; Break;}} Return Items;} // acquired child node number function gET_CHILD_NUM (PID) {var i; var rnum = 0; var Iry = new array (); for (i = 0; i <len; i ) {iy = DITEM [i] .Split ("|"); if (iary [2] == pid) {rnum = rnum 1 }}} Return rnum;</p>
<p>Function Write_Item (iPID, LTMP, WTMP, CNT) {var iary = new array (); var id; var txt; var pid; var lens; var maxnum; var t; var l; var hline_width; var dvline = " VAR CHILDNUM = 0; var itxt; var tmpcnt = 0; for (var i = 0; i <len; i ) {ipxt = DITEM [i]; iy = itxt.split ("|"); if (iary [2 ] == iPid) {id = iary [0]; txt = "<a href=/"?id=" id " <" irating [1] " </a> "; PID = irating [2]; lens = iary [3]; maxnum = iary [4]; childnum = get_child_num (id); hline_width = maxnum * ip; if (pid == 0) {t = starttop; l = startleft;} else { T = StartTop 2 * LENS * H LENS * IH; // L = LTMP WTMP / CNT * TMPCNT; L = LTMP - WTMP / 2 (WTMP / 2) * TMPCNT;} DVLINE = ""; IF ChildNum> 1) {var T1; VAR T2; VAR L2; VAR W2; T1 = T IH; L1 = L 12; W2 = HLINE_WIDTH / 2; T2 = T1 H; L2 = L - W2 10; DVLINE = "<div class = /" DVVLINE / "style = /" height: " h " PX; Left: " L1 " PX; TOP: " T1 " / "> </ div> "; DVLINE = DVLINE " <div class = / "DVHLINE /" style = / "width:" hline_w IDTH "PX; Left:" L2 "PX; TOP:" T2 "/"> </ div> "; for (var j = 0; j <childnum; j ) {var T3; var L3; T3 = T1 H; L3 = L2 (HLINE_WIDTH / (CHILDNUM-1)) * j; var templine = "<div class = /" dvline / "style = /" height: " </p>
<p>H "PX; Left:" L3 "PX; TOP:" T3 "/"> </ div> "; DVLINE = DVLINE TMPLINE;} DVLINE = DVLINE} else if (childnum == 1) { VAR T4; VAR L4; L4 = L 12; DVLINE = "<div class = /" dvvline / "style = /" height: " h " px; Left: " L4 " PX; TOP: " (t IH) "/"> </ div> "; dvline = dvline <div class = /" dvvline / "style = /" height: " h " px; Left: " l4 " PX; TOP: " (T IH H) " / "> </ div>";} // DVLINE = HDV HLINE_WIDTH ENDSDV HR ENDDV; <HR size = / "1 /" Noshade> // VAR LDV = ""; // LDV = "<div class = /" DVITEM / "style = /" left: " L " PX; TOP: " T " PX; / ">" txt "<div>" // htm = HTM LDV DVLINE; HTM = HTM LABLEDV "Left:" L "PX; TOP:" T "PX" ENDSDV TXT ENDDV DVLINE; IF (CNT% 2 == 0) {TMPCNT = TMPCNT 2;} else {TMPCNT = TMPCNT 1;} WRITE_ITEM (ID, L, Hline_Width, ChildNum);} // ar (iry [2] == ipid) }</p>
<p></ script> </ hEAD></p>
<p><body onload = "LOAD_DATA ()> <div id =" list_dv "> </ div> </ body> </ html></p></div><div class="text-center mt-3 text-grey">
转载请注明原文地址:https://www.9cbs.com/read-34497.html</div><div class="plugin d-flex justify-content-center mt-3"></div><hr><div class="row"><div class="col-lg-12 text-muted mt-2"><i class="icon-tags mr-2"></i><span class="badge border border-secondary mr-2"><h2 class="h6 mb-0 small"><a class="text-secondary" href="tag-2.html">9cbs</a></h2></span></div></div></div></div><div class="card card-postlist border-white shadow"><div class="card-body"><div class="card-title"><div class="d-flex justify-content-between"><div><b>New Post</b>(<span class="posts">0</span>)
</div><div></div></div></div><ul class="postlist list-unstyled">
</ul></div></div><div class="d-none threadlist"><input type="checkbox" name="modtid" value="34497" checked /></div></div></div></div></div><footer class="text-muted small bg-dark py-4 mt-3" id="footer"><div class="container"><div class="row"><div class="col">CopyRight © 2020 All Rights Reserved
</div><div class="col text-right">Processed:
<b>0.042</b>, SQL:
<b>9</b></div></div></div></footer><script src="./lang/en-us/lang.js?2.2.0"></script><script src="view/js/jquery.min.js?2.2.0"></script><script src="view/js/popper.min.js?2.2.0"></script><script src="view/js/bootstrap.min.js?2.2.0"></script><script src="view/js/xiuno.js?2.2.0"></script><script src="view/js/bootstrap-plugin.js?2.2.0"></script><script src="view/js/async.min.js?2.2.0"></script><script src="view/js/form.js?2.2.0"></script><script>
var debug = DEBUG = 0;
var url_rewrite_on = 1;
var url_path = './';
var forumarr = {"1":"Tech"};
var fid = 1;
var uid = 0;
var gid = 0;
xn.options.water_image_url = 'view/img/water-small.png';
</script><script src="view/js/wellcms.js?2.2.0"></script><a class="scroll-to-top rounded" href="javascript:void(0);"><i class="icon-angle-up"></i></a><a class="scroll-to-bottom rounded" href="javascript:void(0);" style="display: inline;"><i class="icon-angle-down"></i></a></body></html><script>
var forum_url = 'list-1.html';
var safe_token = 'KLgTBou6E0_2FFThDOcRQ9XiXsTgRPimhnB7xWZllgJ_2FIbTL8r6eKxKzWLgvq8QY_2Fs_2BPk4_2F_2BZwZ9_2BthzhtD98lbw_3D_3D';
var body = $('body');
body.on('submit', '#form', function() {
var jthis = $(this);
var jsubmit = jthis.find('#submit');
jthis.reset();
jsubmit.button('loading');
var postdata = jthis.serializeObject();
$.xpost(jthis.attr('action'), postdata, function(code, message) {
if(code == 0) {
location.reload();
} else {
$.alert(message);
jsubmit.button('reset');
}
});
return false;
});
function resize_image() {
var jmessagelist = $('div.message');
var first_width = jmessagelist.width();
jmessagelist.each(function() {
var jdiv = $(this);
var maxwidth = jdiv.attr('isfirst') ? first_width : jdiv.width();
var jmessage_width = Math.min(jdiv.width(), maxwidth);
jdiv.find('img, embed, iframe, video').each(function() {
var jimg = $(this);
var img_width = this.org_width;
var img_height = this.org_height;
if(!img_width) {
var img_width = jimg.attr('width');
var img_height = jimg.attr('height');
this.org_width = img_width;
this.org_height = img_height;
}
if(img_width > jmessage_width) {
if(this.tagName == 'IMG') {
jimg.width(jmessage_width);
jimg.css('height', 'auto');
jimg.css('cursor', 'pointer');
jimg.on('click', function() {
});
} else {
jimg.width(jmessage_width);
var height = (img_height / img_width) * jimg.width();
jimg.height(height);
}
}
});
});
}
function resize_table() {
$('div.message').each(function() {
var jdiv = $(this);
jdiv.find('table').addClass('table').wrap('<div class="table-responsive"></div>');
});
}
$(function() {
resize_image();
resize_table();
$(window).on('resize', resize_image);
});
var jmessage = $('#message');
jmessage.on('focus', function() {if(jmessage.t) { clearTimeout(jmessage.t); jmessage.t = null; } jmessage.css('height', '6rem'); });
jmessage.on('blur', function() {jmessage.t = setTimeout(function() { jmessage.css('height', '2.5rem');}, 1000); });
$('#nav li[data-active="fid-1"]').addClass('active');
</script>
