cascader.js 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473
  1. /**
  2. * 级联选择器模块
  3. * date:2020-02-08 License By http://easyweb.vip
  4. */
  5. layui.define(["jquery"], function (a) {
  6. var e = layui.jquery;
  7. layui.link(layui.cache.base + "cascader/cascader.css");
  8. var f = [];
  9. var b = {
  10. render: function (q) {
  11. var E = {
  12. renderFormat: function (J, i) {
  13. return J.join(" / ")
  14. },
  15. clearable: true,
  16. clearAllActive: false,
  17. disabled: false,
  18. trigger: "click",
  19. changeOnSelect: false,
  20. filterable: false,
  21. notFoundText: "没有匹配数据"
  22. };
  23. q = e.extend(E, q);
  24. var B = q.elem;
  25. var A = q.data;
  26. var F = q.renderFormat;
  27. var I = q.clearable;
  28. var l = q.clearAllActive;
  29. var p = q.disabled;
  30. var u = q.trigger;
  31. var v = q.changeOnSelect;
  32. var s = q.reqData;
  33. var n = q.filterable;
  34. var m = q.notFoundText;
  35. var D = q.reqSearch;
  36. var y = q.onChange;
  37. var H = q.onVisibleChange;
  38. var x = q.itemHeight;
  39. var t = true;
  40. var h = e(B);
  41. if (h.next().hasClass("ew-cascader-group")) {
  42. h.next().remove();
  43. for (var z = 0; z < f.length; z++) {
  44. if (B == f[z].elem) {
  45. f.splice(z, 1);
  46. break
  47. }
  48. }
  49. }
  50. f.push({elem: B, onVisibleChange: H});
  51. h.addClass("ew-cascader-hide");
  52. var r = '<div class="ew-cascader-group">';
  53. r += ' <div class="ew-cascader-input-group">';
  54. r += ' <input class="layui-input ew-cascader-input" readonly/>';
  55. r += ' <input class="layui-input ew-cascader-input-search"/>';
  56. r += ' <i class="layui-icon layui-icon-triangle-d ew-icon-arrow"></i>';
  57. r += ' <i class="layui-icon layui-icon-loading-1 layui-anim layui-anim-rotate layui-anim-loop ew-icon-loading"></i>';
  58. r += ' <i class="layui-icon layui-icon-close-fill ew-icon-clear"></i>';
  59. r += " </div>";
  60. r += ' <div class="ew-cascader-dropdown layui-anim layui-anim-upbit"></div>';
  61. r += ' <div class="ew-cascader-search-list"></div>';
  62. r += " </div>";
  63. h.after(r);
  64. var G = h.next();
  65. var o = G.children(".ew-cascader-input-group");
  66. var k = o.children(".ew-cascader-input");
  67. var C = o.children(".ew-cascader-input-search");
  68. var j = G.children(".ew-cascader-dropdown");
  69. var w = G.children(".ew-cascader-search-list");
  70. k.attr("placeholder", h.attr("placeholder"));
  71. p && k.addClass("layui-disabled");
  72. var g = {
  73. data: A, open: function () {
  74. if (G.hasClass("ew-cascader-open")) {
  75. return
  76. }
  77. b.hideAll();
  78. G.addClass("ew-cascader-open");
  79. b.checkWidthPosition(j);
  80. b.checkHeightPosition(j);
  81. H && H(true);
  82. if (n) {
  83. o.addClass("show-search");
  84. C.focus()
  85. }
  86. }, hide: function () {
  87. if (!G.hasClass("ew-cascader-open")) {
  88. return
  89. }
  90. G.removeClass("ew-cascader-open");
  91. G.removeClass("dropdown-show-top");
  92. G.removeClass("dropdown-show-left");
  93. b.hideAllSearch();
  94. H && H(false)
  95. }, removeLoading: function () {
  96. G.removeClass("show-loading");
  97. j.find(".ew-cascader-dropdown-list-item").removeClass("show-loading")
  98. }, setDisabled: function (i) {
  99. p = i;
  100. if (i) {
  101. k.addClass("layui-disabled");
  102. g.hide()
  103. } else {
  104. k.removeClass("layui-disabled")
  105. }
  106. }, getValue: function () {
  107. return h.val()
  108. }, getLabel: function () {
  109. return k.val()
  110. }, setValue: function (J) {
  111. if (J == undefined || J == null || !J.toString()) {
  112. k.val("");
  113. h.val("");
  114. if (l || v) {
  115. j.children(".ew-cascader-dropdown-list").not(":first").remove();
  116. j.find(".ew-cascader-dropdown-list-item").removeClass("active");
  117. b.checkWidthPosition(j)
  118. } else {
  119. j.find(".ew-cascader-dropdown-list-item.is-last").removeClass("active")
  120. }
  121. o.removeClass("show-clear");
  122. return
  123. }
  124. J = J.toString().split(",");
  125. var K = [];
  126. function i(Q, O, N, M, P) {
  127. if (!Q && O) {
  128. Q = [];
  129. L(O)
  130. } else {
  131. if (Q && O && O.children) {
  132. L(O.children)
  133. } else {
  134. G.addClass("show-loading");
  135. s(Q, function (R) {
  136. if (Q) {
  137. O.children = R
  138. } else {
  139. A = R;
  140. Q = []
  141. }
  142. L(R)
  143. }, O)
  144. }
  145. }
  146. function L(S) {
  147. for (var R = 0; R < S.length; R++) {
  148. if (S[R].value == M[N]) {
  149. K[N] = S[R].label;
  150. Q[N] = S[R].value;
  151. if (N < M.length - 1) {
  152. i(Q, S[R], N + 1, M, P)
  153. } else {
  154. P()
  155. }
  156. break
  157. }
  158. }
  159. }
  160. }
  161. i(undefined, A, 0, J, function () {
  162. G.removeClass("show-loading");
  163. k.val(F(K, J));
  164. h.val(J.join(","))
  165. })
  166. }
  167. };
  168. g.setValue(h.val());
  169. o.off("click").on("click", function (J) {
  170. if (k.hasClass("layui-disabled")) {
  171. return
  172. }
  173. if (G.hasClass("show-loading")) {
  174. return
  175. }
  176. if (G.hasClass("ew-cascader-open")) {
  177. if (!n) {
  178. g.hide()
  179. }
  180. return
  181. }
  182. if (t) {
  183. if (A) {
  184. t = false;
  185. d(j, A, undefined, x);
  186. i();
  187. g.open()
  188. } else {
  189. G.addClass("show-loading");
  190. s(undefined, function (K) {
  191. t = false;
  192. A = K;
  193. d(j, K, undefined, x);
  194. G.removeClass("show-loading");
  195. g.open()
  196. }, undefined)
  197. }
  198. } else {
  199. i();
  200. g.open()
  201. }
  202. function i() {
  203. var M = h.val().toString();
  204. if (M) {
  205. M = M.split(",");
  206. for (var L = 0; L < M.length; L++) {
  207. var K = j.children(".ew-cascader-dropdown-list").eq(L).children('.ew-cascader-dropdown-list-item[data-value="' + M[L] + '"]');
  208. if (L == M.length - 1) {
  209. K.addClass("active")
  210. } else {
  211. K.trigger("click")
  212. }
  213. }
  214. } else {
  215. g.setValue()
  216. }
  217. }
  218. });
  219. o.children(".ew-icon-arrow").off("click").on("click", function (i) {
  220. if (G.hasClass("ew-cascader-open")) {
  221. g.hide();
  222. i.stopPropagation()
  223. }
  224. });
  225. j.off("click").on("click", ".ew-cascader-dropdown-list-item", function () {
  226. var P = e(this);
  227. if (P.hasClass("active")) {
  228. if (P.hasClass("is-last")) {
  229. g.hide()
  230. }
  231. return
  232. }
  233. if (P.hasClass("ew-cascader-disabled")) {
  234. return
  235. }
  236. if (P.parent().parent().find(".ew-cascader-dropdown-list-item").hasClass("show-loading")) {
  237. return
  238. }
  239. var O = P.data("index").toString();
  240. var K = O.split("-");
  241. var L = A[parseInt(K[0])], Q = [L.value], N = [L.label];
  242. for (var M = 1; M < K.length; M++) {
  243. L = L.children[parseInt(K[M])];
  244. Q[M] = L.value;
  245. N[M] = L.label
  246. }
  247. if (L.haveChildren) {
  248. if (L.children) {
  249. P.parent().nextAll().remove();
  250. b.checkWidthPosition(j);
  251. J();
  252. d(j, L.children, O, x)
  253. } else {
  254. P.addClass("show-loading");
  255. s(Q, function (i) {
  256. L.children = i;
  257. P.parent().nextAll().remove();
  258. b.checkWidthPosition(j);
  259. J();
  260. d(j, i, O, x);
  261. P.removeClass("show-loading")
  262. }, L)
  263. }
  264. if (v) {
  265. J();
  266. R()
  267. }
  268. } else {
  269. P.parent().nextAll().remove();
  270. J();
  271. R();
  272. g.hide()
  273. }
  274. function J() {
  275. P.parent().children(".ew-cascader-dropdown-list-item").removeClass("active");
  276. P.addClass("active")
  277. }
  278. function R() {
  279. k.val(F(N, Q));
  280. h.val(Q.join(","));
  281. h.removeClass("layui-form-danger");
  282. y && y(Q, L)
  283. }
  284. });
  285. if (u == "hover") {
  286. j.off("mouseenter").on("mouseenter", ".ew-cascader-dropdown-list-item", function () {
  287. if (!e(this).hasClass("is-last")) {
  288. e(this).trigger("click")
  289. }
  290. })
  291. }
  292. if (I) {
  293. o.off("mouseenter").on("mouseenter", function () {
  294. if (h.val().toString() && !k.hasClass("layui-disabled")) {
  295. e(this).addClass("show-clear")
  296. }
  297. });
  298. o.off("mouseleave").on("mouseleave", function () {
  299. e(this).removeClass("show-clear")
  300. });
  301. o.children(".ew-icon-clear").off("click").on("click", function (i) {
  302. i.stopPropagation();
  303. g.setValue()
  304. })
  305. }
  306. if (n) {
  307. C.off("input").on("input", function () {
  308. var N = e(this).val();
  309. if (!N) {
  310. G.removeClass("show-search-list");
  311. o.removeClass("have-value");
  312. return
  313. }
  314. o.addClass("have-value");
  315. if (D) {
  316. D(N, function (i) {
  317. c(w, i, m);
  318. G.addClass("show-search-list")
  319. }, A)
  320. } else {
  321. var M = [], O = [];
  322. function J(P, Q, U, S) {
  323. for (var R = 0; R < P.length; R++) {
  324. var T = P[R];
  325. T.__label = Q ? Q + " / " + T.label : T.label;
  326. T.__value = U ? U + "," + T.value : T.value;
  327. T.__disabled = T.disabled ? T.disabled : S;
  328. if (T.children && T.children.length) {
  329. J(T.children, T.__label, T.__value, T.__disabled);
  330. delete T.__label;
  331. delete T.__value
  332. } else {
  333. M.push({label: T.__label, value: T.__value, disabled: T.__disabled})
  334. }
  335. }
  336. }
  337. J(A);
  338. for (var K = 0; K < M.length; K++) {
  339. var L = M[K];
  340. if (L.label.indexOf(N) > -1) {
  341. L.label = L.label.replace(new RegExp(N, "g"), '<span class="search-keyword">' + N + "</span>");
  342. O.push(L)
  343. }
  344. }
  345. c(w, O, m);
  346. G.addClass("show-search-list")
  347. }
  348. });
  349. w.off("click").on("click", ".ew-cascader-search-list-item", function (i) {
  350. i.stopPropagation();
  351. if (e(this).hasClass("ew-cascader-disabled")) {
  352. return
  353. }
  354. g.hide();
  355. g.setValue(e(this).data("value"))
  356. })
  357. }
  358. return g
  359. }, hideAll: function () {
  360. b.hideAllSearch();
  361. for (var j = 0; j < f.length; j++) {
  362. var k = f[j].elem;
  363. var h = f[j].onVisibleChange;
  364. var g = e(k).next();
  365. if (g.hasClass("ew-cascader-open")) {
  366. g.removeClass("ew-cascader-open");
  367. g.removeClass("dropdown-show-top");
  368. g.removeClass("dropdown-show-left");
  369. h && h(false)
  370. }
  371. }
  372. }, hideAllSearch: function () {
  373. e(".ew-cascader-input-group").removeClass("show-search");
  374. e(".ew-cascader-group").removeClass("show-search-list");
  375. e(".ew-cascader-input-group").removeClass("have-value");
  376. e(".ew-cascader-input-search").val("")
  377. }, getPageHeight: function () {
  378. return document.documentElement.clientHeight || document.body.clientHeight
  379. }, getPageWidth: function () {
  380. return document.documentElement.clientWidth || document.body.clientWidth
  381. }, checkWidthPosition: function (g) {
  382. if (g.offset().left + g.outerWidth() > b.getPageWidth()) {
  383. g.parent().addClass("dropdown-show-left")
  384. } else {
  385. g.parent().removeClass("dropdown-show-left")
  386. }
  387. }, checkHeightPosition: function (g) {
  388. if (g.offset().top + g.outerHeight() > b.getPageHeight()) {
  389. g.parent().addClass("dropdown-show-top");
  390. if (g.offset().top < 0) {
  391. g.parent().removeClass("dropdown-show-top")
  392. }
  393. }
  394. }
  395. };
  396. b.getCityData = function (h) {
  397. for (var g = 0; g < h.length; g++) {
  398. h[g].value = h[g].label;
  399. if (h[g].children) {
  400. h[g].children = b.getCityData(h[g].children)
  401. }
  402. }
  403. return h
  404. };
  405. b.getCity = function (k) {
  406. for (var h = 0; h < k.length; h++) {
  407. for (var g = 0; g < k[h].children.length; g++) {
  408. delete k[h].children[g].children
  409. }
  410. }
  411. return k
  412. };
  413. b.getProvince = function (h) {
  414. for (var g = 0; g < h.length; g++) {
  415. delete h[g].children
  416. }
  417. return h
  418. };
  419. var d = function (n, p, o, j) {
  420. var h = j ? ' style="height:' + j + ';"' : "";
  421. var g = '<div class="ew-cascader-dropdown-list" ' + h + ">";
  422. for (var k = 0; k < p.length; k++) {
  423. var q = p[k];
  424. var l = o == undefined ? k : (o + "-" + k);
  425. if (q.haveChildren == undefined) {
  426. q.haveChildren = q.children ? true : false
  427. }
  428. var m = q.haveChildren ? "" : " is-last";
  429. q.disabled && (m += " ew-cascader-disabled");
  430. g += ' <div class="ew-cascader-dropdown-list-item' + m + '" data-index="' + l + '" data-value="' + q.value + '">' + q.label + '<i class="layui-icon layui-icon-right ew-icon-right"></i><i class="layui-icon layui-icon-loading-1 layui-anim layui-anim-rotate layui-anim-loop ew-icon-loading"></i></div>'
  431. }
  432. g += " </div>";
  433. n.append(g);
  434. b.checkWidthPosition(n)
  435. };
  436. var c = function (m, h, l) {
  437. var n = "";
  438. if (h.length == 0) {
  439. n = '<div class="ew-cascader-search-list-empty">' + l + "</div>"
  440. } else {
  441. for (var g = 0; g < h.length; g++) {
  442. var k = h[g];
  443. var j = k.disabled ? " ew-cascader-disabled" : "";
  444. n += '<div class="ew-cascader-search-list-item' + j + '" data-value="' + k.value + '">' + k.label + "</div>"
  445. }
  446. }
  447. m.html(n)
  448. };
  449. e(document).off("click.cascader").on("click.cascader", function (l) {
  450. try {
  451. var m = l.target.className.split(" ");
  452. var k = ["ew-cascader-group", "ew-cascader-input", "ew-icon-arrow", "ew-cascader-dropdown", "ew-cascader-dropdown-list", "ew-cascader-dropdown-list-item", "ew-icon-right", "ew-cascader-input-search", "ew-cascader-search-list", "ew-cascader-search-list-item"];
  453. for (var h in m) {
  454. for (var g in k) {
  455. if (m[h] == k[g]) {
  456. return
  457. }
  458. }
  459. }
  460. } catch (l) {
  461. }
  462. b.hideAll()
  463. });
  464. a("cascader", b)
  465. });