Skip to content

Commit

Permalink
Merge pull request #18 from spicycms/feature/select2tree
Browse files Browse the repository at this point in the history 
tree representations for select2 added
  • Loading branch information
@Burus
Burus authored Apr 20, 2017
2 parents ee8dfdd + 940a555 commit 5d7b95b
Show file tree
Hide file tree
Showing 4 changed files with 159 additions and 13 deletions.
9 changes: 9 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
## [1.2.2] 2017-04-19

* Добавлен виджет для древовидного отображения опций выпадающего списка



## [1.2.1]
{TODO описать возможности 1.2.1}

4 changes: 2 additions & 2 deletions setup.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ def long_description():

setup(
name='spicy',
version='1.2.1',
version='1.2.2',

author='Burtsev Alexander',
author_email='[email protected]',
Expand Down Expand Up @@ -86,7 +86,7 @@ def long_description():
},
classifiers=[
'Framework :: Django',
'Development Status :: 1.2.1',
'Development Status :: 1.2.2',
'Topic :: Internet',
'License :: OSI Approved :: BSD License',
'Intended Audience :: Developers',
Expand Down
107 changes: 107 additions & 0 deletions src/spicy/core/admin/static/spicy.core.admin/js/jquery.select2tree.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
(function($) {
$.fn.select2tree = function(options) {
var defaults = {
language: "en",
theme: "bootstrap"
};
var opts = $.extend(defaults, options);
opts.templateResult = function(data, container) {
if(data.element) {
//insert span element and add 'parent' property
var $wrapper = $("<span></span><span>" + data.text + "</span>");
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 recursiveParentSelection(child, parentVals){
var parentVal = child.attr('parent');
var parent = $('li[val=' + parentVal + ']');
parentVals.push(parentVal);
if (parent.attr('parent') != undefined) { recursiveParentSelection(parent, parentVals); }
else { $('#id_{{ field.html_name }}').val(parentVals).trigger('select2:select'); }
}
function getExistedValues(){
var vals = [];
$('#id_{{ field.html_name }} option').each(function(){
var optionText = $(this).text();
var optVal = $(this).val();
$('.select2-selection__choice').each(function(){
if ($(this).text().replace('×', '') == optionText) {
vals.push(optVal);
}
});
});
return vals;
}
function selectTree(evt){
var $this = $(this);
var parentVals = getExistedValues();
recursiveParentSelection($this, parentVals);
}
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"));
});
}
}
//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();
}
}
//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 open() {
setTimeout(function() {
moveOption();
$(".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({
"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");
}
$this.on('mouseup', selectTree);
});
}, 0);
}
})(jQuery);
52 changes: 41 additions & 11 deletions src/spicy/core/admin/templates/spicy.core.admin/admin/formfield.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{% spaceless %}
{% load url from future %}
{% load url from future %}{% load staticfiles %}
{# new admin #}

{% if type == 'li-file' %}
Expand Down Expand Up @@ -286,9 +286,10 @@
})
</script>
{% else %}

<select name="{{ field.html_name }}" id="id_{{ field.html_name }}" class="chzn-select">
{% for option_id, name in field.field.choices %}
<option value="{{ option_id }}" {% if field.value|stringformat:"s" == option_id|stringformat:"s" %}selected="on"{% endif %}>{{ name }}</option>
<option value="{{ option_id }}" {% if field.value|stringformat:"s" == option_id|stringformat:"s" %}selected="on"{% endif %}>{% if name.term_display %}{{ name.term_display }}{% else %}{{ name }}{% endif %}</option>
{% endfor %}
</select>
{% endif %}
Expand All @@ -312,6 +313,33 @@
{% endif %}
</li>

{% elif type == 'li-tree-select2' %}

<!-- scripts for select2-tree widget -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-theme/0.1.0-beta.6/select2-bootstrap.min.css" rel="stylesheet" />
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<script src="{% static 'spicy.core.admin/js/jquery.select2tree.js' %}"></script>

<li class="input {{ classes }}" {% if id %}id="{{ id }}"{% endif %}>
{{ label }}
<select id="id_{{ field.html_name }}" multiple name="{{ field.html_name }}">
{% for opt_id, opt in field.field.choices %}
<option value="{{ opt_id }}" {% if opt.vocabulary %}parent="{{ opt.vocabulary.pk }}"{% endif %}>{% if opt.term_display %}{{ opt.term_display }}{% else %}{{ opt }}{% endif %}</option>
{% endfor %}
</select>
<script type="text/javascript">
$(function() {
$("#id_{{ field.html_name }}").select2tree();
{% if field.value %}
$("#id_{{ field.html_name }}").val({{ field.value }}).trigger('change');
{% endif %}
});
</script>
</li>

{% elif type == 'table-formset'%}
<div class="row-fluid item" id="fset{{ form.prefix }}">
<table class="table table-normal">
Expand Down Expand Up @@ -351,18 +379,20 @@
{% endfor %}
</ul>
</div>

</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<script>
$(document).ready(function(){
$('#fset{{ form.prefix }} tbody tr').formset({
addText: '{% if not form.no_add %}<div class="padded"><button class="btn btn-green"><i class="icon-plus-sign"></i> Добавить</button></div>{% endif %}',
$(document).ready(function(){
$('#fset{{ form.prefix }} tbody tr').formset({
addText: '{% if not form.no_add %}<div class="padded"><button class="btn btn-green"><i class="icon-plus-sign"></i> Добавить</button></div>{% endif %}',

deleteText: '{% if form.can_delete %}<button class="btn btn-red"><i class="icon-trash"></i></button>{% endif %}',
prefix: '{{ form.prefix }}'
});
});
deleteText: '{% if form.can_delete %}<button class="btn btn-red"><i class="icon-trash"></i></button>{% endif %}',
prefix: '{{ form.prefix }}'
});
});
</script>
{% endif %}

{% endspaceless %}
{% endspaceless %}

0 comments on commit 5d7b95b

Please sign in to comment.