select2_ms.pt
3.32 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<div tal:define="
name name|field.name;
style field.widget.style;
oid oid|field.oid;
css_class css_class|field.widget.css_class;
unicode unicode|str;
optgroup_class optgroup_class|field.widget.optgroup_class;
multiple multiple|field.widget.multiple;
url url|field.widget.url;
slave slave|field.widget.slave;"
tal:omit-tag="">
<style>
.select2-selection.form-control {
padding: 0px 0px;
}
.select2-container--default .select2-selection--multiple,
.select2-container--default .select2-selection--single {
border: 1px solid #ccc;
}
</style>
<input type="hidden" name="__start__" value="${name}:sequence"
tal:condition="multiple" />
<select tal:attributes="
name name;
id oid;
class string: form-control ${css_class or ''};
data-placeholder field.widget.placeholder|None;
multiple multiple;
style style;
attributes|field.widget.attributes|{};">
<tal:loop tal:repeat="item values">
<optgroup tal:condition="isinstance(item, optgroup_class)"
tal:attributes="label item.label">
<option tal:repeat="(value, description) item.options"
tal:attributes="
selected python:field.widget.get_select_value(cstruct, value);
class css_class;
label field.widget.long_label_generator and description;
value value"
tal:content="field.widget.long_label_generator and field.widget.long_label_generator(item.label, description) or description"/>
</optgroup>
<option tal:condition="not isinstance(item, optgroup_class)"
tal:attributes="
selected python:field.widget.get_select_value(cstruct, item[0]);
class css_class;
value item[0]">${item[1]}</option>
</tal:loop>
</select>
<script type="text/javascript">
deform.addCallback(
'${field.oid}',
function (oid) {
$('#' + oid).select2({
containerCssClass: 'form-control',
placeholder: "${str(field.widget.placeholder).replace('"','\\"')|""}" || undefined,
allowClear: "${hasattr(field.widget, 'placeholder')}",
tags: ${str(getattr(field.widget, 'tags', 'undefined')).lower()}
});
}
);
</script>
<script type="text/javascript" tal:condition="url and slave">
deform.addCallback(
'${field.oid}',
function (oid) {
$('#' + oid).change(function () {
$("#${slave}").val("");
$("#${slave}").empty();
$("#${slave}").append('<option value="" selected disabled>Pilih Data...</option>');
let value = $(this).val();
if (value) {
$.ajax({
type: "GET",
url: "${url}" + value,
success: function (res) {
if (res) {
$.each(res, function (key, value) {
$("#${slave}").append('<option value="' + key + '">' + value + '</option>');
});
} else {
$("#${slave}").empty();
}
}
});
}
$("#${slave}").change();
});
});
</script>
<input type="hidden" name="__end__" value="${name}:sequence"
tal:condition="multiple" />
</div>