PageRenderTime 42ms CodeModel.GetById 0ms RepoModel.GetById 0ms app.codeStats 0ms

/demo/index.html

http://flexigrid.googlecode.com/
HTML | 381 lines | 368 code | 13 blank | 0 comment | 0 complexity | 338cd106a04a3b2d2bb778656b5d8442 MD5 | raw file
    

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    2. 

  2. <html xmlns="http://www.w3.org/1999/xhtml">

    3. 

  3. <head>

    4. 

  4. 	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    5. 

  5. 	<title>Flexigrid</title>

    6. 

  6. 	<link rel="stylesheet" href="style.css" />

    7. 

  7. 	<link rel="stylesheet" type="text/css" href="../css/flexigrid.pack.css" />

    8. 

  8. 	<script type="text/javascript"

    9. 

  9. 		src="http://code.jquery.com/jquery-1.5.2.min.js"></script>

    10. 

  10. 	<script type="text/javascript" src="../js/flexigrid.pack.js"></script>

    11. 

  11. </head>

    12. 

  12. <body>

    13. 

  13. 	<img src="images/flash.png" alt="Flexigrid" width="960" height="483"

    14. 

  14. 		usemap="#Map" style="visibility: hidden"

    15. 

  15. 		onload="$(this).css({visibility:'visible',display:'none'}).fadeIn('slow');"

    16. 

  16. 		title="Flexigrid" border="0" />

    17. 

  17. 	<map name="Map" id="Map">

    18. 

  18. 		<area shape="rect" coords="671,29,853,72" href="https://code.google.com/p/flexigrid/downloads/list?q=label:Featured"

    19. 

  19. 			alt="Download" />

    20. 

  20. 	</map>

    21. 

  21. 

    22. 

  22. 	<h1 class="title" style="display: none">

    23. 

  23. 		<strong>Flexigrid</strong> for jQuery<span

    24. 

  24. 			style="font-size: 12px">by Paulo P. Marinas</span>

    25. 

  25. 	</h1>

    26. 

  26. 

    27. 

  27. 	<div class="update">

    28. 

  28. 		<h2>What is it?</h2>

    29. 

  29. 

    30. 

  30. 		<p>Lightweight but rich data grid with resizable columns and a

    31. 

  31. 			scrolling data to match the headers, plus an ability to connect to an

    32. 

  32. 			xml based data source using Ajax to load the content.</p>

    33. 

  33. 		<p>Similar in concept with the Ext Grid only its pure jQuery love,

    34. 

  34. 			which makes it light weight and follows the jQuery mantra of running

    35. 

  35. 			with the least amount of configuration.</p>

    36. 

  36. 

    37. 

  37. 		<h3>Features</h3>

    38. 

  38. 		<ul>

    39. 

  39. 			<li>Resizable columns</li>

    40. 

  40. 			<li>Resizable height and width</li>

    41. 

  41. 			<li>Sortable column headers</li>

    42. 

  42. 			<li>Cool theme</li>

    43. 

  43. 			<li>Can convert an ordinary table</li>

    44. 

  44. 			<li>Ability to connect to an ajax data source (XML and JSON[new])</li>

    45. 

  45. 			<li>Paging</li>

    46. 

  46. 			<li>Show/hide columns</li>

    47. 

  47. 			<li>Toolbar (new)</li>

    48. 

  48. 			<li>Search (new)</li>

    49. 

  49. 			<li>Accessible API</li>

    50. 

  50. 			<li>Many more</li>

    51. 

  51. 		</ul>

    52. 

  52. 	</div>

    53. 

  53. 

    54. 

  54. 	<div class="update">

    55. 

  55. 		<h2>FAQ</h2>

    56. 

  56. 		<ol>

    57. 

  57. 			<li><div class="question">Where can I get support?</div>

    58. 

  58. 				<div class="answer">

    59. 

  59. 				Bugs can be reported 

    60. 

  60. 				<a href="http://code.google.com/p/flexigrid/">http://code.google.com/p/flexigrid/</a>, and

    61. 

  61. 				our fantastic community support is available at 

    62. 

  62. 				<a href="http://groups.google.com/group/flexigrid/">http://groups.google.com/group/flexigrid/</a>.

    63. 

  63. 				</div>

    64. 

  64. 			</li>

    65. 

  65. 			<li>

    66. 

  66. 				<div class="question">What's recently changed and what are the known bugs?</div>

    67. 

  67. 				<div class="answer">Go to  

    68. 

  68. 					<a href="http://code.google.com/p/flexigrid/issues/list">

    69. 

  69. 					http://code.google.com/p/flexigrid/issues/list</a>

    70. 

  70. 				</div>

    71. 

  71. 			</li>

    72. 

  72. 			<li><div class="question">What browsers does Flexigrid support?</div>

    73. 

  73. 				<div class="answer">We support browsers IE6, Firefox 3, Opera 9,

    74. 

  74. 					Safari 3, Chrome 7 and greater.</div>

    75. 

  75. 			</li>

    76. 

  76. 			<li><div class="question">Where can I contribute code or suggest a feature?</div>

    77. 

  77. 				<div class="answer"><a href="http://code.google.com/p/flexigrid/">http://code.google.com/p/flexigrid/</a></div>

    78. 

  78. 			</li>

    79. 

  79. 			<li><div class="question">Can I use it for personal or commercial projects/modify it/hack it?</div>

    80. 

  80. 				<div class="answer">Absolutely! Just make sure you adhere to either the <a href="http://jquery.org/license">GPL or MIT licenses</a>.</div>

    81. 

  81. 			</li>

    82. 

  82. 			<li><div class="question">Can I connect this to a form or add Parameters?</div>

    83. 

  83. 				<div class="answer">Sure, check out our <a href="sample.html">sample code</a> 

    84. 

  84. 				to learn how.</div>

    85. 

  85. 			</li>

    86. 

  86. 		</ol>

    87. 

  87. 	</div>

    88. 

  88. 

    89. 

  89. 	<div class="update">

    90. 

  90. 		<h2>Files you need</h2>

    91. 

  91. 		<ul>

    92. 

  92. 			<li><a href="http://www.jquery.com">jQuery</a></li>

    93. 

  93. 			<li><a href="https://code.google.com/p/flexigrid/downloads/list?q=label:Featured">FlexiGrid Plugin Pack(32K)</a>

    94. 

  94. 				(includes the js, css, and images)</li>

    95. 

  95. 		</ul>

    96. 

  96. 	</div>

    97. 

  97. 

    98. 

  98. 	<div class="update">

    99. 

  99. 		<h2>How to use</h2>

    100. 

  100. 		<p>Check out the examples below, or 

    101. 

  101. 		<a href="http://code.google.com/p/flexigrid/source/">browse the source</a>.</p>

    102. 

  102. 	</div>

    103. 

  103. 

    104. 

  104. 	<h2>Example 1</h2>

    105. 

  105. 	<p>

    106. 

  106. 		The most basic example with the zero configuration, with a table

    107. 

  107. 		converted into flexigrid (<a href="#"

    108. 

  108. 			onclick="$(this).parent().next().toggle(); return false;">Show

    109. 

  109. 			sample code</a>)

    110. 

  110. 	</p>

    111. 

  111. 	<div class="code">

    112. 

  112. 		<pre>$('.flexme').flexigrid();</pre>

    113. 

  113. 	</div>

    114. 

  114. 	<table class="flexme1">

    115. 

  115. 		<thead>

    116. 

  116. 			<tr>

    117. 

  117. 				<th width="100">Col 1</th>

    118. 

  118. 				<th width="100">Col 2</th>

    119. 

  119. 				<th width="100">Col 3 is a long header name</th>

    120. 

  120. 				<th width="300">Col 4</th>

    121. 

  121. 			</tr>

    122. 

  122. 		</thead>

    123. 

  123. 		<tbody>

    124. 

  124. 			<tr>

    125. 

  125. 				<td>This is data 1 with overflowing content</td>

    126. 

  126. 				<td>This is data 2</td>

    127. 

  127. 				<td>This is data 3</td>

    128. 

  128. 				<td>This is data 4</td>

    129. 

  129. 			</tr>

    130. 

  130. 			<tr>

    131. 

  131. 				<td>This is data 1</td>

    132. 

  132. 				<td>This is data 2</td>

    133. 

  133. 				<td>This is data 3</td>

    134. 

  134. 				<td>This is data 4</td>

    135. 

  135. 			</tr>

    136. 

  136. 			<tr>

    137. 

  137. 				<td>This is data 1</td>

    138. 

  138. 				<td>This is data 2</td>

    139. 

  139. 				<td>This is data 3</td>

    140. 

  140. 				<td>This is data 4</td>

    141. 

  141. 			</tr>

    142. 

  142. 			<tr>

    143. 

  143. 				<td>This is data 1</td>

    144. 

  144. 				<td>This is data 2</td>

    145. 

  145. 				<td>This is data 3</td>

    146. 

  146. 				<td>This is data 4</td>

    147. 

  147. 			</tr>

    148. 

  148. 			<tr>

    149. 

  149. 				<td>This is data 1</td>

    150. 

  150. 				<td>This is data 2</td>

    151. 

  151. 				<td>This is data 3</td>

    152. 

  152. 				<td>This is data 4</td>

    153. 

  153. 			</tr>

    154. 

  154. 			<tr>

    155. 

  155. 				<td>This is data 1</td>

    156. 

  156. 				<td>This is data 2</td>

    157. 

  157. 				<td>This is data 3</td>

    158. 

  158. 				<td>This is data 4</td>

    159. 

  159. 			</tr>

    160. 

  160. 			<tr>

    161. 

  161. 				<td>This is data 1</td>

    162. 

  162. 				<td>This is data 2</td>

    163. 

  163. 				<td>This is data 3</td>

    164. 

  164. 				<td>This is data 4</td>

    165. 

  165. 			</tr>

    166. 

  166. 			<tr>

    167. 

  167. 				<td>This is data 1</td>

    168. 

  168. 				<td>This is data 2</td>

    169. 

  169. 				<td>This is data 3</td>

    170. 

  170. 				<td>This is data 4</td>

    171. 

  171. 			</tr>

    172. 

  172. 			<tr>

    173. 

  173. 				<td>This is data 1</td>

    174. 

  174. 				<td>This is data 2</td>

    175. 

  175. 				<td>This is data 3</td>

    176. 

  176. 				<td>This is data 4</td>

    177. 

  177. 			</tr>

    178. 

  178. 			<tr>

    179. 

  179. 				<td>This is data 1</td>

    180. 

  180. 				<td>This is data 2</td>

    181. 

  181. 				<td>This is data 3</td>

    182. 

  182. 				<td>This is data 4</td>

    183. 

  183. 			</tr>

    184. 

  184. 			<tr>

    185. 

  185. 				<td>This is data 1</td>

    186. 

  186. 				<td>This is data 2</td>

    187. 

  187. 				<td>This is data 3</td>

    188. 

  188. 				<td>This is data 4</td>

    189. 

  189. 			</tr>

    190. 

  190. 			<tr>

    191. 

  191. 				<td>This is data 1</td>

    192. 

  192. 				<td>This is data 2</td>

    193. 

  193. 				<td>This is data 3</td>

    194. 

  194. 				<td>This is data 4</td>

    195. 

  195. 			</tr>

    196. 

  196. 		</tbody>

    197. 

  197. 	</table>

    198. 

  198. 

    199. 

  199. 	<h2>Example 2</h2>

    200. 

  200. 	<p>

    201. 

  201. 		Table converted into flexigrid with height, and width set to auto,

    202. 

  202. 		stripes remove. (<a href="#"

    203. 

  203. 			onclick="$(this).parent().next().toggle(); return false;">Show

    204. 

  204. 			sample code</a>)

    205. 

  205. 	</p>

    206. 

  206. 	<div class="code">

    207. 

  207. 		<pre>$('.flexme2').flexigrid({height:'auto',striped:false});</pre>

    208. 

  208. 	</div>

    209. 

  209. 	<table class="flexme2">

    210. 

  210. 		<thead>

    211. 

  211. 			<tr>

    212. 

  212. 				<th width="100">Col 1</th>

    213. 

  213. 				<th width="100">Col 2</th>

    214. 

  214. 				<th width="100">Col 3 is a long header name</th>

    215. 

  215. 				<th width="300">Col 4</th>

    216. 

  216. 			</tr>

    217. 

  217. 		</thead>

    218. 

  218. 		<tbody>

    219. 

  219. 			<tr>

    220. 

  220. 				<td>This is data 1 with overflowing content</td>

    221. 

  221. 				<td>This is data 2</td>

    222. 

  222. 				<td>This is data 3</td>

    223. 

  223. 				<td>This is data 4</td>

    224. 

  224. 			</tr>

    225. 

  225. 			<tr>

    226. 

  226. 				<td>This is data 1</td>

    227. 

  227. 				<td>This is data 2</td>

    228. 

  228. 				<td>This is data 3</td>

    229. 

  229. 				<td>This is data 4</td>

    230. 

  230. 			</tr>

    231. 

  231. 			<tr>

    232. 

  232. 				<td>This is data 1</td>

    233. 

  233. 				<td>This is data 2</td>

    234. 

  234. 				<td>This is data 3</td>

    235. 

  235. 				<td>This is data 4</td>

    236. 

  236. 			</tr>

    237. 

  237. 			<tr>

    238. 

  238. 				<td>This is data 1</td>

    239. 

  239. 				<td>This is data 2</td>

    240. 

  240. 				<td>This is data 3</td>

    241. 

  241. 				<td>This is data 4</td>

    242. 

  242. 			</tr>

    243. 

  243. 			<tr>

    244. 

  244. 				<td>This is data 1</td>

    245. 

  245. 				<td>This is data 2</td>

    246. 

  246. 				<td>This is data 3</td>

    247. 

  247. 				<td>This is data 4</td>

    248. 

  248. 			</tr>

    249. 

  249. 			<tr>

    250. 

  250. 				<td>This is data 1</td>

    251. 

  251. 				<td>This is data 2</td>

    252. 

  252. 				<td>This is data 3</td>

    253. 

  253. 				<td>This is data 4</td>

    254. 

  254. 			</tr>

    255. 

  255. 		</tbody>

    256. 

  256. 	</table>

    257. 

  257. 

    258. 

  258. 	<h2>Example 3</h2>

    259. 

  259. 	<p>

    260. 

  260. 		Flexigrid with a dynamic data, paging, search, toolbar, and connected

    261. 

  261. 		to an JSON file. (<a href="#"

    262. 

  262. 			onclick="$(this).parent().next().toggle(); return false;">Show

    263. 

  263. 			sample code</a>)

    264. 

  264. 	</p>

    265. 

  265. 	<div class="code">

    266. 

  266. 		<pre>

    267. 

  267. $("#flex1").flexigrid({

    268. 

  268. 	url: 'post2.php',

    269. 

  269. 	dataType: 'json',

    270. 

  270. 	colModel : [

    271. 

  271. 		{display: 'ISO', name : 'iso', width : 40, sortable : true, align: 'center'},

    272. 

  272. 		{display: 'Name', name : 'name', width : 180, sortable : true, align: 'left'},

    273. 

  273. 		{display: 'Printable Name', name : 'printable_name', width : 120, sortable : true, align: 'left'},

    274. 

  274. 		{display: 'ISO3', name : 'iso3', width : 130, sortable : true, align: 'left', hide: true},

    275. 

  275. 		{display: 'Number Code', name : 'numcode', width : 80, sortable : true, align: 'right'}

    276. 

  276. 		],

    277. 

  277. 	buttons : [

    278. 

  278. 		{name: 'Add', bclass: 'add', onpress : test},

    279. 

  279. 		{name: 'Delete', bclass: 'delete', onpress : test},

    280. 

  280. 		{separator: true}

    281. 

  281. 		],

    282. 

  282. 	searchitems : [

    283. 

  283. 		{display: 'ISO', name : 'iso'},

    284. 

  284. 		{display: 'Name', name : 'name', isdefault: true}

    285. 

  285. 		],

    286. 

  286. 	sortname: "iso",

    287. 

  287. 	sortorder: "asc",

    288. 

  288. 	usepager: true,

    289. 

  289. 	title: 'Countries',

    290. 

  290. 	useRp: true,

    291. 

  291. 	rp: 15,

    292. 

  292. 	showTableToggleBtn: true,

    293. 

  293. 	width: 700,

    294. 

  294. 	height: 200

    295. 

  295. });   

    296. 

  296. </pre>

    297. 

  297. 	</div>

    298. 

  298. 	<table class="flexme3" style="display: none"></table>

    299. 

  299. 

    300. 

  300. 	<script type="text/javascript">

    301. 

  301. 		$('.flexme1').flexigrid();

    302. 

  302. 		$('.flexme2').flexigrid({

    303. 

  303. 			height : 'auto',

    304. 

  304. 			striped : false

    305. 

  305. 		});

    306. 

  306. 

    307. 

  307. 		$(".flexme3").flexigrid({

    308. 

  308. 			url : 'post-xml.php',

    309. 

  309. 			dataType : 'xml',

    310. 

  310. 			colModel : [ {

    311. 

  311. 				display : 'ISO',

    312. 

  312. 				name : 'iso',

    313. 

  313. 				width : 40,

    314. 

  314. 				sortable : true,

    315. 

  315. 				align : 'center'

    316. 

  316. 			}, {

    317. 

  317. 				display : 'Name',

    318. 

  318. 				name : 'name',

    319. 

  319. 				width : 180,

    320. 

  320. 				sortable : true,

    321. 

  321. 				align : 'left'

    322. 

  322. 			}, {

    323. 

  323. 				display : 'Printable Name',

    324. 

  324. 				name : 'printable_name',

    325. 

  325. 				width : 120,

    326. 

  326. 				sortable : true,

    327. 

  327. 				align : 'left'

    328. 

  328. 			}, {

    329. 

  329. 				display : 'ISO3',

    330. 

  330. 				name : 'iso3',

    331. 

  331. 				width : 130,

    332. 

  332. 				sortable : true,

    333. 

  333. 				align : 'left',

    334. 

  334. 				hide : true

    335. 

  335. 			}, {

    336. 

  336. 				display : 'Number Code',

    337. 

  337. 				name : 'numcode',

    338. 

  338. 				width : 80,

    339. 

  339. 				sortable : true,

    340. 

  340. 				align : 'right'

    341. 

  341. 			} ],

    342. 

  342. 			buttons : [ {

    343. 

  343. 				name : 'Add',

    344. 

  344. 				bclass : 'add',

    345. 

  345. 				onpress : test

    346. 

  346. 			}, {

    347. 

  347. 				name : 'Delete',

    348. 

  348. 				bclass : 'delete',

    349. 

  349. 				onpress : test

    350. 

  350. 			}, {

    351. 

  351. 				separator : true

    352. 

  352. 			} ],

    353. 

  353. 			searchitems : [ {

    354. 

  354. 				display : 'ISO',

    355. 

  355. 				name : 'iso'

    356. 

  356. 			}, {

    357. 

  357. 				display : 'Name',

    358. 

  358. 				name : 'name',

    359. 

  359. 				isdefault : true

    360. 

  360. 			} ],

    361. 

  361. 			sortname : "iso",

    362. 

  362. 			sortorder : "asc",

    363. 

  363. 			usepager : true,

    364. 

  364. 			title : 'Countries',

    365. 

  365. 			useRp : true,

    366. 

  366. 			rp : 15,

    367. 

  367. 			showTableToggleBtn : true,

    368. 

  368. 			width : 700,

    369. 

  369. 			height : 200

    370. 

  370. 		});

    371. 

  371. 

    372. 

  372. 		function test(com, grid) {

    373. 

  373. 			if (com == 'Delete') {

    374. 

  374. 				confirm('Delete ' + $('.trSelected', grid).length + ' items?')

    375. 

  375. 			} else if (com == 'Add') {

    376. 

  376. 				alert('Add New Item');

    377. 

  377. 			}

    378. 

  378. 		}

    379. 

  379. 	</script>

    380. 

  380. </body>

    381. 

  381. </html>
    382.