2016-05-30 20 views
9

Mit dem folgenden minimalen Beispiel kann ich Buttons erstellen, die mit dem Jupyter Notebook interagieren und eine HTML-Tabelle, die im Notebook angezeigt wird.Platziere ipywidgets in HTML in Jupyter notebook

import ipywidgets 
from IPython.display import display 

from IPython.core.display import HTML 

def func(btn): 
    print('Hi!') 

btn1 = ipywidgets.Button(description="Click me!") 
btn1.on_click(func) 
btn2 = ipywidgets.Button(description="Click me!") 
btn2.on_click(func) 
display(btn1) 
display(btn2) 

display(HTML(
     '<table>' + 
     '<tr><td>Something here</td><td>Button 1 here</td></tr>' + 
     '<tr><td>Something here</td><td>Button 2 here</td></tr>' + 
     '</table>' 
    )) 

Das erzeugte Ergebnis ist: screenshot of table and buttons

Ich möchte nun die Schaltflächen in der HTML-Tabelle platzieren. Ich habe versucht, die Methode Widget._ipython_display_() zu untersuchen, aber das erlaubt mir nicht, den Knopf innerhalb meiner eigenen html Tabelle zu benutzen.

(Bitte die kleine Tabelle als Beispiel sehen. Ich die Tasten in einem großen Tisch platzieren möchten und die Tasten verwenden, um Zeilen aus einer Datenbank zu löschen.)

In this question, wissen die wollte, wie man Widgets relativ zueinander platzieren. Hier möchte ich die Widgets in anderen HTML-Code einfügen.

Antwort

3

Es scheint nicht eine einfache Möglichkeit, dies zu erreichen. Sie müssen entweder ein benutzerdefiniertes ipywidget erstellen, um eine Tabelle anzuzeigen, oder manuell den Code für eine HTML-Schaltfläche schreiben, dessen volle Kontrolle Sie haben.

Das Beste, was ich war ein Weg finden könnte eine Tabelle mit einer Reihe von VBoxes innerhalb eines HBox zu emulieren:

import ipywidgets as widgets 
from IPython.display import display 

def func(btn): 
    print('Hi!') 

btn1 = widgets.Button(description="Click me!") 
btn1.on_click(func) 
btn2 = widgets.Button(description="Click me!") 
btn2.on_click(func) 

# This is where you fill your table 
cols = [ 
    # Each tuple contains a column header and a list of items/widgets 
    ('Col1', ['hello', 'goodbye']), 
    ('Col2', ['world', 'universe']), 
    ('Buttons', [btn1, btn2]), 
] 

vboxes = [] 
for header, data in cols: 
    vboxes.append(widgets.VBox([widgets.HTML('<b>%s</b>' % header)] + [ 
     d if isinstance(d, widgets.Widget) else widgets.HTML(str(d)) for d in data], 
    layout=widgets.Layout(border='1px solid'))) 

hbox = widgets.HBox(vboxes) 

display(hbox) 

Ergebnis:

enter image description here