| 21 | $.fn.selectpicker.Constructor.BootstrapVersion = '4'; |
| 22 | |
| 23 | export class Select extends InputItem { |
| 24 | static accept_input_types: string[] = ["select"]; |
| 25 | |
| 26 | use_bootstrap_select: boolean = false; |
| 27 | |
| 28 | constructor(spec: any, task_id: string, on_input_event: (event_name: string, input_item: InputItem) => void) { |
| 29 | super(spec, task_id, on_input_event); |
| 30 | if (spec.native === false || (spec.native === undefined && spec.multiple && !is_mobile())) { |
| 31 | this.use_bootstrap_select = true; |
| 32 | } |
| 33 | } |
| 34 | |
| 35 | create_element(): JQuery { |
| 36 | let spec = deep_copy(this.spec); |
| 37 | const id_name = spec.name + '-' + Math.floor(Math.random() * Math.floor(9999)); |
| 38 | spec['id_name'] = id_name; |
| 39 | |
| 40 | let html = Mustache.render(select_input_tpl, spec); |
| 41 | this.element = $(html); |
| 42 | this.setup_select_options(this.element, spec.options); |
| 43 | |
| 44 | if (this.use_bootstrap_select) { |
| 45 | // @ts-ignore |
| 46 | this.element.find('select').selectpicker(); |
| 47 | } |
| 48 | |
| 49 | if (spec.onblur) { |
| 50 | // blur事件时，发送当前值到服务器 |
| 51 | this.element.find('select').on("blur", (e) => { |
| 52 | this.on_input_event("blur", this); |
| 53 | }); |
| 54 | } |
| 55 | if (spec.onchange) { |
| 56 | this.element.find('select').on("change", (e) => { |
| 57 | this.on_input_event("change", this); |
| 58 | }); |
| 59 | } |
| 60 | return this.element; |
| 61 | } |
| 62 | |
| 63 | setup_select_options(elem: JQuery, options: any) { |
| 64 | let input_elem = elem.find('select'); |
| 65 | let opts = input_elem.find('option'); |
| 66 | for (let idx = 0; idx < options.length; idx++) |
| 67 | opts.eq(idx).val(JSON.stringify(options[idx].value)); |
| 68 | |
| 69 | // 将额外的html参数加到input标签上 |
| 70 | const ignore_keys = make_set(['type', 'label', 'invalid_feedback', 'valid_feedback', 'help_text', |
| 71 | 'options', 'datalist', 'multiple', 'onchange', 'onblur']) |
| 72 | |
| 73 | for (let key in this.spec) { |
| 74 | if (key in ignore_keys) continue; |
| 75 | input_elem.attr(key, this.spec[key]); |
| 76 | } |
| 77 | |
| 78 | if (this.use_bootstrap_select) { |
| 79 | // @ts-ignore |
| 80 | input_elem.selectpicker('refresh'); |
no outgoing calls
searching dependent graphs…