init
This commit is contained in:
parent
06f61d8ce8
commit
f301cb744d
2271 changed files with 103162 additions and 0 deletions
1
02-ui/05-widgets/04-template-lodash/01-table-template/solution/.plnkr
Executable file
1
02-ui/05-widgets/04-template-lodash/01-table-template/solution/.plnkr
Executable file
|
@ -0,0 +1 @@
|
|||
{"name":"template-grid","plunk":"WCgkmKdOqsXrrzszbUUJ"}
|
57
02-ui/05-widgets/04-template-lodash/01-table-template/solution/index.html
Executable file
57
02-ui/05-widgets/04-template-lodash/01-table-template/solution/index.html
Executable file
|
@ -0,0 +1,57 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="http://code.jquery.com/jquery.min.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
|
||||
<style>
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
td {
|
||||
border: 1px solid gray;
|
||||
padding: 2px 5px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="grid-holder"></div>
|
||||
|
||||
<script type="text/template" id="grid-template">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Имя</th><th>Возраст</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<% for(var i=0; i<list.length; i++) { %>
|
||||
<tr><td><%=list[i].name%></td><td><%=list[i].age%></td></tr>
|
||||
<% } %>
|
||||
</tbody>
|
||||
</table>
|
||||
</script>
|
||||
|
||||
<script>
|
||||
|
||||
var users = [
|
||||
{name: "Вася", age: 10},
|
||||
{name: "Петя", age: 15},
|
||||
{name: "Женя", age: 20},
|
||||
{name: "Маша", age: 25},
|
||||
{name: "Даша", age: 30}
|
||||
];
|
||||
|
||||
$('#grid-holder').html(
|
||||
_.template( $('#grid-template').html().trim(), {list: users})
|
||||
);
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1 @@
|
|||
{"name":"template-grid","plunk":"WCgkmKdOqsXrrzszbUUJ"}
|
|
@ -0,0 +1,57 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="http://code.jquery.com/jquery.min.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
|
||||
<style>
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
td {
|
||||
border: 1px solid gray;
|
||||
padding: 2px 5px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="grid-holder"></div>
|
||||
|
||||
<script type="text/template" id="grid-template">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Имя</th><th>Возраст</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<% for(var i=0; i<list.length; i++) { %>
|
||||
<tr><td><%=list[i].name%></td><td><%=list[i].age%></td></tr>
|
||||
<% } %>
|
||||
</tbody>
|
||||
</table>
|
||||
</script>
|
||||
|
||||
<script>
|
||||
|
||||
var users = [
|
||||
{name: "Вася", age: 10},
|
||||
{name: "Петя", age: 15},
|
||||
{name: "Женя", age: 20},
|
||||
{name: "Маша", age: 25},
|
||||
{name: "Даша", age: 30}
|
||||
];
|
||||
|
||||
$('#grid-holder').html(
|
||||
_.template( $('#grid-template').html().trim(), {list: users})
|
||||
);
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
Loading…
Add table
Add a link
Reference in a new issue