-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathdemo.html
166 lines (161 loc) · 12.5 KB
/
demo.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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery.js"></script>
<title>Knockout Table</title>
</head>
<body>
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><img style="margin-top:-8px" src="images/oracle.png"></a>
</div>
<div class="navbar-left">
<div style="position:absolute;bottom:1px">
<h4>Custom development</h4>
</div>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="index.html">Demo</a></li>
<li class="active"><a href="demo.html">Docs</a></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<h4>This page is under active development</h4>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<h1 id="kockout-table">Kockout Table</h1>
<p>This plugin provides a powerful yet easy implementation of tables using knockout by providing a custom component</p>
<pre><code class="lang-sh hljs lasso"><span class="hljs-subst"><</span>ko<span class="hljs-attribute">-table</span> <span class="hljs-keyword">params</span><span class="hljs-subst">=</span><span class="hljs-string">"list: people, options: {}"</span><span class="hljs-subst">><</span>/ko<span class="hljs-attribute">-table</span><span class="hljs-subst">></span>
</code></pre>
<h2 id="features">Features</h2>
<ul>
<li>Provide table data from your viewModel (ObservableArray)</li>
<li>Lazy load data for each page</li>
<li>Choose any number of keys from the objects on your array.</li>
<li>Reordering of columns</li>
<li>Specify column widths and headers</li>
<li>Filter columns</li>
<li>Custom css classes for tables and rows so that you can customize according to your CSS framework</li>
<li>Pagination</li>
<li>AMD (Require.js) compatible</li>
</ul>
<h2 id="installation">Installation</h2>
<p>Lazy Loading feature requires Jquery to be loaded prior to the ko.table</p>
<h4 id="option-1">Option 1</h4>
<pre><code class="lang-sh hljs xml"><span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"js/jquery.js"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span> <span class="hljs-comment"><!-- if LazyLoading is required --></span>
<span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"js/knockout.js"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
<span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"js/knockout.table.min.js"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
</code></pre>
<h4 id="option-2">Option 2</h4>
<p>In your requirejs config, include plugin in path</p>
<pre><code class="lang-sh hljs r">requirejs.config({
paths:{
knockout: <span class="hljs-string">'js/lib/knockout.min'</span>,
kotable: <span class="hljs-string">'js/lib/knockout.table.min'</span>,
jquery: <span class="hljs-string">'js/lib/jquery.js'</span>
<span class="hljs-keyword">...</span>
}
});
</code></pre>
<p>While defining your app.js</p>
<pre><code class="lang-sh hljs actionscript">define([<span class="hljs-string">'jquery'</span>,<span class="hljs-string">'knockout'</span>,<span class="hljs-string">'kotable'</span>,<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">($,ko)</span>{</span>
<span class="hljs-comment">/* Your app code */</span>
}])
</code></pre>
<h2 id="how-to-use">How to Use</h2>
<pre><code class="lang-sh hljs lasso"><span class="hljs-subst"><</span>ko<span class="hljs-attribute">-table</span> <span class="hljs-keyword">params</span><span class="hljs-subst">=</span><span class="hljs-string">"list: persons, options: VMoptions"</span><span class="hljs-subst">></span> <span class="hljs-subst"><</span>/ko<span class="hljs-attribute">-table</span><span class="hljs-subst">></span>
</code></pre>
<p><ko-table> component takes two arguments. An observable array on your view model to populate the table and an 'options' object on your view model to customize the table.</ko-table></p>
<pre><code class="lang-sh hljs coffeescript"><span class="hljs-reserved">var</span> viewModel = <span class="hljs-reserved">function</span>(){
<span class="hljs-keyword">this</span>.VMoptions = {
<span class="hljs-attribute">tableClass</span>:<span class="hljs-string">'table table-striped'</span>, <span class="hljs-regexp">//</span>Optional. Specifies <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">for</span> <<span class="hljs-title">table</span>> <span class="hljs-title">tag</span></span>
<span class="hljs-attribute">pageRecords</span>: <span class="hljs-number">5</span>, <span class="hljs-regexp">//</span>Optional. Number <span class="hljs-keyword">of</span> records per page.
<span class="hljs-attribute">columns</span>:[ <span class="hljs-regexp">//</span>Optional.If <span class="hljs-keyword">not</span> specfied all keys <span class="hljs-keyword">in</span> your data will appear <span class="hljs-literal">on</span> table.
{
<span class="hljs-attribute">key</span>:<span class="hljs-string">'name'</span>, <span class="hljs-regexp">//</span>Required <span class="hljs-keyword">if</span> columns <span class="hljs-keyword">is</span> specified.
<span class="hljs-attribute">name</span>:<span class="hljs-string">'Name'</span>, <span class="hljs-regexp">//</span>Optional.This specifies table column header. If <span class="hljs-keyword">not</span> given,key becomes header
<span class="hljs-attribute">filter</span>:<span class="hljs-literal">true</span> <span class="hljs-regexp">//</span>Optional. <span class="hljs-literal">false</span> <span class="hljs-keyword">if</span> <span class="hljs-keyword">not</span> specified.
},
{
<span class="hljs-attribute">key</span>:<span class="hljs-string">'address'</span> <span class="hljs-regexp">//</span> <span class="hljs-attribute">key</span>:<span class="hljs-string">'address'</span>, <span class="hljs-attribute">name</span>:<span class="hljs-string">'address'</span>, <span class="hljs-attribute">filter</span>:<span class="hljs-literal">false</span>
}
]
};
<span class="hljs-keyword">this</span>.persons = ko.observableArray([
{ <span class="hljs-attribute">name</span>:<span class="hljs-string">'Bob'</span>, <span class="hljs-attribute">address</span>: <span class="hljs-string">'New Delhi'</span>, <span class="hljs-attribute">dob</span>:<span class="hljs-string">'14-03-1993'</span>},
{ <span class="hljs-attribute">name</span>: <span class="hljs-string">'Harry'</span>, address : <span class="hljs-string">'Mumbai'</span>, <span class="hljs-attribute">dob</span>:<span class="hljs-string">'10-07-1990'</span>}
]);
}
ko.applyBindings(<span class="hljs-keyword">new</span> viewModel());
</code></pre>
<h3 id="lazy-load-data">Lazy Load data</h3>
<p>Lazy loading requires user to define afunction on his viewModel which takes page number and Records per page as two arguments and returns a promise. In the background, this plugin fetches 3 pages ahead of the current page in order to improve performance.</p>
<pre><code class="lang-sh hljs lasso"><span class="hljs-subst"><</span>ko<span class="hljs-attribute">-table</span> <span class="hljs-keyword">params</span><span class="hljs-subst">=</span><span class="hljs-string">"list: getPage, options: VMoptions"</span><span class="hljs-subst">></span> <span class="hljs-subst"><</span>/ko<span class="hljs-attribute">-table</span><span class="hljs-subst">></span>
</code></pre>
<pre><code class="lang-sh hljs coffeescript"><span class="hljs-reserved">var</span> viewModel = <span class="hljs-reserved">function</span>(){
<span class="hljs-keyword">this</span>.VMoptions = {
<span class="hljs-attribute">tableClass</span>:<span class="hljs-string">'table table-striped'</span>, <span class="hljs-regexp">//</span>Optional. Specifies <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">for</span> <<span class="hljs-title">table</span>> <span class="hljs-title">tag</span></span>
<span class="hljs-attribute">pageRecords</span>: <span class="hljs-number">5</span>, <span class="hljs-regexp">//</span>Optional. Number <span class="hljs-keyword">of</span> records per page.
<span class="hljs-attribute">columns</span>: [
{
<span class="hljs-attribute">key</span>: <span class="hljs-string">'id'</span>, <span class="hljs-regexp">//</span> take data from <span class="hljs-keyword">this</span> key <span class="hljs-keyword">in</span> your object array
<span class="hljs-attribute">name</span>: <span class="hljs-string">'ID'</span>, <span class="hljs-regexp">//</span>name to display <span class="hljs-literal">on</span> column header
<span class="hljs-attribute">filter</span>: <span class="hljs-literal">true</span>, <span class="hljs-regexp">//</span><span class="hljs-literal">true</span> <span class="hljs-keyword">or</span> <span class="hljs-literal">false</span>. <span class="hljs-keyword">if</span> <span class="hljs-keyword">not</span> specified <span class="hljs-attribute">default</span>:<span class="hljs-literal">false</span>
<span class="hljs-attribute">width</span>: <span class="hljs-string">''</span> <span class="hljs-regexp">//</span>optional col width <span class="hljs-keyword">in</span> px <span class="hljs-keyword">or</span> perc
},
{
<span class="hljs-attribute">key</span>: <span class="hljs-string">'email'</span>,
<span class="hljs-attribute">name</span>: <span class="hljs-string">'E-Mail'</span>,
<span class="hljs-attribute">filter</span>: <span class="hljs-literal">true</span>
}
]
};
<span class="hljs-keyword">this</span>.getPage = <span class="hljs-reserved">function</span>(pageNo,records){
<span class="hljs-keyword">return</span> $.getJSON(<span class="hljs-string">'http://nameless-sun-2869.getsandbox.com/sidemenu?pageNo='</span>+pageNo+<span class="hljs-string">'&records='</span>+records);
};
}
ko.applyBindings(<span class="hljs-keyword">new</span> viewModel());
</code></pre>
<h2 id="todos">Todos</h2>
<ul>
<li>Write Tests</li>
<li>Add sort option</li>
<li>Render HTML content in cell</li>
<li>Serial number column as option</li>
<li>Change page using PageUp/PageDown</li>
</ul>
<h2 id="development">Development</h2>
<p>Want to contribute?</p>
<p>Knockout Table uses Gulp for quicker development.</p>
<p>Open your favorite Terminal and run these commands.</p>
<pre><code class="lang-sh hljs smalltalk"><span class="hljs-char">$ </span>git clone <to be done>
<span class="hljs-char">$ </span>npm install
</code></pre>
<p>Make changes,add features and build by running</p>
<pre><code class="lang-sh hljs smalltalk"><span class="hljs-char">$ </span>gulp
</code></pre>
</div>
</div>
</div>
</div>
</body>
</html>