(function ($) { $.fn.select2tree = function (options) { var defaults = { language: "zh-CN", minimumResultsForSearch: -1 /*theme: "bootstrap"*/ }; var opts = $.extend(defaults, options); opts.templateResult = function (data, container) { if (data.element) { //insert span element and add 'parent' property var $wrapper = $("" + data.text + ""); var $element = $(data.element); $(container).attr("val", $element.val()); if ($element.attr("parent")) { $(container).attr("parent", $element.attr("parent")); } return $wrapper; } else { return data.text; } }; var $that = $(this); $that.select2(opts).on("select2:open", function () { open(); }); function moveOption(parentId, index) { index = index || 0; if (parentId !== undefined) { $(".select2-results__options li[parent='" + parentId + "']").insertAfter(".select2-results__options li[val='" + parentId + "']"); $(".select2-results__options li[parent='" + parentId + "']").each(function () { $(this).attr('level', index); moveOption($(this).attr("val"), index + 1); }); } else { $(".select2-results__options li:not([parent])").appendTo(".select2-results__options ul"); $(".select2-results__options li:not([parent])").each(function () { $(this).attr('level', index); moveOption($(this).attr("val"), index + 1); }); } } //deal switch action function switchAction(parentId, open, isAll) { if (!parentId || $(".select2-results__options li[parent='" + parentId + "']").length <= 0) { return; } if (isAll && $(".select2-results__options li[val='" + parentId + "'][level='1']").length > 0) { return; } if (open) { $(".select2-results__options li[val='" + parentId + "'] span[class]:eq(0)").removeClass("fa-plus-square").addClass("fa-minus-square"); } else { $(".select2-results__options li[val='" + parentId + "'] span[class]:eq(0)").addClass("fa-plus-square").removeClass("fa-minus-square"); } $(".select2-results__options li[parent='" + parentId + "']").each(function () { var $that = $(this); open ? $that.slideDown() : $that.slideUp(); if (!open) { switchAction($that.attr("val"), open, isAll); } }); } function open() { setTimeout(function () { moveOption(); $(".select2-results__options li").each(function () { var $this = $(this); $this.find("span:eq(0)").addClass('far fa-square'); if ($this.attr("parent")) { $(this).siblings("li[val='" + $this.attr("parent") + "']").find("span:eq(0)") .removeClass("fa-square").addClass("fa-plus-square switch").css({ "cursor": "pointer" }); } if (!$this.attr("style")) { var level = Number($this.attr("level")) || 0; var paddingLeft = (level + 1) * 7 + (Number($this.css("paddingLeft").replace("px", "")) || 0); $("li[parent='" + $this.attr("parent") + "']").css("display", "none").css("padding-left", paddingLeft + "px"); } }); $(".select2-results__options li[level='0']").each(function () { var $this = $(this); var root = $this.attr("val"); switchAction(root, true, true); }); openCurrent(); //override mousedown for collapse/expand $(".switch").off("mousedown").on("mousedown", function (event) { var isOpen = $(this).hasClass("fa-plus-square"); switchAction($(this).parent().attr("val"), isOpen); if (isOpen) { openCurrent(); } event.stopPropagation(); event.preventDefault(); }); //override mouseup to nothing $(".switch").off("mouseup").on("mouseup", function () { return false; }); }, 100); } function openCurrent() { var id = $that.val(); var $cur = $(".select2-results__options li[val='" + id + "']").find("span:eq(0)"); if (id && $cur.length) { if ($cur.hasClass('fa-square')) { $cur.removeClass("fa-square").addClass("fa-check-square"); } openParent($cur.parent().attr("parent"), true); } } function openParent(parentId) { var $this = $(".select2-results__options li[val='" + parentId + "']"); if (!parentId || $this.length <= 0) { return; } $this.find("span[class]:eq(0)").removeClass("fa-plus-square").addClass("fa-minus-square"); $(".select2-results__options li[parent='" + parentId + "']").each(function () { $(this).slideDown(); }); openParent($this.attr("parent")); } }; })(jQuery);