From f3fad169487296f8462b6ea67db7433b05110262 Mon Sep 17 00:00:00 2001 From: blackWind <34080651+blackWins@users.noreply.github.com> Date: Thu, 19 May 2022 15:47:22 +0800 Subject: [PATCH 1/4] Update select2tree.js MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 有值的情况下点击下拉自动展开相关节点，单选模式有效。 --- select2tree.js | 29 +++++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/select2tree.js b/select2tree.js index 5ee8d51..bff2612 100644 --- a/select2tree.js +++ b/select2tree.js @@ -96,6 +96,35 @@ $(".switch").mouseup(function() { return false; }); + + //Expand the selected values to radio mode only + $(".select2-selection").off("mouseup"); + $(".select2-selection").mouseup(function () { + var ariaowns = $(this).attr('aria-owns'); + if (!ariaowns || ariaowns == null) return; + var selectid = ariaowns.split('-')[1]; + //get current value + var val = $('#' + selectid).val(); + + if (val == '' || val == null || !val || val.indexOf(',') > 0) return; + + var pval = []; + do { + var p = $('#' + selectid + ' option[value=' + val + ']').attr('parent'); + if (p == '' || !p) + break; + pval.push(p); + val = p; + } while (true) + + if (pval.length > 0) { + for (var i in pval.reverse()) { + switchAction(pval[i], true); + } + } + event.stopPropagation(); + }); + }, 0); } })(jQuery); From 88ee4209aa1930c27c4e8e3f97b8f47d00c36413 Mon Sep 17 00:00:00 2001 From: freestyle <34080651+blackWins@users.noreply.github.com> Date: Wed, 13 Sep 2023 17:29:28 +0800 Subject: [PATCH 2/4] optimize 1. performance optimization 2. collapsed display by default 3. stitch display text --- select2tree.js | 269 +++++++++++++++++++++++++++---------------------- 1 file changed, 147 insertions(+), 122 deletions(-) diff --git a/select2tree.js b/select2tree.js index bff2612..7ca6fe9 100644 --- a/select2tree.js +++ b/select2tree.js @@ -1,130 +1,155 @@ -(function($) { - $.fn.select2tree = function(options) { - var defaults = { - language: "zh-CN", - 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; - } - }; - - $(this).select2(opts).on("select2:open", open); - }; +(function ($) { - function moveOption(id) { - if(id) { - $(".select2-results__options li[parent=" + id + "]").insertAfter(".select2-results__options li[val=" + id + "]"); - $(".select2-results__options li[parent=" + id + "]").each(function() { - moveOption($(this).attr("val")); - }); - } else { - $(".select2-results__options li:not([parent])").appendTo(".select2-results__options ul"); - $(".select2-results__options li:not([parent])").each(function() { - moveOption($(this).attr("val")); - }); - } - } + let icon = { + type: "fa", + expand: "fa-chevron-right", + collapse: "fa-chevron-down" + }; - //deal switch action - function switchAction(id, open) { - $(".select2-results__options li[parent='" + id + "']").each(function() { - switchAction($(this).attr("val"), open); - }); - if(open) { - $(".select2-results__options li[val=" + id + "] span[class]:eq(0)").removeClass("glyphicon-chevron-right").addClass("glyphicon-chevron-down"); - $(".select2-results__options li[parent='" + id + "']").slideDown(); - } else { - $(".select2-results__options li[val=" + id + "] span[class]:eq(0)").addClass("glyphicon-chevron-right").removeClass("glyphicon-chevron-down"); - $(".select2-results__options li[parent='" + id + "']").slideUp(); - } - } + $.fn.select2tree = function (options) { + var defaults = { language: "zh-CN", theme: "bootstrap" }; + var opts = $.extend(defaults, options); + opts.templateResult = templateResult; + opts.templateSelection = templateSelection; + $(this).select2(opts).on("select2:open", open); + }; - //get the level of li - function getLevel(id) { - var level = 0; - while($(".select2-results__options li[parent][val='" + id + "']").length > 0) { - id = $(".select2-results__options li[val='" + id + "']").attr("parent"); - level++; - } - return level; - } + function templateSelection(selection, $this) { + var selectid = $this[0].id.split('-').slice(1, -1).join('-'); + var v = $('#' + selectid).val(), arr = []; + if (v == '' || v == null || !v || v.indexOf(',') > 0) return selection.text; + do { + var node = $('#' + selectid + ' option[value=' + v + ']'); + if (node.length != 1) { + break; + } + v = node.attr('parent'); + arr.push(node.text()); + } while (true) + return arr.length == 0 ? selection.text : arr.reverse().join('/ '); + } - function open() { - setTimeout(function() { - moveOption(); + function templateResult(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; + } + } - $(".select2-results__options li").each(function() { - var $this = $(this); - //loop li add some classes and properties - if($this.attr("parent")) { - $(this).siblings("li[val=" + $this.attr("parent") + "]").find("span:eq(0)").addClass("glyphicon glyphicon-chevron-down switch").css({ - "padding": "0 10px", - "cursor": "default" - }); - $(this).siblings("li[val=" + $this.attr("parent") + "]").find("span:eq(1)").css("font-weight", "bold"); - } - //add gap for children - // if(!$this.attr("style")) { - // var paddingLeft = getLevel($this.attr("val")) * 2; - // $("li[parent='" + $this.attr("parent") + "']").css("padding-left", paddingLeft + "em"); - // } - if(!$this.attr("style")) { - var paddingLeft = getLevel($this.attr("val")) * 2; - $("li[parent='" + $this.attr("parent") + "']").css("padding-left", paddingLeft + "em").css("display","none"); - } - }); + function processElements(selector, process) { + $(selector).each(function () { + process($(this)); + }); + } - //override mousedown for collapse/expand - $(".switch").mousedown(function() { - switchAction($(this).parent().attr("val"), $(this).hasClass("glyphicon-chevron-right")); - event.stopPropagation(); - }); + function moveOption(id) { + var selector = id ? ".select2-results__options li[parent=" + id + "]" : ".select2-results__options li:not([parent])"; + if (id) { + $(selector).insertAfter(".select2-results__options li[val=" + id + "]"); + } + else { + $(selector).appendTo(".select2-results__options ul"); + } + processElements(selector, function ($element) { + moveOption($element.attr("val")); + }); + } + //deal switch action + function switchAction(id, open) { + var $target = $(".select2-results__options li[val=" + id + "]"); + if (open) { + $target.find("span[class]:eq(0)").removeClass(icon.expand).addClass(icon.collapse); + $(".select2-results__options li[parent='" + id + "']").slideDown(); + } else { + $target.find("span[class]:eq(0)").removeClass(icon.collapse).addClass(icon.expand); + $(".select2-results__options li[parent='" + id + "']").slideUp(); + processElements(".select2-results__options li[parent='" + id + "']", function ($element) { + switchAction($element.attr("val"), open); + }); + } + } + //get the level of li + function getLevel(id) { + var level = 0; + var elements = $(".select2-results__options li[parent]"); + while (elements.filter("[val='" + id + "']").length > 0) { + id = elements.filter("[val='" + id + "']").attr("parent"); + level++; + } + return level; + } - //override mouseup to nothing - $(".switch").mouseup(function() { - return false; - }); - - //Expand the selected values to radio mode only - $(".select2-selection").off("mouseup"); - $(".select2-selection").mouseup(function () { - var ariaowns = $(this).attr('aria-owns'); - if (!ariaowns || ariaowns == null) return; - var selectid = ariaowns.split('-')[1]; - //get current value - var val = $('#' + selectid).val(); - - if (val == '' || val == null || !val || val.indexOf(',') > 0) return; - - var pval = []; - do { - var p = $('#' + selectid + ' option[value=' + val + ']').attr('parent'); - if (p == '' || !p) - break; - pval.push(p); - val = p; - } while (true) - - if (pval.length > 0) { - for (var i in pval.reverse()) { - switchAction(pval[i], true); - } - } - event.stopPropagation(); - }); - - }, 0); - } + function open(event) { + setTimeout(function () { + moveOption(); + setClass(event); + //override mousedown for collapse/expand + $(".switch").mousedown(switchMouseDown); + //override mouseup to nothing + $(".switch").mouseup(switchMouseUp); + }, 0); + } + + function getSlideDownValues(id) { + var v = $('#' + id).val(), arr = []; + if (v == '' || v == null || !v || v.indexOf(',') > 0) return null; + arr.push(v); + do { + var p = $('#' + id + ' option[value=' + v + ']').attr('parent'); + if (p == '' || !p) { + break; + } + v = p; + arr.push(p); + } while (true) + + return arr; + } + + function setClass(event) { + var slideDownItems = getSlideDownValues(event.currentTarget.id); + //loop li add some classes and properties + $(".select2-results__options li").each(function () { + var $this = $(this); + var parent = $this.attr("parent"); + var close = slideDownItems + && $this.attr("parent") + && !(slideDownItems.indexOf($this.attr("val")) != -1 || slideDownItems.indexOf(parent) != -1); + //add gap for children + if (!$this.attr("style")) { + var paddingLeft = getLevel($this.attr("val")) * 2; + processElements("li[parent='" + parent + "']", function ($element) { + $element.css({ "padding-left": paddingLeft + "em" }); + }); + } + if (close) { + $this.hide(); + } + if (parent) { + var $siblings = $this.siblings("li[val=" + parent + "]"); + $siblings.find("span:eq(0)").addClass(icon.type + " switch " + (close ? icon.expand : icon.collapse)).css({ "margin-right": "4px", "cursor": "default" }); + $siblings.find("span:eq(1)").css("font-weight", "bold"); + } + else { + + } + }); + } + + function switchMouseDown(event) { + switchAction($(this).parent().attr("val"), $(this).hasClass(icon.expand)); + event.stopPropagation(); + } + + function switchMouseUp() { + return false; + } })(jQuery); From b5f3164c68fcd81fcfc1ddd0a8a7d44f9a2333ab Mon Sep 17 00:00:00 2001 From: freestyle <34080651+blackWins@users.noreply.github.com> Date: Wed, 13 Sep 2023 17:32:57 +0800 Subject: [PATCH 3/4] Update README.md --- README.md | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/README.md b/README.md index c6d67cd..dec1d5a 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,6 @@ # select2tree extend select2 for treeview. 扩展select2，使它可以树形展示，可以缩放。 -See demo - # 使用方法 * 与select2用法一致，只是在使用时$('select').select2()变成了$('select').select2tree()。 * option标签中指定parent属性即可实现树形展示，支持数据源乱序，展示下拉选项时将自动排序。 @@ -14,8 +12,8 @@ This is plugin for tree representation select2's dropdown. It allows any levels Parent option should be referenced in children via ``parent`` attribute. You should set it like parent's ``value`` attribute - ``parent="parent_value_attribute"``. ### Example +![image](https://github.com/blackWins/select2tree/assets/34080651/93299959-bcad-436d-a781-b0a1e9d11a38) -[Look at demo](http://runjs.cn/detail/bezljwvl) This files are required for correct working: ``` @@ -56,8 +54,6 @@ If you want to apply some values at the begining, use select2's event triggering ### Пример использования -[Посмотреть демо](http://runjs.cn/detail/bezljwvl) - Минимально необходимые файлы для работы плагина: ``` From 2d498ba91a46c855746dff6c6cf10df8c8e9effe Mon Sep 17 00:00:00 2001 From: freestyle <34080651+blackWins@users.noreply.github.com> Date: Thu, 14 Sep 2023 10:04:38 +0800 Subject: [PATCH 4/4] add package.json --- package.json | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) create mode 100644 package.json diff --git a/package.json b/package.json new file mode 100644 index 0000000..be22e73 --- /dev/null +++ b/package.json @@ -0,0 +1,24 @@ +{ + "name": "select2tree", + "version": "1.0.0", + "description": "extend select2 for treeview", + "main": "select2tree.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/blackWins/select2tree.git" + }, + "keywords": [ + "select2tree", + "select2", + "tree" + ], + "author": "blackwinds", + "license": "ISC", + "bugs": { + "url": "https://github.com/blackWins/select2tree/issues" + }, + "homepage": "https://github.com/blackWins/select2tree#readme" +}