PoNG Module: Table View
This module creates a table for any kind of data for you in a resource view.
Please have a look at the other standard modules coming with PoNG.
Inhaltsverzeichnis
Usage in "structure"
Simply "type": "pong-table"
to the rows
or cols
resource. Example structure file extract:
{ "layout": { ... "rows": [ { "rowId": "bla", "resourceURL": "Products", "type": "pong-table", ... }, ... ], ... }
Definition of the Table
The resource will load the table definition from the URL ../svc/XYZ/pong-table
Example JSON definiton from ../svc/<resourceUrl>/pong-table
{ "dataURL": "data", "filter" : { "dataReqParams": [ {"id":"productSearchString", "label":"Product"}, {"id":"productType", "label":"Type"} ], "dataReqParamsSrc": "Form" }, "rowId": "productId", "cols" : [ { "id": "name", "label": "Name", "cellType": "text" }, { "id": "descr", "label": "Description", "cellType": "text" }, { "id": "img", "label": "Picture", "cellType": "img" }, { "id": "addToOrder", "label": "Add", "cellType": "button" } ], "maxRows":"10" }
The "filter"
is optional.
Available column types:
- text
- img
- linkLink (link text is "link")
- button
Special definitions for "cols":
- tooltip (label is the id of the column, where tool tip should be applied)
The data will be requested from the URL svc/<resourceURL>/<dataURL>?productSearchString=<productSearchString>&productType=<productType>
.
The dataReqParams
will be looked up in the session map. You can use e.g. PoNG Module: Form View to set these values in the session map.
Options for dataReqParams
:
- Form
- SessionMap (only prepared in v0.1)
The button will do an asynchronous POST the svc/<resourceURL>/<id of button>?rowId=<rowId>
to the resource.
In the example above this will be posted (productId of the row may be 1234): svc/Products/addToOrder?rowId=1234
Simple example
{ "dataURL": "data", "dataReqParams": [ {"id":"productSearchString", "label":"Product"}, {"id":"productType", "label":"Type"} ], "dataReqParamsSrc": "Form", "rowId": "productId", "cols" : [ { "id": "name", "label": "Name", "cellType": "text" }, { "id": "link", "label": "Data Sheet", "cellType": "linkLink" }, { "id": "descr", "label": "name", "cellType": "tooltip" }, { "id": "img", "label": "Picture", "cellType": "img" }, { "id": "order", "label": "Add", "cellType": "button" } ], "maxRows":"5" }
Table CSS
You can use the following CCS elements to define thy style of the table:
- Table ID: #<resId>ContentPongTable
- Table class: pongTable
- optional Form DIV ID: #<resId>ContentPongTableFrm
- optional From DIV class: pongTableFrm