flexx icon indicating copy to clipboard operation
flexx copied to clipboard

use bootstrap-select compont failed

Open 1751660300 opened this issue 1 year ago • 0 comments

hi

i want to use bootstrap-select . then i import bootstrap-select.css and bootstrap-select.js by flx.assets.associate_asset

i want to use search select

image

But he didn't take effect, What should I do, please guide me, thank you.

`

-- coding: utf-8 --

from flexx import flx, event from flexx.ui import create_element from roc3_model.common_utils import local_static_file

local_static_file(name, "bootstrap.css", "css") local_static_file(name, "jquery.js", "js") local_static_file(name, "bootstrap.js", "js") local_static_file(name, "bootstrap-select.css", "css") local_static_file(name, "bootstrap-select.js", "js")

class DataList(flx.Widget):

options = event.TupleProp((("1", "1123"), ("2", "4567")), settable=True, doc="""
        A list of tuples (key, text) representing the options. Both
        keys and texts are converted to strings if they are not already.
        For items that are given as a string, the key and text are the same.
        If a dict is given, it is transformed to key-text pairs.
        """)

def _create_dom(self):
    global window
    node = window.document.createElement('div')
    return node

def _render_dom(self):
    global window
    options = self.options
    # node = window.document.createElement('div')
    data_list = window.document.createElement('select')
    for i in range(len(options)):
        key, text = options[i]
        option_item = window.document.createElement('option')
        option_item.setAttribute('value', key)
        option_item.innerText = text
        # option_item = create_element("option", {"value": key}, text)
        data_list.appendChild(option_item)

    # data_list = create_element("select",
    #                            {"class": "selectpicker",
    #                             "aria-label": "select example",
    #                             "data-live-search": "true",
    #                             "style": "width: 100%"},
    #                            option_list)

    data_list.setAttribute('class', "form-select form-select-lg mb-3")
    data_list.setAttribute('style', "width: 100%")
    data_list.setAttribute('data-live-search', "true")


    self.node.appendChild(data_list)


    return None

class Example(flx.Widget):

def init(self):
    with flx.VBox():
        flx.Label(text="123")
        DataList()
        flx.VBox(flex=1)

if name == 'main': flx.launch(Example, "browser") flx.start()`

1751660300 avatar Sep 27 '24 08:09 1751660300