common.js 51 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181
  1. /**
  2. * Created by onlyang on 2017/7/2.
  3. * es5
  4. */
  5. var Steer = {};
  6. (function ($, window, document) {
  7. Steer.utils = {
  8. // 参数Split
  9. paramsSplit: function (sparam, ssplit) {
  10. var sp = '', spd = '';
  11. if (sparam && sparam.length > 0) {
  12. if (!ssplit) { ssplit = ';;'; }
  13. var atp = sparam.split(ssplit);
  14. sp = atp[0];
  15. if (atp.length > 1) { spd = atp[1]; }
  16. }
  17. return [sp, spd];
  18. }
  19. };
  20. var STTable = {
  21. /*
  22. * 初始化表格
  23. * tid: 表格ID
  24. * data: 需要展示的数据
  25. * */
  26. init: function (tid, data) {
  27. mini.parse();
  28. let grid = mini.get(tid);
  29. let $table = $('#' + tid);
  30. if (!data) { data = []; }
  31. grid.setData(data);
  32. // 绑定所有数据
  33. $table.data('mini_all_data', data);
  34. // 过滤关闭按钮
  35. let clase = $('<span>', { class: 'el-icon-circle-close-outline' });
  36. $table.find('.mini-grid-filter').append(clase);
  37. $table.on('click', '.el-icon-circle-close-outline', function () {
  38. $(this).closest('.mini-textbox').find('.mini-textbox-input').val('');
  39. $.STTable.filterData(tid);
  40. });
  41. // 过滤事件
  42. $table.on('keyup', 'input.mini-textbox-input', function (event) {
  43. $.STTable.filterData(tid);
  44. });
  45. // 合计信息
  46. let smInfo = $('<div>', {
  47. class: 'mini-table-sum',
  48. id: tid + '_sum'
  49. });
  50. $table.after(smInfo);
  51. $.STTable.setSumInfo(tid, data.length, data.length);
  52. },
  53. setSumInfo: function (tid, current, all) {
  54. $('#' + tid + '_sum').text(current + ' / ' + all);
  55. },
  56. /*
  57. * 设置表格数据
  58. * tid: 表格ID
  59. * data: 需要展示的数据
  60. * bFilter:不重置过滤条件(默认重置)
  61. * */
  62. setData: function (tid, data, bFilter) {
  63. let grid = mini.get(tid);
  64. if (!data) { data = []; }
  65. grid.setData(data);
  66. grid.scrollIntoView(0);
  67. $.STTable.setSumInfo(tid, data.length, data.length);
  68. // 绑定所有数据
  69. $('#' + tid).data('mini_all_data', data);
  70. if (!bFilter) {
  71. $('#' + tid).find('.mini-grid-filter').find('input.mini-textbox-input').val('');
  72. }
  73. },
  74. filterData: function (tid) {
  75. let $table = $('#' + tid);
  76. let data = $table.data('mini_all_data');
  77. // if (event && event.keyCode === 13) {
  78. let inps = $table.find('input.mini-textbox-input');
  79. let fobjs = {};
  80. $.each(inps, function (i, n) {
  81. let $in = $(n);
  82. let val = $in.val();
  83. if (val && val.length > 0) {
  84. let _name = $in.attr('name');
  85. fobjs[_name] = val;
  86. }
  87. });
  88. let cData = [];
  89. cData = data.filter(function (v) {
  90. let flag = true;
  91. $.each(fobjs, function (ci, cn) {
  92. if ((v[ci] + '').indexOf(cn) < 0) {
  93. flag = false;
  94. return false;
  95. }
  96. });
  97. return flag;
  98. });
  99. let grid = mini.get(tid);
  100. grid.setData(cData);
  101. grid.scrollIntoView(0);
  102. $.STTable.setSumInfo(tid, cData.length, data.length);
  103. }
  104. };
  105. $.STTable = STTable;
  106. /*
  107. * SSlider 模拟Slider
  108. * @param {string} sActive 'show'显示,'hide'隐藏
  109. * @oInit
  110. * title: 标题
  111. * level: 2
  112. * width: 200
  113. * closeCallback: fn
  114. * @example $('#').slider('show');
  115. */
  116. var SSlider = function (sAction, oInit) {
  117. // 执行体
  118. var $thats = this;
  119. if (!$thats || $thats.length <= 0) {
  120. return;
  121. }
  122. var $that = $thats.first();
  123. if (sAction === 'show') {
  124. var iZIndex = 1900;
  125. if (oInit) {
  126. if (oInit.title) {
  127. $that.children('.sui-slider-main').children('.sui-slider-title').find('.sui-slider-title-text').text(oInit.title);
  128. }
  129. if (oInit.level > 1) {
  130. iZIndex += 10 * oInit.level;
  131. var ih = 800;
  132. if (oInit.width > 0) {
  133. ih = oInit.width;
  134. } else {
  135. ih = 800 - 100 * (oInit.level - 1);
  136. if (ih < 200) { ih = 200; }
  137. }
  138. $that.children('.sui-slider-main').css({'width': ih + 'px', 'z-index': iZIndex + 2});
  139. $that.children('.sui-slider-cover').css({'z-index': iZIndex + 1});
  140. }
  141. }
  142. $that.css('z-index', iZIndex);
  143. SSlider.prototype._showSlider($that, oInit);
  144. } else {
  145. SSlider.prototype._hideSlider($that, oInit);
  146. }
  147. };
  148. // 隐藏Slider
  149. SSlider.prototype._hideSlider = function ($slider, oInit) {
  150. $slider.children('.sui-slider-main').removeClass('sui-slider-in').removeClass('sui-slider-active').addClass('sui-slider-out');
  151. setTimeout(function () {
  152. $slider.hide();
  153. // $c.remove(); //移除遮盖层
  154. var sliderActives = $('.sui-slider-active');
  155. if (!sliderActives || sliderActives.length <= 0) {
  156. $('body').removeClass('sui-slider-body');
  157. }
  158. if (oInit && oInit.closeCallback) {
  159. oInit.closeCallback.call(null);
  160. }
  161. }, 300);
  162. };
  163. // 显示Slider
  164. SSlider.prototype._showSlider = function ($slider, oInit) {
  165. $('body').addClass('sui-slider-body');// body不再滚动
  166. // 显示遮盖层及绑定事件
  167. $slider.children('.sui-slider-cover').not('.sui-slider-evented').on('click', function () {
  168. SSlider.prototype._hideSlider($slider, oInit);
  169. }).addClass('sui-slider-evented');
  170. $slider.children('.sui-slider-main').removeClass('sui-slider-out').addClass('sui-slider-in').addClass('sui-slider-active');
  171. $slider.children('.sui-slider-main').children('.sui-slider-title').find('.sui-slider-title-x').not('.sui-slider-evented').on('click', function () {
  172. SSlider.prototype._hideSlider($slider, oInit);
  173. }).addClass('sui-slider-evented');
  174. $slider.show();
  175. };
  176. // jquery aliases 别名
  177. $.fn.slider = SSlider;
  178. }(jQuery, window, document));
  179. /*
  180. * 验证码
  181. * */
  182. (function () {
  183. var randstr = function (length) {
  184. var key = {
  185. str: [
  186. // 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm',
  187. // 'o', 'p', 'q', 'r', 's', 't', 'x', 'u', 'v', 'y', 'z', 'w', 'n',
  188. '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'
  189. ],
  190. randint: function (n, m) {
  191. var c = m - n + 1;
  192. var num = Math.random() * c + n;
  193. return Math.floor(num);
  194. },
  195. randStr: function () {
  196. var _this = this;
  197. var leng = _this.str.length - 1;
  198. var randkey = _this.randint(0, leng);
  199. return _this.str[randkey];
  200. },
  201. create: function (len) {
  202. var _this = this;
  203. var l = len || 10;
  204. var str = '';
  205. for (var i = 0; i < l; i++) {
  206. str += _this.randStr();
  207. }
  208. return str;
  209. }
  210. };
  211. length = length > 0 ? length : 10;
  212. return key.create(length);
  213. };
  214. var randint = function (n, m) {
  215. var c = m - n + 1;
  216. var num = Math.random() * c + n;
  217. return Math.floor(num);
  218. };
  219. var VCode = function (dom, options) {
  220. this.codeDoms = [];
  221. this.lineDoms = [];
  222. this.initOptions(options);
  223. this.dom = dom;
  224. this.init();
  225. this.addEvent();
  226. this.update();
  227. this.mask();
  228. };
  229. VCode.prototype.init = function () {
  230. this.dom.style.position = 'relative';
  231. this.dom.style.overflow = 'hidden';
  232. this.dom.style.cursor = 'pointer';
  233. this.dom.title = '点击更换验证码';
  234. this.dom.style.background = this.options.bgColor;
  235. /*
  236. alert(this.options.width);
  237. alert(this.dom.clientWidth>0?this.dom.clientWidth:40); clientHeight
  238. */
  239. this.w = this.options.width > 0 ? this.options.width : (this.dom.clientWidth > 0 ? this.dom.clientWidth > 0 : 100);
  240. this.h = this.options.height > 0 ? this.options.height : (this.dom.clientHeight > 0 ? this.dom.clientHeight > 0 : 40);
  241. this.uW = this.w / this.options.len;
  242. };
  243. VCode.prototype.mask = function () {
  244. var dom = document.createElement('div');
  245. dom.style.cssText = [
  246. 'width: 100%',
  247. 'height: 100%',
  248. 'left: 0',
  249. 'top: 0',
  250. 'position: absolute',
  251. 'cursor: pointer',
  252. 'z-index: 9999999'
  253. ].join(';');
  254. dom.title = '点击更换验证码';
  255. this.dom.appendChild(dom);
  256. };
  257. VCode.prototype.addEvent = function () {
  258. var _this = this;
  259. _this.dom.addEventListener('click', function () {
  260. // _this.update.call(_this);
  261. _this.update();
  262. });
  263. };
  264. VCode.prototype.initOptions = function (options) {
  265. var FunctionOptons = function () {
  266. this.len = 4;
  267. this.fontSizeMin = 24;
  268. this.fontSizeMax = 28;
  269. this.colors = [
  270. 'green',
  271. 'red',
  272. 'blue',
  273. '#53da33',
  274. '#AA0000',
  275. '#FFBB00'
  276. ];
  277. this.bgColor = '#f6f6f6';
  278. this.fonts = [
  279. 'Times New Roman',
  280. 'Georgia',
  281. 'Serif',
  282. 'sans-serif',
  283. 'arial',
  284. 'tahoma',
  285. 'Hiragino Sans GB'
  286. ];
  287. this.lines = 8;
  288. this.lineColors = [
  289. '#888888',
  290. '#FF7744',
  291. '#888800',
  292. '#008888'
  293. ];
  294. this.lineHeightMin = 1;
  295. this.lineHeightMax = 2;
  296. this.lineWidthMin = 1;
  297. this.lineWidthMax = 30;
  298. };
  299. this.options = new FunctionOptons();
  300. if (typeof options === 'object') {
  301. for (var i in options) {
  302. this.options[i] = options[i];
  303. }
  304. }
  305. };
  306. VCode.prototype.update = function () {
  307. for (var i = 0; i < this.codeDoms.length; i++) {
  308. this.dom.removeChild(this.codeDoms[i]);
  309. }
  310. for (var j = 0; j < this.lineDoms.length; j++) {
  311. this.dom.removeChild(this.lineDoms[j]);
  312. }
  313. this.createCode();
  314. this.draw();
  315. };
  316. VCode.prototype.createCode = function () {
  317. this.code = randstr(this.options.len);
  318. };
  319. VCode.prototype.verify = function (code) {
  320. return this.code === (code ? code.toLowerCase() : code);
  321. };
  322. VCode.prototype.draw = function () {
  323. this.codeDoms = [];
  324. for (var i = 0; i < this.code.length; i++) {
  325. this.codeDoms.push(this.drawCode(this.code[i], i));
  326. }
  327. this.drawLines();
  328. };
  329. VCode.prototype.drawCode = function (code, index) {
  330. var dom = document.createElement('span');
  331. dom.style.cssText = [
  332. 'font-size:' + randint(this.options.fontSizeMin, this.options.fontSizeMax) + 'px',
  333. 'color:' + this.options.colors[randint(0, this.options.colors.length - 1)],
  334. 'position: absolute',
  335. 'left:' + randint(this.uW * index, this.uW * index + this.uW - 15) + 'px',
  336. 'top:' + randint(0, 5) + 'px',
  337. 'transform:rotate(' + randint(-20, 20) + 'deg)',
  338. '-ms-transform:rotate(' + randint(-20, 20) + 'deg)',
  339. '-moz-transform:rotate(' + randint(-20, 20) + 'deg)',
  340. '-webkit-transform:rotate(' + randint(-20, 20) + 'deg)',
  341. '-o-transform:rotate(' + randint(-20, 20) + 'deg)',
  342. 'font-family:' + this.options.fonts[randint(0, this.options.fonts.length - 1)],
  343. 'font-weight:' + randint(500, 900)
  344. ].join(';');
  345. dom.innerHTML = code;
  346. this.dom.appendChild(dom);
  347. return dom;
  348. };
  349. VCode.prototype.drawLines = function () {
  350. this.lineDoms = [];
  351. for (var i = 0; i < this.options.lines; i++) {
  352. var dom = document.createElement('div');
  353. dom.style.cssText = [
  354. 'position: absolute',
  355. 'opacity: ' + randint(3, 5) / 10,
  356. 'width:' + randint(this.options.lineWidthMin, this.options.lineWidthMax) + 'px',
  357. 'height:' + randint(this.options.lineHeightMin, this.options.lineHeightMax) + 'px',
  358. 'background: ' + this.options.lineColors[randint(0, this.options.lineColors.length - 1)],
  359. 'left:' + randint(0, this.w - 20) + 'px',
  360. 'top:' + randint(0, this.h) + 'px',
  361. 'transform:rotate(' + randint(-30, 30) + 'deg)',
  362. '-ms-transform:rotate(' + randint(-30, 30) + 'deg)',
  363. '-moz-transform:rotate(' + randint(-30, 30) + 'deg)',
  364. '-webkit-transform:rotate(' + randint(-30, 30) + 'deg)',
  365. '-o-transform:rotate(' + randint(-30, 30) + 'deg)',
  366. 'font-family:' + this.options.fonts[randint(0, this.options.fonts.length - 1)],
  367. 'font-weight:' + randint(400, 900)
  368. ].join(';');
  369. this.dom.appendChild(dom);
  370. this.lineDoms.push(dom);
  371. }
  372. };
  373. this.VCode = VCode;
  374. }).call(this);
  375. /**
  376. * 组织结构图
  377. * @Author: ouyang
  378. */
  379. (function ($) {
  380. $.fn.jOrgChart = function (options) {
  381. var opts = $.extend({}, $.fn.jOrgChart.defaults, options);
  382. var $this = $(this);
  383. if (!$this || $this.length <= 0) { return false; }
  384. $this.empty();
  385. var $showlist = $("<ul id='org' style='display:none'></ul>");
  386. _showall(options.data, $showlist, opts);
  387. $this.append($showlist);
  388. // build the tree
  389. var $org = $('#org');
  390. var $container = $('<div class="' + opts.chartClass + '"/>');
  391. if ($org.is('ul')) {
  392. buildNode($org.find('li:first'), $container, 0, opts);
  393. } else if ($org.is('li')) {
  394. buildNode($org, $container, 0, opts);
  395. }
  396. $this.append($container);
  397. };
  398. // Option defaults
  399. $.fn.jOrgChart.defaults = {
  400. depth: -1,
  401. chartClass: 'jOrgChart', // CLASS
  402. expandAble: true, // 是否展开/收缩
  403. module: { // 数据模型
  404. id: 'id',
  405. pid: 'pid',
  406. name: 'name',
  407. children: 'children'
  408. }
  409. };
  410. function _showall (oList, $parent, opts) {
  411. $.each(oList, function (index, val) {
  412. var aChildren = val[opts.module.children];
  413. var $a = $('<a title="' + val[opts.module.name] + '" href="javascript:void(0)">' + val[opts.module.name] + '</a>').data('node_data', val);
  414. if (aChildren && aChildren.length > 0) {
  415. var $li = $('<li></li>');
  416. $li.append($a).append('<ul></ul>').appendTo($parent);
  417. // 递归显示
  418. _showall(aChildren, $li.children('ul'), opts);
  419. } else {
  420. $('<li></li>').append($a).appendTo($parent);
  421. }
  422. });
  423. }
  424. var nodeCount = 0;
  425. // Method that recursively builds the tree
  426. function buildNode ($node, $appendTo, level, opts) {
  427. var $table = $('<table cellpadding="0" cellspacing="0" border="0"/>');
  428. var $tbody = $('<tbody/>');
  429. // Construct the node container(s)
  430. var $nodeRow = $('<tr/>').addClass('node-cells');
  431. var $nodeCell = $('<td/>').addClass('node-cell').attr('colspan', 2);
  432. var $childNodes = $node.children('ul:first').children('li');
  433. var $nodeDiv;
  434. if ($childNodes.length > 1) {
  435. $nodeCell.attr('colspan', $childNodes.length * 2);
  436. }
  437. // Draw the node
  438. // Get the contents - any markup except li and ul allowed
  439. var $nodeContent = $node.clone()
  440. .children('ul,li')
  441. .remove()
  442. .end()
  443. .html();
  444. // Increaments the node count which is used to link the source list and the org chart
  445. nodeCount++;
  446. $node.data('tree-node', nodeCount);
  447. $nodeDiv = $('<div>').addClass('node')
  448. .data('tree-node', nodeCount)
  449. .append($nodeContent);
  450. if (opts.clickCallback && typeof opts.clickCallback === 'function') {
  451. $nodeDiv.on('click', function () {
  452. $('.jOrgChart').find('div').css('border-color', 'black')
  453. $('.jOrgChart').find('div a').css('color', 'black')
  454. $nodeDiv.css('border-color', 'red')
  455. $nodeDiv.find('a').css('color', 'red')
  456. opts.clickCallback($node.children('a').data('node_data'));
  457. });
  458. }
  459. // Expand and contract nodes
  460. if (opts.expandAble && $childNodes.length > 0) {
  461. $nodeDiv.on('click', function () {
  462. var $this = $(this);
  463. var $tr = $this.closest('tr');
  464. if ($tr.hasClass('contracted')) {
  465. $this.css('cursor', 'n-resize');
  466. $tr.removeClass('contracted').addClass('expanded');
  467. $tr.nextAll('tr').css('visibility', '');
  468. // Update the <li> appropriately so that if the tree redraws collapsed/non-collapsed nodes
  469. // maintain their appearance
  470. $node.removeClass('collapsed');
  471. } else {
  472. $this.css('cursor', 's-resize');
  473. $tr.removeClass('expanded').addClass('contracted');
  474. $tr.nextAll('tr').css('visibility', 'hidden');
  475. $node.addClass('collapsed');
  476. }
  477. });
  478. }
  479. $nodeCell.append($nodeDiv);
  480. $nodeRow.append($nodeCell);
  481. $tbody.append($nodeRow);
  482. if ($childNodes.length > 0) {
  483. // if it can be expanded then change the cursor
  484. $nodeDiv.css('cursor', 'n-resize');
  485. // recurse until leaves found (-1) or to the level specified
  486. if (opts.depth === -1 || (level + 1 < opts.depth)) {
  487. var $downLineRow = $('<tr/>');
  488. var $downLineCell = $('<td/>').attr('colspan', $childNodes.length * 2);
  489. $downLineRow.append($downLineCell);
  490. // draw the connecting line from the parent node to the horizontal line
  491. var $downLine = $('<div></div>').addClass('line down');
  492. $downLineCell.append($downLine);
  493. $tbody.append($downLineRow);
  494. // Draw the horizontal lines
  495. var $linesRow = $('<tr/>');
  496. $childNodes.each(function () {
  497. var $left = $('<td>&nbsp;</td>').addClass('line left top');
  498. var $right = $('<td>&nbsp;</td>').addClass('line right top');
  499. $linesRow.append($left).append($right);
  500. });
  501. // horizontal line shouldn't extend beyond the first and last child branches
  502. $linesRow.find('td:first')
  503. .removeClass('top')
  504. .end()
  505. .find('td:last')
  506. .removeClass('top');
  507. $tbody.append($linesRow);
  508. var $childNodesRow = $('<tr/>');
  509. $childNodes.each(function () {
  510. var $td = $('<td class="node-container"/>');
  511. $td.attr('colspan', 2);
  512. // recurse through children lists and items
  513. buildNode($(this), $td, level + 1, opts);
  514. $childNodesRow.append($td);
  515. });
  516. }
  517. $tbody.append($childNodesRow);
  518. }
  519. // any classes on the LI element get copied to the relevant node in the tree
  520. // apart from the special 'collapsed' class, which collapses the sub-tree at this point
  521. if ($node.attr('class') !== undefined) {
  522. var classList = $node.attr('class').split(/\s+/);
  523. $.each(classList, function (index, item) {
  524. if (item === 'collapsed') {
  525. // console.log($node);
  526. $nodeRow.nextAll('tr').css('visibility', 'hidden');
  527. $nodeRow.removeClass('expanded');
  528. $nodeRow.addClass('contracted');
  529. $nodeDiv.css('cursor', 's-resize');
  530. } else {
  531. $nodeDiv.addClass(item);
  532. }
  533. });
  534. }
  535. $table.append($tbody);
  536. $appendTo.append($table);
  537. /* Prevent trees collapsing if a link inside a node is clicked */
  538. // $nodeDiv.children('a').click(function(e){
  539. // console.log(e);
  540. // e.stopPropagation();
  541. // });
  542. };
  543. })(jQuery);
  544. /**
  545. * 物料进程图-竖版 : 支持点击展示弹出框
  546. */
  547. (function ($) {
  548. $.fn.jProcessChartCol = function (options) {
  549. var opts = $.extend({}, $.fn.jProcessChartCol.defaults, options);
  550. var $this = $(this);
  551. if (!$this || $this.length <= 0) { return false; }
  552. $this.empty();
  553. var $showlist = $("<ul id='org' style='display:none'></ul>");
  554. _showall(options.data, $showlist, opts);
  555. $this.append($showlist);
  556. // build the tree
  557. var $org = $('#org');
  558. var $container = $('<div class="' + opts.chartClass + '"/>');
  559. if ($org.is('ul')) {
  560. buildNode($org.find('li:first'), $container, 0, opts);
  561. } else if ($org.is('li')) {
  562. buildNode($org, $container, 0, opts);
  563. }
  564. $this.append($container);
  565. };
  566. // Option defaults
  567. $.fn.jProcessChartCol.defaults = {
  568. depth: -1,
  569. chartClass: 'jOrgChart jProcessChartCol', // CLASS
  570. expandAble: true, // 是否展开/收缩
  571. module: { // 数据模型
  572. id: 'id',
  573. pid: 'pid',
  574. current: 'current',
  575. name: 'name',
  576. children: 'children'
  577. }
  578. };
  579. function _showall (oList, $parent, opts) {
  580. $.each(oList, function (index, val) {
  581. var aChildren = val[opts.module.children];
  582. var aSelf = val[opts.module.name];
  583. var aHighLight = val[opts.module.current];
  584. if (aChildren && aChildren.length > 0) {
  585. var $li = $('<li></li>');
  586. var $lidiv = $('<div></div>');
  587. for (let i = 0; i < aSelf.length; i++) {
  588. aSelf[i].remark = aSelf[i].remark ? aSelf[i].remark : '';
  589. aSelf[i].pact_index = aSelf[i].pact_index ? aSelf[i].pact_index : '';
  590. aSelf[i].order_no = aSelf[i].order_no ? aSelf[i].order_no : '';
  591. aSelf[i].prod_order_no = aSelf[i].prod_order_no ? aSelf[i].prod_order_no : '';
  592. aSelf[i].roll_plan_no = aSelf[i].roll_plan_no ? aSelf[i].roll_plan_no : '';
  593. aSelf[i].batch_no = aSelf[i].batch_no ? aSelf[i].batch_no : '';
  594. aSelf[i].ht_plan_no = aSelf[i].ht_plan_no ? aSelf[i].ht_plan_no : '';
  595. aSelf[i].addition_1 = aSelf[i].addition_1 ? aSelf[i].addition_1 : '';
  596. aSelf[i].addition_2 = aSelf[i].addition_2 ? aSelf[i].addition_2 : '';
  597. aSelf[i].addition_3 = aSelf[i].addition_3 ? aSelf[i].addition_3 : '';
  598. aSelf[i].addition_4 = aSelf[i].addition_4 ? aSelf[i].addition_4 : '';
  599. aSelf[i].addition_5 = aSelf[i].addition_5 ? aSelf[i].addition_5 : '';
  600. aSelf[i].create_time = aSelf[i].create_time ? aSelf[i].create_time : '';
  601. aSelf[i].name = aSelf[i].name ? aSelf[i].name : '';
  602. aSelf[i].object_no = aSelf[i].object_no ? aSelf[i].object_no : '';
  603. aSelf[i].create_man_name = aSelf[i].create_man_name ? aSelf[i].create_man_name : '';
  604. var $a = $('<a title="' + aSelf[i].prc_code_desc + '" href="javascript:void(0)"><div class="jProcessChartColDetail" style="display: none">' +
  605. // '操作人:' + aSelf[i].create_man_name +
  606. // '</br>' + '计划号:' + aSelf[i].pact_index +
  607. // '</br>' + '订单号:' + aSelf[i].order_no +
  608. // '</br>' + '生产订单号:' + aSelf[i].prod_order_no +
  609. // '</br>' + '轧制计划号:' + aSelf[i].roll_plan_no +
  610. // '</br>' + '组批号:' + aSelf[i].batch_no +
  611. // '</br>' + '热处理计划号:' + aSelf[i].ht_plan_no +
  612. // '</br>' + '附加信息1:' + aSelf[i].addition_1 +
  613. // '</br>' + '附加信息2:' + aSelf[i].addition_2 +
  614. // '</br>' + '附加信息3:' + aSelf[i].addition_3 +
  615. // '</br>' + '附加信息4:' + aSelf[i].addition_4 +
  616. // '</br>' + '附加信息5:' + aSelf[i].addition_5 +
  617. // '</br>' + '备注:' + aSelf[i].remark +
  618. `<table>
  619. <tr><td style="text-align: right;width: 98px">操作人:</td><td style="text-align: left">${aSelf[i].create_man_name}<td></tr>
  620. <tr><td style="text-align: right;width: 98px">计划号:</td><td style="text-align: left">${aSelf[i].pact_index}<td></tr>
  621. <tr><td style="text-align: right;width: 98px">订单号:</td><td style="text-align: left">${aSelf[i].order_no}<td></tr>
  622. <tr><td style="text-align: right;width: 98px">生产订单号:</td><td style="text-align: left">${aSelf[i].prod_order_no}<td></tr>
  623. <tr><td style="text-align: right;width: 98px">轧制计划号:</td><td style="text-align: left">${aSelf[i].roll_plan_no}<td></tr>
  624. <tr><td style="text-align: right;width: 98px">组批号:</td><td style="text-align: left">${aSelf[i].batch_no}<td></tr>
  625. <tr><td style="text-align: right;width: 98px">热处理计划号:</td><td style="text-align: left">${aSelf[i].ht_plan_no}<td></tr>
  626. <tr><td style="text-align: right;width: 98px">附加信息1:</td><td style="text-align: left">${aSelf[i].addition_1}<td></tr>
  627. <tr><td style="text-align: right;width: 98px">附加信息2:</td><td style="text-align: left">${aSelf[i].addition_2}<td></tr>
  628. <tr><td style="text-align: right;width: 98px">附加信息3:</td><td style="text-align: left">${aSelf[i].addition_3}<td></tr>
  629. <tr><td style="text-align: right;width: 98px">附加信息4:</td><td style="text-align: left">${aSelf[i].addition_4}<td></tr>
  630. <tr><td style="text-align: right;width: 98px">附加信息5:</td><td style="text-align: left">${aSelf[i].addition_5}<td></tr>
  631. <tr><td style="text-align: right;width: 98px">备注:</td><td style="text-align: left">${aSelf[i].remark}<td></tr>
  632. </table>` +
  633. '</div></br>' + aSelf[i].prc_code_desc + '</br>' + aSelf[i].create_time + '</a>').data('node_data', aSelf[i]);
  634. if (i === 0) { // 每个节点的第一项才显示编号
  635. $a = $('<a title="' + aSelf[i].prc_code_desc + '" href="javascript:void(0)"><div class="jProcessChartColDetail" style="display: none"><span>' +
  636. // '操作人:' + aSelf[i].create_man_name +
  637. // '</br>' + '计划号:' + aSelf[i].pact_index +
  638. // '</br>' + '订单号:' + aSelf[i].order_no +
  639. // '</br>' + '生产订单号:' + aSelf[i].prod_order_no +
  640. // '</br>' + '轧制计划号:' + aSelf[i].roll_plan_no +
  641. // '</br>' + '组批号:' + aSelf[i].batch_no +
  642. // '</br>' + '热处理计划号:' + aSelf[i].ht_plan_no +
  643. // '</br>' + '附加信息1:' + aSelf[i].addition_1 +
  644. // '</br>' + '附加信息2:' + aSelf[i].addition_2 +
  645. // '</br>' + '附加信息3:' + aSelf[i].addition_3 +
  646. // '</br>' + '附加信息4:' + aSelf[i].addition_4 +
  647. // '</br>' + '附加信息5:' + aSelf[i].addition_5 +
  648. // '</span></br><span>' + '备注:' + aSelf[i].remark +
  649. `<table>
  650. <tr><td style="text-align: right;width: 98px">操作人:</td><td style="text-align: left">${aSelf[i].create_man_name}<td></tr>
  651. <tr><td style="text-align: right;width: 98px">计划号:</td><td style="text-align: left">${aSelf[i].pact_index}<td></tr>
  652. <tr><td style="text-align: right;width: 98px">订单号:</td><td style="text-align: left">${aSelf[i].order_no}<td></tr>
  653. <tr><td style="text-align: right;width: 98px">生产订单号:</td><td style="text-align: left">${aSelf[i].prod_order_no}<td></tr>
  654. <tr><td style="text-align: right;width: 98px">轧制计划号:</td><td style="text-align: left">${aSelf[i].roll_plan_no}<td></tr>
  655. <tr><td style="text-align: right;width: 98px">组批号:</td><td style="text-align: left">${aSelf[i].batch_no}<td></tr>
  656. <tr><td style="text-align: right;width: 98px">热处理计划号:</td><td style="text-align: left">${aSelf[i].ht_plan_no}<td></tr>
  657. <tr><td style="text-align: right;width: 98px">附加信息1:</td><td style="text-align: left">${aSelf[i].addition_1}<td></tr>
  658. <tr><td style="text-align: right;width: 98px">附加信息2:</td><td style="text-align: left">${aSelf[i].addition_2}<td></tr>
  659. <tr><td style="text-align: right;width: 98px">附加信息3:</td><td style="text-align: left">${aSelf[i].addition_3}<td></tr>
  660. <tr><td style="text-align: right;width: 98px">附加信息4:</td><td style="text-align: left">${aSelf[i].addition_4}<td></tr>
  661. <tr><td style="text-align: right;width: 98px">附加信息5:</td><td style="text-align: left">${aSelf[i].addition_5}<td></tr>
  662. <tr><td style="text-align: right;width: 98px">备注:</td><td style="text-align: left">${aSelf[i].remark}<td></tr>
  663. </table>` +
  664. '</span></div>' + aSelf[i].object_no + '</br>' + aSelf[i].prc_code_desc + '</br>' + aSelf[i].create_time + '</a>').data('node_data', aSelf[i]);
  665. }
  666. var $lidivchild = $('<div class="jProcessChartColDiv"></div>');
  667. if (aHighLight) { // 高亮
  668. $lidivchild.addClass('jProcessChartColDivCurrent')
  669. }
  670. $lidivchild.append($a).appendTo($lidiv);
  671. $lidivchild.appendTo($lidiv);
  672. }
  673. $lidiv.appendTo($li);
  674. $li.append('<ul></ul>').appendTo($parent);
  675. // 递归显示
  676. _showall(aChildren, $li.children(':eq(1)'), opts);
  677. } else { // 叶子结点
  678. $li = $('<li></li>');
  679. $lidiv = $('<div></div>');
  680. for (let i = 0; i < aSelf.length; i++) {
  681. aSelf[i].remark = aSelf[i].remark ? aSelf[i].remark : '';
  682. aSelf[i].pact_index = aSelf[i].pact_index ? aSelf[i].pact_index : '';
  683. aSelf[i].order_no = aSelf[i].order_no ? aSelf[i].order_no : '';
  684. aSelf[i].prod_order_no = aSelf[i].prod_order_no ? aSelf[i].prod_order_no : '';
  685. aSelf[i].roll_plan_no = aSelf[i].roll_plan_no ? aSelf[i].roll_plan_no : '';
  686. aSelf[i].batch_no = aSelf[i].batch_no ? aSelf[i].batch_no : '';
  687. aSelf[i].ht_plan_no = aSelf[i].ht_plan_no ? aSelf[i].ht_plan_no : '';
  688. aSelf[i].addition_1 = aSelf[i].addition_1 ? aSelf[i].addition_1 : '';
  689. aSelf[i].addition_2 = aSelf[i].addition_2 ? aSelf[i].addition_2 : '';
  690. aSelf[i].addition_3 = aSelf[i].addition_3 ? aSelf[i].addition_3 : '';
  691. aSelf[i].addition_4 = aSelf[i].addition_4 ? aSelf[i].addition_4 : '';
  692. aSelf[i].addition_5 = aSelf[i].addition_5 ? aSelf[i].addition_5 : '';
  693. aSelf[i].remark = aSelf[i].remark ? aSelf[i].remark : '';
  694. aSelf[i].create_time = aSelf[i].create_time ? aSelf[i].create_time : '';
  695. aSelf[i].name = aSelf[i].name ? aSelf[i].name : '';
  696. aSelf[i].object_no = aSelf[i].object_no ? aSelf[i].object_no : '';
  697. aSelf[i].create_man_name = aSelf[i].create_man_name ? aSelf[i].create_man_name : '';
  698. $a = $('<a title="' + aSelf[i].prc_code_desc + '" href="javascript:void(0)"><div class="jProcessChartColDetail" style="display: none">' +
  699. // '操作人:' + aSelf[i].create_man_name +
  700. // '</br>' + '计划号:' + aSelf[i].pact_index +
  701. // '</br>' + '订单号:' + aSelf[i].order_no +
  702. // '</br>' + '生产订单号:' + aSelf[i].prod_order_no +
  703. // '</br>' + '轧制计划号:' + aSelf[i].roll_plan_no +
  704. // '</br>' + '组批号:' + aSelf[i].batch_no +
  705. // '</br>' + '热处理计划号:' + aSelf[i].ht_plan_no +
  706. // '</br>' + '附加信息1:' + aSelf[i].addition_1 +
  707. // '</br>' + '附加信息2:' + aSelf[i].addition_2 +
  708. // '</br>' + '附加信息3:' + aSelf[i].addition_3 +
  709. // '</br>' + '附加信息4:' + aSelf[i].addition_4 +
  710. // '</br>' + '附加信息5:' + aSelf[i].addition_5 +
  711. // '</br>' + '备注:' + aSelf[i].remark +
  712. `<table>
  713. <tr><td style="text-align: right;width: 98px">操作人:</td><td style="text-align: left">${aSelf[i].create_man_name}<td></tr>
  714. <tr><td style="text-align: right;width: 98px">计划号:</td><td style="text-align: left">${aSelf[i].pact_index}<td></tr>
  715. <tr><td style="text-align: right;width: 98px">订单号:</td><td style="text-align: left">${aSelf[i].order_no}<td></tr>
  716. <tr><td style="text-align: right;width: 98px">生产订单号:</td><td style="text-align: left">${aSelf[i].prod_order_no}<td></tr>
  717. <tr><td style="text-align: right;width: 98px">轧制计划号:</td><td style="text-align: left">${aSelf[i].roll_plan_no}<td></tr>
  718. <tr><td style="text-align: right;width: 98px">组批号:</td><td style="text-align: left">${aSelf[i].batch_no}<td></tr>
  719. <tr><td style="text-align: right;width: 98px">热处理计划号:</td><td style="text-align: left">${aSelf[i].ht_plan_no}<td></tr>
  720. <tr><td style="text-align: right;width: 98px">附加信息1:</td><td style="text-align: left">${aSelf[i].addition_1}<td></tr>
  721. <tr><td style="text-align: right;width: 98px">附加信息2:</td><td style="text-align: left">${aSelf[i].addition_2}<td></tr>
  722. <tr><td style="text-align: right;width: 98px">附加信息3:</td><td style="text-align: left">${aSelf[i].addition_3}<td></tr>
  723. <tr><td style="text-align: right;width: 98px">附加信息4:</td><td style="text-align: left">${aSelf[i].addition_4}<td></tr>
  724. <tr><td style="text-align: right;width: 98px">附加信息5:</td><td style="text-align: left">${aSelf[i].addition_5}<td></tr>
  725. <tr><td style="text-align: right;width: 98px">备注:</td><td style="text-align: left">${aSelf[i].remark}<td></tr>
  726. </table>` +
  727. '</div></br>' + aSelf[i].prc_code_desc + '</br>' + aSelf[i].create_time + '</a>').data('node_data', aSelf[i]);
  728. if (i === 0) {
  729. $a = $('<a title="' + aSelf[i].prc_code_desc + '" href="javascript:void(0)"><div class="jProcessChartColDetail" style="display: none">' +
  730. // '操作人:' + aSelf[i].create_man_name +
  731. // '</br>' + '计划号:' + aSelf[i].pact_index +
  732. // '</br>' + '订单号:' + aSelf[i].order_no +
  733. // '</br>' + '生产订单号:' + aSelf[i].prod_order_no +
  734. // '</br>' + '轧制计划号:' + aSelf[i].roll_plan_no +
  735. // '</br>' + '组批号:' + aSelf[i].batch_no +
  736. // '</br>' + '热处理计划号:' + aSelf[i].ht_plan_no +
  737. // '</br>' + '附加信息1:' + aSelf[i].addition_1 +
  738. // '</br>' + '附加信息2:' + aSelf[i].addition_2 +
  739. // '</br>' + '附加信息3:' + aSelf[i].addition_3 +
  740. // '</br>' + '附加信息4:' + aSelf[i].addition_4 +
  741. // '</br>' + '附加信息5:' + aSelf[i].addition_5 +
  742. // '</br>' + '备注:' + aSelf[i].remark +
  743. `<table>
  744. <tr><td style="text-align: right;width: 98px">操作人:</td><td style="text-align: left">${aSelf[i].create_man_name}<td></tr>
  745. <tr><td style="text-align: right;width: 98px">计划号:</td><td style="text-align: left">${aSelf[i].pact_index}<td></tr>
  746. <tr><td style="text-align: right;width: 98px">订单号:</td><td style="text-align: left">${aSelf[i].order_no}<td></tr>
  747. <tr><td style="text-align: right;width: 98px">生产订单号:</td><td style="text-align: left">${aSelf[i].prod_order_no}<td></tr>
  748. <tr><td style="text-align: right;width: 98px">轧制计划号:</td><td style="text-align: left">${aSelf[i].roll_plan_no}<td></tr>
  749. <tr><td style="text-align: right;width: 98px">组批号:</td><td style="text-align: left">${aSelf[i].batch_no}<td></tr>
  750. <tr><td style="text-align: right;width: 98px">热处理计划号:</td><td style="text-align: left">${aSelf[i].ht_plan_no}<td></tr>
  751. <tr><td style="text-align: right;width: 98px">附加信息1:</td><td style="text-align: left">${aSelf[i].addition_1}<td></tr>
  752. <tr><td style="text-align: right;width: 98px">附加信息2:</td><td style="text-align: left">${aSelf[i].addition_2}<td></tr>
  753. <tr><td style="text-align: right;width: 98px">附加信息3:</td><td style="text-align: left">${aSelf[i].addition_3}<td></tr>
  754. <tr><td style="text-align: right;width: 98px">附加信息4:</td><td style="text-align: left">${aSelf[i].addition_4}<td></tr>
  755. <tr><td style="text-align: right;width: 98px">附加信息5:</td><td style="text-align: left">${aSelf[i].addition_5}<td></tr>
  756. <tr><td style="text-align: right;width: 98px">备注:</td><td style="text-align: left">${aSelf[i].remark}<td></tr>
  757. </table>` +
  758. '</div>' + aSelf[i].object_no + '</br>' + aSelf[i].prc_code_desc + '</br>' + aSelf[i].create_time + '</a>').data('node_data', aSelf[i]);
  759. }
  760. $lidivchild = $('<div class="jProcessChartColDiv"></div>');
  761. if (aHighLight) {
  762. $lidivchild.addClass('jProcessChartColDivCurrent')
  763. }
  764. $lidivchild.append($a).appendTo($lidiv);
  765. // $('<li></li>').append($a).appendTo($parent);
  766. }
  767. $lidiv.appendTo($li);
  768. $li.append('<ul></ul>').appendTo($parent);
  769. }
  770. });
  771. }
  772. var nodeCount = 0;
  773. // Method that recursively builds the tree
  774. function buildNode ($node, $appendTo, level, opts) {
  775. var $table = $('<table cellpadding="0" cellspacing="0" border="0"/>');
  776. var $tbody = $('<tbody/>');
  777. // Construct the node container(s)
  778. var $nodeRow = $('<tr/>').addClass('node-cells');
  779. var $nodeCell = $('<td/>').addClass('node-cell').attr('colspan', 2);
  780. var $childNodes = $node.children('ul:first').children('li');
  781. var $nodeDiv;
  782. if ($childNodes.length > 1) {
  783. $nodeCell.attr('colspan', $childNodes.length * 2);
  784. }
  785. // Draw the node
  786. // Get the contents - any markup except li and ul allowed
  787. var $nodeContent = $node.clone()
  788. .children('ul,li')
  789. .remove()
  790. .end()
  791. .html();
  792. // console.log('$nodeContent', $nodeContent);
  793. // Increaments the node count which is used to link the source list and the org chart
  794. nodeCount++;
  795. $node.data('tree-node', nodeCount);
  796. $nodeDiv = $('<div>').addClass('node')
  797. .data('tree-node', nodeCount)
  798. .append($nodeContent);
  799. $nodeDiv.find('.jProcessChartColDiv').on('click', function (e) { // 点击展示弹出框
  800. let _height = document.body.clientHeight - e.clientY - $(e.target).children(':first').height()
  801. if ($(e.target).children(':first').css('display') === 'block') {
  802. $(e.target).children(':first').css('display', 'none');
  803. $('.jProcessChartCol').find('.jProcessChartColDetail').hide(); // 关闭其他弹出框
  804. } else {
  805. $('.jProcessChartCol').find('.jProcessChartColDetail').hide(); // 关闭其他弹出框
  806. $(e.target).children(':first').css('display', 'block');
  807. if (_height < 0) {
  808. $(e.target).children(':first').css('top', _height + 'px')
  809. }
  810. }
  811. });
  812. if (opts.clickCallback && typeof opts.clickCallback === 'function') {
  813. $nodeDiv.on('click', function () {
  814. // $('.jProcessChart').find('div').css('border-color', 'black')
  815. // $('.jProcessChart').find('div a').css('color', 'black')
  816. // $nodeDiv.css('border-color', 'red')
  817. // $nodeDiv.find('a').css('color', 'red')
  818. // opts.clickCallback($node.children('a').data('node_data'));
  819. });
  820. }
  821. // Expand and contract nodes
  822. if (opts.expandAble && $childNodes.length > 0) {
  823. $nodeDiv.on('click', function () {
  824. var $this = $(this);
  825. var $tr = $this.closest('tr');
  826. if ($tr.hasClass('contracted')) {
  827. $this.css('cursor', 'n-resize');
  828. $tr.removeClass('contracted').addClass('expanded');
  829. $tr.nextAll('tr').css('visibility', '');
  830. // Update the <li> appropriately so that if the tree redraws collapsed/non-collapsed nodes
  831. // maintain their appearance
  832. $node.removeClass('collapsed');
  833. } else {
  834. $this.css('cursor', 's-resize');
  835. $tr.removeClass('expanded').addClass('contracted');
  836. $tr.nextAll('tr').css('visibility', 'hidden');
  837. $node.addClass('collapsed');
  838. }
  839. });
  840. }
  841. $nodeCell.append($nodeDiv);
  842. $nodeRow.append($nodeCell);
  843. $tbody.append($nodeRow);
  844. if ($childNodes.length > 0) {
  845. // if it can be expanded then change the cursor
  846. $nodeDiv.css('cursor', 'n-resize');
  847. // recurse until leaves found (-1) or to the level specified
  848. if (opts.depth === -1 || (level + 1 < opts.depth)) {
  849. var $downLineRow = $('<tr/>');
  850. var $downLineCell = $('<td/>').attr('colspan', $childNodes.length * 2);
  851. $downLineRow.append($downLineCell);
  852. // draw the connecting line from the parent node to the horizontal line
  853. var $downLine = $('<div></div>').addClass('line down');
  854. $downLineCell.append($downLine);
  855. $tbody.append($downLineRow);
  856. // Draw the horizontal lines
  857. var $linesRow = $('<tr/>');
  858. $childNodes.each(function () {
  859. var $left = $('<td>&nbsp;</td>').addClass('line left top');
  860. var $right = $('<td>&nbsp;</td>').addClass('line right top');
  861. $linesRow.append($left).append($right);
  862. });
  863. // horizontal line shouldn't extend beyond the first and last child branches
  864. $linesRow.find('td:first')
  865. .removeClass('top')
  866. .end()
  867. .find('td:last')
  868. .removeClass('top');
  869. $tbody.append($linesRow);
  870. var $childNodesRow = $('<tr/>');
  871. $childNodes.each(function () {
  872. var $td = $('<td class="node-container"/>');
  873. $td.attr('colspan', 2);
  874. // recurse through children lists and items
  875. buildNode($(this), $td, level + 1, opts);
  876. $childNodesRow.append($td);
  877. });
  878. }
  879. $tbody.append($childNodesRow);
  880. }
  881. // any classes on the LI element get copied to the relevant node in the tree
  882. // apart from the special 'collapsed' class, which collapses the sub-tree at this point
  883. if ($node.attr('class') !== undefined) {
  884. var classList = $node.attr('class').split(/\s+/);
  885. $.each(classList, function (index, item) {
  886. if (item === 'collapsed') {
  887. $nodeRow.nextAll('tr').css('visibility', 'hidden');
  888. $nodeRow.removeClass('expanded');
  889. $nodeRow.addClass('contracted');
  890. $nodeDiv.css('cursor', 's-resize');
  891. } else {
  892. $nodeDiv.addClass(item);
  893. }
  894. });
  895. }
  896. $table.append($tbody);
  897. $appendTo.append($table);
  898. /* Prevent trees collapsing if a link inside a node is clicked */
  899. // $nodeDiv.children('a').click(function(e){
  900. // console.log(e);
  901. // e.stopPropagation();
  902. // });
  903. };
  904. })(jQuery);
  905. /**
  906. * 物料进程图-横版 : 支持点击展示弹出框
  907. */
  908. // (function ($) {
  909. // $.fn.jProcessChartRow = function (options) {
  910. // var opts = $.extend({}, $.fn.jProcessChartRow.defaults, options);
  911. // var $this = $(this);
  912. // if (!$this || $this.length <= 0) { return false; }
  913. // $this.empty();
  914. //
  915. // var $showlist = $("<ul id='org' style='display:none'></ul>");
  916. // _showall(options.data, $showlist, opts);
  917. // $this.append($showlist);
  918. //
  919. // // build the tree
  920. // var $org = $('#org');
  921. // var $container = $('<div class="' + opts.chartClass + '"/>');
  922. // if ($org.is('ul')) {
  923. // buildNode($org.find('li:first'), $container, 0, opts);
  924. // } else if ($org.is('li')) {
  925. // buildNode($org, $container, 0, opts);
  926. // }
  927. // $this.append($container);
  928. // };
  929. //
  930. // // Option defaults
  931. // $.fn.jProcessChartRow.defaults = {
  932. // depth: -1,
  933. // chartClass: 'jOrgChart jProcessChartRow', // CLASS
  934. // expandAble: true, // 是否展开/收缩
  935. // module: { // 数据模型
  936. // id: 'id',
  937. // pid: 'pid',
  938. // name: 'name',
  939. // children: 'children'
  940. // }
  941. // };
  942. //
  943. // function _showall (oList, $parent, opts) {
  944. // $.each(oList, function (index, val) {
  945. // var aChildren = val[opts.module.children];
  946. // var aSelf = val[opts.module.name];
  947. // if (aChildren && aChildren.length > 0) {
  948. // var $li = $('<li></li>');
  949. // var $lidiv = $('<div></div>');
  950. // for (let i = 0; i < aSelf.length; i++) {
  951. // var $a = $('<a title="' + aSelf[i].name + '" href="javascript:void(0)"><div class="jProcessChartRowDetail" style="display: none">xx</div></br>' + aSelf[i].name + '</br>' + aSelf[i].date + '</a>').data('node_data', aSelf[i]);
  952. // if (i === 0) {
  953. // $a = $('<a title="' + aSelf[i].name + '" href="javascript:void(0)"><div class="jProcessChartRowDetail" style="display: none">xx</div>' + aSelf[i].id + '</br>' + aSelf[i].name + '</br>' + aSelf[i].date + '</a>').data('node_data', aSelf[i]);
  954. // }
  955. // var $lidivchild = $('<div class="jProcessChartRowDiv"></div>');
  956. // if (aSelf[i].current) {
  957. // $lidivchild.addClass('jProcessChartRowDivCurrent')
  958. // }
  959. // $lidivchild.append($a).appendTo($lidiv);
  960. // $lidivchild.appendTo($lidiv);
  961. // }
  962. // $lidiv.appendTo($li);
  963. // $li.append('<ul></ul>').appendTo($parent);
  964. // // 递归显示
  965. // _showall(aChildren, $li.children(':eq(1)'), opts);
  966. // } else {
  967. // $li = $('<li></li>');
  968. // $lidiv = $('<div></div>');
  969. // for (let i = 0; i < aSelf.length; i++) {
  970. // $a = $('<a title="' + aSelf[i].name + '" href="javascript:void(0)"><div class="jProcessChartRowDetail" style="display: none">xx</div></br>' + aSelf[i].name + '</br>' + aSelf[i].date + '</a>').data('node_data', aSelf[i]);
  971. // if (i === 0) {
  972. // $a = $('<a title="' + aSelf[i].name + '" href="javascript:void(0)"><div class="jProcessChartRowDetail" style="display: none">xx</div>' + aSelf[i].id + '</br>' + aSelf[i].name + '</br>' + aSelf[i].date + '</a>').data('node_data', aSelf[i]);
  973. // }
  974. // $lidivchild = $('<div class="jProcessChartRowDiv"></div>');
  975. // if (aSelf[i].current) {
  976. // $lidivchild.addClass('jProcessChartRowDivCurrent')
  977. // }
  978. // $lidivchild.append($a).appendTo($lidiv);
  979. // // $('<li></li>').append($a).appendTo($parent);
  980. // }
  981. // $lidiv.appendTo($li);
  982. // $li.append('<ul></ul>').appendTo($parent);
  983. // }
  984. // });
  985. // }
  986. //
  987. // var nodeCount = 0;
  988. // // Method that recursively builds the tree
  989. // function buildNode ($node, $appendTo, level, opts) {
  990. // var $table = $('<table cellpadding="0" cellspacing="0" border="0"/>');
  991. // var $tbody = $('<tbody/>');
  992. //
  993. // // Construct the node container(s)
  994. // var $nodeRow = $('<tr/>').addClass('node-cells');
  995. // var $nodeCell = $('<td/>').addClass('node-cell').attr('colspan', 2);
  996. // var $childNodes = $node.children('ul:first').children('li');
  997. // var $nodeDiv;
  998. //
  999. // if ($childNodes.length > 1) {
  1000. // $nodeCell.attr('colspan', $childNodes.length * 2);
  1001. // }
  1002. // // Draw the node
  1003. // // Get the contents - any markup except li and ul allowed
  1004. // var $nodeContent = $node.clone()
  1005. // .children('ul,li')
  1006. // .remove()
  1007. // .end()
  1008. // .html();
  1009. // // console.log('$nodeContent', $nodeContent);
  1010. // // Increaments the node count which is used to link the source list and the org chart
  1011. // nodeCount++;
  1012. // $node.data('tree-node', nodeCount);
  1013. // $nodeDiv = $('<div>').addClass('node')
  1014. // .data('tree-node', nodeCount)
  1015. // .append($nodeContent);
  1016. // $nodeDiv.find('.jProcessChartRowDiv').on('click', function (e) {
  1017. // if ($(e.target).children(':first').css('display') === 'block') {
  1018. // $(e.target).children(':first').css('display', 'none');
  1019. // } else {
  1020. // $(e.target).children(':first').css('display', 'block');
  1021. // }
  1022. // })
  1023. // if (opts.clickCallback && typeof opts.clickCallback === 'function') {
  1024. // $nodeDiv.on('click', function () {
  1025. // // $('.jProcessChart').find('div').css('border-color', 'black')
  1026. // // $('.jProcessChart').find('div a').css('color', 'black')
  1027. // // $nodeDiv.css('border-color', 'red')
  1028. // // $nodeDiv.find('a').css('color', 'red')
  1029. // // opts.clickCallback($node.children('a').data('node_data'));
  1030. // });
  1031. // }
  1032. //
  1033. // // Expand and contract nodes
  1034. // if (opts.expandAble && $childNodes.length > 0) {
  1035. // $nodeDiv.on('click', function () {
  1036. // var $this = $(this);
  1037. // var $tr = $this.closest('tr');
  1038. //
  1039. // if ($tr.hasClass('contracted')) {
  1040. // $this.css('cursor', 'n-resize');
  1041. // $tr.removeClass('contracted').addClass('expanded');
  1042. // $tr.nextAll('tr').css('visibility', '');
  1043. //
  1044. // // Update the <li> appropriately so that if the tree redraws collapsed/non-collapsed nodes
  1045. // // maintain their appearance
  1046. // $node.removeClass('collapsed');
  1047. // } else {
  1048. // $this.css('cursor', 's-resize');
  1049. // $tr.removeClass('expanded').addClass('contracted');
  1050. // $tr.nextAll('tr').css('visibility', 'hidden');
  1051. // $node.addClass('collapsed');
  1052. // }
  1053. // });
  1054. // }
  1055. //
  1056. // $nodeCell.append($nodeDiv);
  1057. // $nodeRow.append($nodeCell);
  1058. // $tbody.append($nodeRow);
  1059. //
  1060. // if ($childNodes.length > 0) {
  1061. // // if it can be expanded then change the cursor
  1062. // $nodeDiv.css('cursor', 'n-resize');
  1063. //
  1064. // // recurse until leaves found (-1) or to the level specified
  1065. // if (opts.depth === -1 || (level + 1 < opts.depth)) {
  1066. // var $downLineRow = $('<tr/>');
  1067. // var $downLineCell = $('<td/>').attr('colspan', $childNodes.length * 2);
  1068. // $downLineRow.append($downLineCell);
  1069. //
  1070. // // draw the connecting line from the parent node to the horizontal line
  1071. // var $downLine = $('<div></div>').addClass('line down');
  1072. // $downLineCell.append($downLine);
  1073. // $tbody.append($downLineRow);
  1074. //
  1075. // // Draw the horizontal lines
  1076. // var $linesRow = $('<tr/>');
  1077. // $childNodes.each(function () {
  1078. // var $left = $('<td>&nbsp;</td>').addClass('line left top');
  1079. // var $right = $('<td>&nbsp;</td>').addClass('line right top');
  1080. // $linesRow.append($left).append($right);
  1081. // });
  1082. //
  1083. // // horizontal line shouldn't extend beyond the first and last child branches
  1084. // $linesRow.find('td:first')
  1085. // .removeClass('top')
  1086. // .end()
  1087. // .find('td:last')
  1088. // .removeClass('top');
  1089. //
  1090. // $tbody.append($linesRow);
  1091. // var $childNodesRow = $('<tr/>');
  1092. // $childNodes.each(function () {
  1093. // var $td = $('<td class="node-container"/>');
  1094. // $td.attr('colspan', 2);
  1095. // // recurse through children lists and items
  1096. // buildNode($(this), $td, level + 1, opts);
  1097. // $childNodesRow.append($td);
  1098. // });
  1099. // }
  1100. // $tbody.append($childNodesRow);
  1101. // }
  1102. //
  1103. // // any classes on the LI element get copied to the relevant node in the tree
  1104. // // apart from the special 'collapsed' class, which collapses the sub-tree at this point
  1105. // if ($node.attr('class') !== undefined) {
  1106. // var classList = $node.attr('class').split(/\s+/);
  1107. // $.each(classList, function (index, item) {
  1108. // if (item === 'collapsed') {
  1109. // // console.log($node);
  1110. // $nodeRow.nextAll('tr').css('visibility', 'hidden');
  1111. // $nodeRow.removeClass('expanded');
  1112. // $nodeRow.addClass('contracted');
  1113. // $nodeDiv.css('cursor', 's-resize');
  1114. // } else {
  1115. // $nodeDiv.addClass(item);
  1116. // }
  1117. // });
  1118. // }
  1119. //
  1120. // $table.append($tbody);
  1121. // $appendTo.append($table);
  1122. //
  1123. // /* Prevent trees collapsing if a link inside a node is clicked */
  1124. // // $nodeDiv.children('a').click(function(e){
  1125. // // console.log(e);
  1126. // // e.stopPropagation();
  1127. // // });
  1128. // };
  1129. // })(jQuery);
  1130. /**
  1131. * 未名所以然
  1132. */
  1133. (function ($, window, document) {
  1134. $.fn.easySlider = function (options) {
  1135. alert('1234');
  1136. }
  1137. }(jQuery, window, document));