Skip to content

Commit ba8defa

Browse files
wenzhixinwenzhixin
committed
Add custom view example
1 parent cdbdbf8 commit ba8defa

File tree

2 files changed

+221
-0
lines changed

2 files changed

+221
-0
lines changed

‎extensions/custom-view.html

Lines changed: 220 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,220 @@
1+
<script>
2+
init({
3+
title: 'Custom View',
4+
desc: 'Use Plugin: bootstrap-table-custom-view adds the ability to create a custom view to display the data.',
5+
links: [
6+
'bootstrap-table.min.css'
7+
],
8+
scripts: [
9+
'bootstrap-table.min.js',
10+
'extensions/custom-view/bootstrap-table-custom-view.js'
11+
]
12+
})
13+
</script>
14+
15+
<table
16+
id="table"
17+
data-search="true"
18+
data-pagination="true"
19+
data-page-size="6"
20+
data-show-custom-view="true"
21+
data-custom-view="customViewFormatter"
22+
data-show-custom-view-button="true">
23+
<thead>
24+
<tr>
25+
<th data-field="name">Name</th>
26+
<th data-field="follower">Follower</th>
27+
<th data-field="following">Following</th>
28+
<th data-field="snippets">Snippets</th>
29+
</tr>
30+
</thead>
31+
</table>
32+
33+
<template id="profileTemplate">
34+
<div class="col-4 mt-3">
35+
<div class="card">
36+
<div class="card-body">
37+
<div class="row">
38+
<div class="col-12 col-lg-8 col-md-6">
39+
<h3 class="mb-0 text-truncated">%NAME%</h3>
40+
<p class="lead">Web / UI Designer</p>
41+
<p>
42+
I love to read, hang out with friends, watch football, listen to music, and learn new things.
43+
</p>
44+
<p>
45+
<span class="badge badge-info tags">html5</span>
46+
<span class="badge badge-info tags">css3</span>
47+
<span class="badge badge-info tags">nodejs</span>
48+
</p>
49+
</div>
50+
<div class="col-12 col-lg-4 col-md-6 text-center">
51+
<img src="%IMAGE%" alt="" class="mx-auto rounded-circle img-fluid" style="height: 120px;">
52+
<br>
53+
<ul class="list-inline ratings text-center" title="Ratings">
54+
<li class="list-inline-item"><a href="#"><span class="fa fa-star"></span></a>
55+
</li>
56+
<li class="list-inline-item"><a href="#"><span class="fa fa-star"></span></a>
57+
</li>
58+
<li class="list-inline-item"><a href="#"><span class="fa fa-star"></span></a>
59+
</li>
60+
<li class="list-inline-item"><a href="#"><span class="fa fa-star"></span></a>
61+
</li>
62+
<li class="list-inline-item"><a href="#"><span class="fa fa-star"></span></a>
63+
</li>
64+
</ul>
65+
</div>
66+
<div class="col-12 col-lg-4">
67+
<h3 class="mb-0">%FOLLOWER%</h3>
68+
<small>Followers</small>
69+
<button class="btn btn-block btn-outline-success" title="Follow"><span class="fa fa-plus-circle"></span></button>
70+
</div>
71+
<div class="col-12 col-lg-4">
72+
<h3 class="mb-0">%FOLLOWING%</h3>
73+
<small>Following</small>
74+
<button class="btn btn-outline-info btn-block" title="View Profile"><span class="fa fa-user"></span></button>
75+
</div>
76+
<div class="col-12 col-lg-4">
77+
<h3 class="mb-0">%SNIPPETS%</h3>
78+
<small>Snippets</small>
79+
<button type="button" class="btn btn-outline-primary btn-block" title="Options"><span class="fa fa-cog"></span></button>
80+
</div>
81+
</div>
82+
</div>
83+
</div>
84+
</div>
85+
</template>
86+
87+
<script>
88+
function mounted() {
89+
$('#table').bootstrapTable({
90+
data: [
91+
{
92+
'name': 'Mike',
93+
'image': 'https://robohash.org/68.186.255.198.png',
94+
'follower': 10,
95+
'following': 123,
96+
'snippets': 12
97+
},
98+
{
99+
'name': 'Tim',
100+
'image': 'https://robohash.org/18.146.255.198.png',
101+
'follower': 70,
102+
'following': 23,
103+
'snippets': 42
104+
},
105+
{
106+
'name': 'Jorge',
107+
'image': 'https://robohash.org/63.186.255.198.png',
108+
'follower': 40,
109+
'following': 74,
110+
'snippets': 567
111+
},
112+
{
113+
'name': 'Luke',
114+
'image': 'https://robohash.org/68.186.155.198.png',
115+
'follower': 550,
116+
'following': 23,
117+
'snippets': 52
118+
},
119+
{
120+
'name': 'Mike',
121+
'image': 'https://robohash.org/68.186.255.198.png',
122+
'follower': 10,
123+
'following': 123,
124+
'snippets': 12
125+
},
126+
{
127+
'name': 'Tim',
128+
'image': 'https://robohash.org/18.146.255.198.png',
129+
'follower': 70,
130+
'following': 23,
131+
'snippets': 42
132+
},
133+
{
134+
'name': 'Jorge',
135+
'image': 'https://robohash.org/63.186.255.198.png',
136+
'follower': 40,
137+
'following': 74,
138+
'snippets': 567
139+
},
140+
{
141+
'name': 'Luke',
142+
'image': 'https://robohash.org/68.186.155.198.png',
143+
'follower': 550,
144+
'following': 23,
145+
'snippets': 52
146+
},
147+
{
148+
'name': 'Mike',
149+
'image': 'https://robohash.org/68.186.255.198.png',
150+
'follower': 10,
151+
'following': 123,
152+
'snippets': 12
153+
},
154+
{
155+
'name': 'Tim',
156+
'image': 'https://robohash.org/18.146.255.198.png',
157+
'follower': 70,
158+
'following': 23,
159+
'snippets': 42
160+
},
161+
{
162+
'name': 'Jorge',
163+
'image': 'https://robohash.org/63.186.255.198.png',
164+
'follower': 40,
165+
'following': 74,
166+
'snippets': 567
167+
},
168+
{
169+
'name': 'Luke',
170+
'image': 'https://robohash.org/68.186.155.198.png',
171+
'follower': 550,
172+
'following': 23,
173+
'snippets': 52
174+
},
175+
{
176+
'name': 'Mike',
177+
'image': 'https://robohash.org/68.186.255.198.png',
178+
'follower': 10,
179+
'following': 123,
180+
'snippets': 12
181+
},
182+
{
183+
'name': 'Tim',
184+
'image': 'https://robohash.org/18.146.255.198.png',
185+
'follower': 70,
186+
'following': 23,
187+
'snippets': 42
188+
},
189+
{
190+
'name': 'Jorge',
191+
'image': 'https://robohash.org/63.186.255.198.png',
192+
'follower': 40,
193+
'following': 74,
194+
'snippets': 567
195+
},
196+
{
197+
'name': 'Luke',
198+
'image': 'https://robohash.org/68.186.155.198.png',
199+
'follower': 550,
200+
'following': 23,
201+
'snippets': 52
202+
}
203+
]
204+
})
205+
}
206+
207+
function customViewFormatter (data) {
208+
var template = $('#profileTemplate').html()
209+
var view = ''
210+
$.each(data, function (i, row) {
211+
view += template.replace('%NAME%', row.name)
212+
.replace('%IMAGE%', row.image)
213+
.replace('%FOLLOWER%', row.follower)
214+
.replace('%FOLLOWING%', row.following)
215+
.replace('%SNIPPETS%', row.snippets);
216+
})
217+
218+
return `<div class="row mx-0">${view}</div>`
219+
}
220+
</script>

‎index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -350,6 +350,7 @@
350350
<li><a href="#extensions/auto-refresh.html">Auto Refresh</a></li>
351351
<li><a href="#extensions/cookie.html">Cookie</a></li>
352352
<li><a href="#extensions/copy-rows.html">Copy Rows</a></li>
353+
<li><a href="#extensions/custom-view.html">Custom View</a></li>
353354
<li><a href="#extensions/defer-url.html">Defer Url</a></li>
354355
<li data-show="bootstrap3"><a href="#extensions/editable.html">Editable</a></li>
355356
<li><a href="#extensions/export.html">Export</a></li>

0 commit comments

Comments
 (0)