-
Notifications
You must be signed in to change notification settings - Fork 422
/
example-dynamic-with-jquery-tabs.html
133 lines (120 loc) · 3.98 KB
/
example-dynamic-with-jquery-tabs.html
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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="shortcut icon" type="image/ico" href="favicon.ico" />
<title>SlickGrid example: jQuery tabs with a dynamic grid in each pane</title>
<link rel="stylesheet" href="../dist/styles/css/slick.grid.css" type="text/css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/smoothness/jquery-ui.min.css" />
<link rel="stylesheet" href="examples.css" type="text/css"/>
<style>
.my-grid {
background: white;
outline: 0;
border: 1px solid gray;
}
</style>
</head>
<body>
<table width="100%">
<tr>
<td valign="top" width="50%">
<button id='add-tab'>Add tab</button>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Grid 1</a></li>
</ul>
<div id="tabs-1">
<strong><i>This tab is the original</i></strong>
<div id="myGrid1" style="width:600px;height:300px;" class="my-grid"></div>
</div>
</div>
</td>
<td valign="top">
<h2>
<a href="/examples/index.html" style="text-decoration: none; font-size: 22px">⌂</a>
Demonstrates:
</h2>
<ul>
<li>jQuery tabs containing a grid in each pane</li>
</ul>
<h2>View Source:</h2>
<ul>
<li><A href="https://github.com/6pac/SlickGrid/blob/master/examples/example-dynamic-with-jquery-tabs.html" target="_sourcewindow"> View the source for this example on Github</a></li>
</ul>
</td>
</tr>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sortablejs/Sortable.min.js"></script>
<script src="../dist/browser/slick.core.js"></script>
<script src="../dist/browser/slick.interactions.js"></script>
<script src="../dist/browser/slick.grid.js"></script>
<script>
var gridArray;
function CreateColumns() {
var columns = [
{id: "title", name: "Title", field: "title"},
{id: "duration", name: "Duration", field: "duration"},
{id: "%", name: "% Complete", field: "percentComplete"},
{id: "start", name: "Start", field: "start"},
{id: "finish", name: "Finish", field: "finish"},
{id: "effort-driven", name: "Effort Driven", field: "effortDriven"},
{id: "title", name: "Title", field: "title"},
{id: "duration", name: "Duration", field: "duration"},
{id: "%", name: "% Complete", field: "percentComplete"},
{id: "start", name: "Start", field: "start"},
{id: "finish", name: "Finish", field: "finish"},
{id: "effort-driven", name: "Effort Driven", field: "effortDriven"}
];
return columns;
}
function CreateOptions() {
var options = {
enableCellNavigation: true,
enableColumnReorder: false
};
return options;
}
function CreateData() {
var data = [];
for (var i = 0; i < 500; i++) {
data[i] = {
title: "Task " + i,
duration: "5 days",
percentComplete: Math.round(Math.random() * 100),
start: "01/01/2009",
finish: "01/05/2009",
effortDriven: (i % 5 == 0)
};
}
return data;
}
function CreateGrid(elementId) {
if (!gridArray) { gridArray = []; }
var data = CreateData();
var grid = new Slick.Grid("#" + elementId, data, CreateColumns(), CreateOptions());
gridArray[length] = grid;
}
$(function () {
// take care of jqueryui tabs and adding tab
$( "div#tabs" ).tabs();
$("button#add-tab").click(function() {
var num_tabs = $("div#tabs ul li").length + 1;
$("div#tabs ul").append(
"<li><a href='#tab" + num_tabs + "'>Grid " + num_tabs + "</a></li>"
);
$("div#tabs").append(
"<div id='tab" + num_tabs + "'>"
+ '<div id="myGrid' + num_tabs + '" style="width:600px;height:300px;" class="my-grid"></div>'
+ "</div>"
);
CreateGrid("myGrid" + num_tabs);
$("div#tabs").tabs("refresh");
});
CreateGrid("myGrid1");
})
</script>
</body>
</html>