DOMHelper/dynamictable.html at master · cefolger/DOMHelper · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="style.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
  <script src="lib/DOMHelper.js"></script>
  <script src="lib/extensions.js"></script>
  <script src="lib/DOMHelper.js"></script>

  <script>
    $(document).ready(function() {
        var $basic = $("*[data-example='basic']");
        var $adhoctable = $("*[data-example='adhoctable']");

        DOMHelper.cachedLoad($basic, 'examples/dynamictable.html', function() {
            var ob = [{
               	   'firstname': 'this is field 1',
                   'lastname': 'this is field 2',
                   'color': 'red'
                },
                {
               	'firstname': 'another row',
               	'lastname': 'still another row',
               	'color': 'green'
                }];

            var columns = [{
				            	'header': 'firstname',
				            },
				            {
				            	'header': 'lastname'
				            },
				            {
				            	'header': 'testing'
				            },
				            {
				            	'header': 'hello'
				            },
				            {
				            	'header': 'goodbye'
				            }];

            		/* generate th */
            DOMHelper.generate('*[data-role="generate-column"]')
            		 .using($basic, columns, ['header'])
            		 /* generate row template */
            		 .generate('*[data-role="generate-row-column"]')
		             .using($basic,columns, ['header'], function(element, value, object) {
		            	element.addClass(value);
		             })
		             /* generate each row */
		             .generate('*[data-role="generate-row"]')
		             .using($basic, ob, ['firstname', 'lastname', 'color'], function(element, value, object) {
	            	 	element.css({'color': object.color});
	             	  });
        });
    });
  </script>
</head>
<body>

<header><h1>DOM Helper</h1></header>

<article>
    <section data-example="basic"></section>
    <section data-example="adhoctable"></section>

</article>

</body>
</html>