JMakiTableDataModel < Projects < TWiki

TWiki . Projects . JMakiTableDataModel

Main Model page

jMaki Table Data Model

Using Array of objects as Rows

The rows should be an array of objects that are keyed to the column names. The column names need a unique id which is then used in the data to associate it with a given row. The rows are defined as an array of objects where the property names match the ids given for any given column id.

{
  columns : [
   {id : 'title', label : 'Titile'}, 
   {id : 'author', label : 'Author'}, 
   {id : 'isbn', label : 'Isbn'}, 
   {id : 'description', label : 'Description'}
  ], 
  rows : [
     { title : 'Book Title 1',
       author : 'Author 1',
       isbn: '4412',
       description : 'A Some long description'
     },
     { id : 'foo',
       title : 'Book Title 2',
       author : 'Author 2',
       isbn: '4414',
       description : 'A Some long description'}                         
   ]
}

You can provide the column names as a property of the args or you can combine the columns and rows into a single object and pass it to the widget as a service or the value. The row id on a given row will be automatically assigned if not provided. It is recommended you provide ids with the rows so they can be later updated or removed.

(1.2) Data Model

    tabledata ::= "{" <columns> [<rows>] "}"
    columns ::= "["  {<column>} "]"
    column ::=  "{ label :"   <string>"  "id :" <columnid> "},"
    columnid :: = <string>,
    rows :: = "["  {<row>} "]"
    row ::=  "{" [< rowId >] ,  <columnid>  ":  " [<string> | <object>]"}",
    rowId :: = "rowId :"  "<string>"
    object :: = "object :"  "<JavaScript Object Literal>"

JSON Schema formate :

{
       "description" : "jMaki DataTable",
         "type":"object",
         "properties": { 
          "columns" : {
             "type" : "array",
               "items" : { 
                 "type" : "object", 
                 "properties" : {
                    "id" : {"type": "string", "optional":true,},
                  "label" : {"type": "string"}
                 }
               },           
             "type" : "array",
               "rows" : { 
                 "type" : "object", 
                 "properties" : {
                    "id" : {"type": "string", "optional":true,},
                  "label" : {"type": "string"}
                 }
               }
           } 
         }      
  }

(1.2) Events

Rows events are published to the topic assigned to the given widget instance. Table events include:

Subscribe Events

event type argument (object literal)
addRow { value: <row>}
addRows { value: [<row>]}
clear {}
removeRow {targetId : < rowId>}
select {targetId : < rowId>}
updateRow { targetId :<rowId>, value: <row> }

Subscribe events allow you to manipulate a given instance of a widget. The event names are appended to the the subscribe topic name following a "/". For example "addRow" for a yahoo.dataTable would be "/yahoo/dataTable/addRow"

jmaki.publish("/dojo/table/addRow", {
     value :
         { title : 'Book Title 3',
           author : 'Author 3',
           isbn: '4415',
           description : 'A Some long description'}
 });

jmaki.publish("/dojo/table/addRow", {
     value :
       [
         { title : 'Book Title 3',
           author : 'Author 3',
           isbn: '4415',
           description : 'A Some long description'
         },
         { title : 'Book Title 4',
           author : 'Author 4',
           isbn: '4416',
           description : 'A Some long description'
         }
      ]
 });

jmaki.publish("/yahoo/dataTable/clear", { });

jmaki.publish("/yahoo/dataTable/removeRow", { targetId : 'foo'});

The rowId should be the id of the row you wish to remove.

 var _data = { title : 'Book Title New', author : 'Author New', isbn : 'New', description : 'A Some long New description'};
 jmaki.publish("/table/updateRow", { targetId : "bar", value : _data});

Publish Events

These are the events published to the "publish" topic associated with a widget.

Event type Payload Event
onSelect {widgetId : uuid , topic : , type : 'onSelect' , targetId : selected_row} Publshed when a user selects a row.

(1.3) Yahoo Data Table Extensions

TBD in jMaki 1.1

Last Modified:

-- Main.gmurray - 27 Sept 2007

----- Revision r49 - 30 May 2008 - 21:39:12 - Main.carlavmott