Skip to content

Commit ce53cdf

Browse files
chfwchfw
committed
add pyexcel-handsontable in the tutorial. ❇️
1 parent df84bd2 commit ce53cdf

File tree

10 files changed

+144
-5
lines changed

10 files changed

+144
-5
lines changed

‎.moban.d/docs/source/index.rst.jj2‎

Lines changed: 36 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -135,7 +135,18 @@ Please visit this link http://localhost:8000/polls/import/, you shall see this u
135135

136136
Please then select
137137
`sample-data.xls <https://github.com/pyexcel/django-excel/blob/master/sample-data.xls>`_
138-
and upload. Then visit the admin page http://localhost:8000/admin/polls/question,
138+
and upload. And you get the following excel-alike table in response to confirm all were imported.
139+
140+
.. image:: handsontable-question.png
141+
142+
.. image:: handsontable-choice.png
143+
144+
.. note ::
145+
146+
pyexcel-handsontable along with pyexcel v0.5.0 brings excel-alie table rendering feature.
147+
Let me explain how this view is done at the end of the tutorial.
148+
149+
Then visit the admin page http://localhost:8000/admin/polls/question,
139150
you shall see questions have been populated:
140151

141152
.. image:: question-admin.png
@@ -282,6 +293,30 @@ set exported as a single sheet file as:
282293

283294
.. image:: custom-export.png
284295

296+
Render an excel-alike html in a browser
297+
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
298+
299+
In the tutorial, you have seen the rendering of the excel-alike table. First of
300+
all, the credits goes to `handsontable developers<https://handsontable.com/>`_.
301+
`pyexcel-handsontable` as renderer plugin to pyexcel v0.5.0 bring it to
302+
pyexcel developers.
303+
304+
Here is how it is done. Simply put in 'handsontable.html' instead of 'xls' as
305+
file type.
306+
307+
.. literalinclude:: ../../polls/views.py
308+
:lines: 153-155
309+
310+
It is understood that you will want to embed it into your django templates.
311+
Here are the sample embedding code:
312+
313+
.. literalinclude:: ../../polls/views.py
314+
:lines: 158-189
315+
316+
Those views can be accessed as http://localhost:8000/polls/embedded_handson_view/
317+
and http://localhost:8000/polls/embedded_handson_view_single/.
318+
319+
285320
{%endblock%}
286321

287322
{%block api_table%}

‎.moban.d/tests/requirements.txt‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,5 @@ lxml
44
pyexcel-ods3>=0.1.0
55
pyexcel-xls>=0.1.0
66
pyexcel-xlsx>=0.1.0
7+
pyexcel-handsontable
78
{%endblock%}

‎doc/source/handsontable-choice.png‎

26.7 KB
Loading

‎doc/source/handsontable-question.png‎

31.3 KB
Loading

‎doc/source/index.rst‎

Lines changed: 36 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -314,7 +314,18 @@ Please visit this link http://localhost:8000/polls/import/, you shall see this u
314314

315315
Please then select
316316
`sample-data.xls <https://github.com/pyexcel/django-excel/blob/master/sample-data.xls>`_
317-
and upload. Then visit the admin page http://localhost:8000/admin/polls/question,
317+
and upload. And you get the following excel-alike table in response to confirm all were imported.
318+
319+
.. image:: handsontable-question.png
320+
321+
.. image:: handsontable-choice.png
322+
323+
.. note ::
324+
325+
pyexcel-handsontable along with pyexcel v0.5.0 brings excel-alie table rendering feature.
326+
Let me explain how this view is done at the end of the tutorial.
327+
328+
Then visit the admin page http://localhost:8000/admin/polls/question,
318329
you shall see questions have been populated:
319330

320331
.. image:: question-admin.png
@@ -461,6 +472,30 @@ set exported as a single sheet file as:
461472

462473
.. image:: custom-export.png
463474

475+
Render an excel-alike html in a browser
476+
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
477+
478+
In the tutorial, you have seen the rendering of the excel-alike table. First of
479+
all, the credits goes to `handsontable developers<https://handsontable.com/>`_.
480+
`pyexcel-handsontable` as renderer plugin to pyexcel v0.5.0 bring it to
481+
pyexcel developers.
482+
483+
Here is how it is done. Simply put in 'handsontable.html' instead of 'xls' as
484+
file type.
485+
486+
.. literalinclude:: ../../polls/views.py
487+
:lines: 153-155
488+
489+
It is understood that you will want to embed it into your django templates.
490+
Here are the sample embedding code:
491+
492+
.. literalinclude:: ../../polls/views.py
493+
:lines: 158-189
494+
495+
Those views can be accessed as http://localhost:8000/polls/embedded_handson_view/
496+
and http://localhost:8000/polls/embedded_handson_view_single/.
497+
498+
464499
.. _data-types-and-its-conversion-funcs:
465500

466501
All supported data types

‎polls/urls.py‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,5 +11,13 @@
1111
url(r'^parse/(.*)', views.parse, name="parse"),
1212
url(r'^import/', views.import_data, name="import"),
1313
url(r'^import_sheet/', views.import_sheet, name="import_sheet"),
14-
url(r'^export/(.*)', views.export_data, name="export")
14+
url(r'^export/(.*)', views.export_data, name="export"),
15+
url(r'^handson_view/', views.handson_table, name="handson_view"),
16+
17+
# handson table view
18+
url(r'^embedded_handson_view/',
19+
views.embed_handson_table, name="embed_handson_view"),
20+
url(r'^embedded_handson_view_single/',
21+
views.embed_handson_table_from_a_single_table,
22+
name="embed_handson_view")
1523
]

‎polls/views.py‎

Lines changed: 41 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
from django.shortcuts import render
1+
from django.shortcuts import render, redirect
22
from django.http import HttpResponseBadRequest, HttpResponse
33
from _compact import JsonResponse
44
from django import forms
@@ -86,7 +86,7 @@ def choice_func(row):
8686
['question_text', 'pub_date', 'slug'],
8787
['question', 'choice_text', 'votes']]
8888
)
89-
return HttpResponse("OK", status=200)
89+
return redirect('handson_view')
9090
else:
9191
return HttpResponseBadRequest()
9292
else:
@@ -148,3 +148,42 @@ def parse(request, data_struct_type):
148148
return HttpResponseBadRequest()
149149
else:
150150
return HttpResponseBadRequest()
151+
152+
153+
def handson_table(request):
154+
return excel.make_response_from_tables(
155+
[Question, Choice], 'handsontable.html')
156+
157+
158+
def embed_handson_table(request):
159+
"""
160+
Renders two table in a handsontable
161+
"""
162+
content = excel.pe.save_book_as(
163+
models=[Question, Choice],
164+
dest_file_type='handsontable.html',
165+
dest_embed=True)
166+
content.seek(0)
167+
return render(
168+
request,
169+
'custom-handson-table.html',
170+
{
171+
'handsontable_content': content.read()
172+
})
173+
174+
175+
def embed_handson_table_from_a_single_table(request):
176+
"""
177+
Renders one table in a handsontable
178+
"""
179+
content = excel.pe.save_as(
180+
model=Question,
181+
dest_file_type='handsontable.html',
182+
dest_embed=True)
183+
content.seek(0)
184+
return render(
185+
request,
186+
'custom-handson-table.html',
187+
{
188+
'handsontable_content': content.read()
189+
})

‎templates/custom-handson-table.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<html>
2+
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/handsontable/0.31.0/handsontable.full.min.css">
3+
<script src="https://cdnjs.cloudflare.com/ajax/libs/handsontable/0.31.0/handsontable.full.min.js"></script>
4+
<style>
5+
body{font-family:Helvetica,sans-serif;margin:2 0 0 0}.tab{margin-bottom:0 !important;text-align:center;list-style:none;padding:0 0 0 10px;line-height:24px;height:26px;overflow:hidden;font-size:12px;font-family:verdana;position:relative;margin:0}.tab li{margin-left:0 !important;float:left;height:24px;border:1px solid #aaa;background:#d1d1d1;background:linear-gradient(top, #ececec 50%, #d1d1d1);display:inline-block;position:relative;z-index:0;border-top-left-radius:6px;border-top-right-radius:6px;box-shadow:0 3px 3px rgba(0,0,0,0.4),inset 0 1px 0 #fff;text-shadow:0 1px #fff;margin:0 -5px;padding:0 20px}.tab li.active{background:#fff;color:#333;z-index:2}.tab li:before{left:-6px;border-width:0 1px 1px 0;box-shadow:2px 2px 0 #d1d1d1}.tab li:after{right:-6px;border-width:0 0 1px 1px;box-shadow:-2px 2px 0 #d1d1d1}.tab a{color:#555;text-decoration:none}.tab:before{position:absolute;content:" ";width:100%;bottom:0;left:0;border-bottom:1px solid #aaa;z-index:1}.tabcontent{margin-top:-1px}
6+
</style>
7+
<body>
8+
<h1>Handsontable was embedded in a html table</h1>
9+
<table>
10+
<tr>
11+
<td>
12+
{{handsontable_content|safe}}
13+
</td>
14+
<td>
15+
<h3>Hei, this view demonstrate how handsontable can be embedded</h3>
16+
</td>
17+
</tr>
18+
</table>
19+
</body>
20+
</html>

‎templates/handsontable.html‎

Whitespace-only changes.

‎tests/requirements.txt‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,4 @@ lxml
77
pyexcel-ods3>=0.1.0
88
pyexcel-xls>=0.1.0
99
pyexcel-xlsx>=0.1.0
10+
pyexcel-handsontable

0 commit comments

Comments
 (0)