jsontable:jsontable_demo
Table of Contents
JSON Table Demo
This is example for the JSON Table Plugin.
Simple example
<jsontable id=cars path=cars options='{"colHeaders": ["Year", "Car", "Count"]}'>[ ["2017", "Honda", 10], ["2018", "Toyota", 20], ["2019", "Nissan", 30] ]</jsontable>
null
[["2017","Honda",10],["2018","Toyota",20],["2019","Nissan",30]]
- element: jsontable, id: cars_, path: cars, inline data
Advanced example
Table data definition
Add som data into JSON_database.cars:
<json path=cars2>[ ["BMW", 2017, {"color": {"chassis": "white", "bumper": "white"}}], ["Renault", 2015, {"color": {"chassis": "yellow", "bumper": "black"}}], ["Tesla", 2018, {"color": {"chassis": "red"}}] ]</json>
- element: json, path: cars2, inline data
Table options definition
Table options are basically JSON data and can be defined separately:
<json id=table_options_id path=table_options>{ "colHeaders": ["Car", "Year", "Chassis color", "Bumper color"], "columns": [ {}, {"type": "numeric"}, { "data": "2.color.chassis" }, { "data": "2.color.bumper", "width": 100, "editor": "select", "selectOptions": ["yellow", "red", "black", "white"] } ], "search": true }</json>
- element: json, id: table_options__id, path: table_options, inline data
Table
<jsontable> element is first handled by JSON Data Plugin. Attributes 'options' and 'save' are specific. Here is description for all elements:
id
attribute is necessary, if we want to store changed data into dokuwiki document. This is handled by json plugin via safe ajax call.path
attribute sets data source for table to previously generated data in JSON_database.cars.display
attribute displays all tabs, just for info here.inline_data
are json data, which are combined with 'original_data'. 'original_data' are already defined on path by previous <json> elements or by 'src' attribute. We can say, 'inline_data' overrides 'original_data'. 'combined_data' are 'inline_data' combined with 'original_data' and is passed to the table as initial value. In the example below, chassis.color is set to green for second car. Please note, that here we access array elements with object notation.save
attribute specifies, how data are stored intoinline_data
. If set toall
, then all 'combined_data' will be stored into 'inline_data' on table change. Otherwise only the difference form 'original data' will be saved. This is the default behavior.options
attribute is a JSON string directly passed into Handsontable options.
<jsontable id=cars2 path=cars2 display=all save=diff options=%$table_options%> {"1":{"2":{"color":{"chassis":"green"}}}} </jsontable>
[ [ "BMW", 2017, { "color": { "chassis": "white", "bumper": "white" } } ], [ "Renault", 2015, { "color": { "chassis": "yellow", "bumper": "black" } } ], [ "Tesla", 2018, { "color": { "chassis": "red" } } ] ]
[ [ "BMW", 2017, { "color": { "chassis": "white", "bumper": "white" } } ], [ "Renault", 2015, { "color": { "chassis": "green", "bumper": "black" } } ], [ "Tesla", 2018, { "color": { "chassis": "red" } } ] ]
- element: jsontable, id: cars2_, path: cars2, inline data
jsontable/jsontable_demo.txt · Last modified: 2023/10/27 00:49 by 127.0.0.1