JSArray

Initial Data

As initial data we'll take 4 books:

  • “War and Peace” by Leo Tolstoy
  • “Hamlet” by William Shakespeare
  • “Madame Bovary” by Gustave Flaubert
  • “The Lord of the Rings” by J. R. R. Tolkien

Configuration

In JSArray the data will look as:

books.js

[
 ["War and Peace", "Leo Tolstoy", "1861-1869" ],
 ["Hamlet", "Shakespeare", "1599-1601" ],
 ["Madame Bovary", "Gustave Flaubert", "1856"  ],
 ["The Lord of the Rings", "J. R. R. Tolkien", "1954-1955"  ]
]

Data in JS array hasn’t got names for values. Values are accessible as (“data0”, “data1”, …):

HTML Code

dataview(jsarray).html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
	<head>
	<link rel="stylesheet" href="../../../codebase/touchui.css" type="text/css" media="screen" charset="utf-8">
		<script src="../../../codebase/touchui.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
              <script type="text/javascript" charset="utf-8">
 
              var books = [
                           ["War and Peace", "Leo Tolstoy", "1861-1869" ],
                           ["Hamlet", "Shakespeare", "1599-1601" ],
                           ["Madame Bovary", "Gustave Flaubert", "1856"  ],
                           ["The Lord of the Rings", "J. R. R. Tolkien", "1954-1955"  ]
                          ]
	      dhx.ui({
				view:"popup",
				body:{
					view:"dataview",
					width:322,
					height:112,
					data:"books", 
                                        datatype:"jsarray",
					type:{
						template:"<span class='dhx_strong'>#data0#</span>#data1#<span class='dhx_light'> <br/> #data2#</span>",
						height:35,
						width:140
					}
				}
		});   
	      </script>
 
	</body>
</html>

If you use data from external file - remove data parameter and add url, where specify the desired data file.

dhx.ui({
                   view:"popup",
		   body:{
				view:"dataview",
				width:322,
				height:112,
  			        url:"books.js", 
                                datatype:"jsarray",
				type:{
					template:"<span class='dhx_strong'>#data0#</span>#data1#<span class='dhx_light'> <br/> #data2#</span>",
					height:35,
					width:140
				}
		   }
});