-
Notifications
You must be signed in to change notification settings - Fork 45
/
index.html
311 lines (281 loc) · 13.1 KB
/
index.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
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
<!DOCTYPE html>
<html lang="en" class="js">
<head>
<meta charset="utf-8">
<title>jQuery.bsgrid - 简单实用、功能丰富、易扩展的jQuery Grid插件</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="plugins/responsive-nav.js/demo/styles.css">
<style type="text/css">
h2 {
margin: 0 0 .5em;
}
h1, h2, h3, a, #title {
color: #555;
}
.main {
width: 88%;
padding: 1.5em 2em;
}
.nav-collapse {
width: 12%;
}
.nav-collapse a {
padding: .6em .6em .6em 1.6em;
}
/* 修改左侧导航栏宽度 */
@media screen and (min-width:76em) {
.nav-collapse {
width: 8em;
}
.main {
left: 8em;
}
}
#iframe {
display: none;
width: 100%;
height: 95%;
border: dotted 1px #ccc;
}
.introStyle {
font-size: 1.0em;
font-weight: 700;
}
.introStyle td {
padding: 0.3em;
}
.introStyle a {
text-decoration: underline;
}
#about {
line-height: 1.5em;
}
</style>
<script src="plugins/jquery-1.4.4.min.js"></script>
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="plugins/html5shiv/html5shiv.min.js"></script>
<![endif]-->
<script src="plugins/responsive-nav.js/responsive-nav.min.js"></script>
</head>
<body>
<div role="navigation" id="nav">
<ul>
<li class="active"><a href="#" onclick="home()">首页</a></li>
<li><a href="examples/zh-CN.html" target="_blank">示例</a></li>
<li><a href="#" onclick="setIframeSrc('文档', 'documention/documention.zh-CN.html')">文档</a></li>
<li id="nav_documention"><a href="#" onclick="setIframeSrc('皮肤', 'documention/themes.html')">皮肤</a></li>
<li><a href="#" onclick="down()">下载</a></li>
<li><a href="#" onclick="setIframeSrc('源码', 'documention/source.html')">源码</a></li>
<li><a href="#" onclick="setIframeSrc('反馈', 'documention/feedback.html')">反馈</a></li>
<li id="nav_donate"><a href="#" onclick="setIframeSrc('支持长远发展，感谢您的认可！', 'donate.html')">捐助</a></li>
<li><a href="#" onclick="about()">关于我</a></li>
</ul>
</div>
<div role="main" class="main">
<a href="#nav" id="toggle">Menu</a>
<h1 class="home">jQuery.bsgrid</h1>
<div class="introStyle home" style="font-size: 1.2em;">
  支持json、xml数据格式，皮肤丰富并且容易定制，支持表格编辑、本地数据、导出参数构建等实用便捷的功能，容易扩展，更拥有丰富的示例以及问题反馈的及时响应。
</div>
<table class="introStyle home" style="margin-top: 0.5em; font-weight: 400;">
<tr>
<td>
协议：<a href="http://www.apache.org/licenses/LICENSE-2.0.txt" target="_blank"
style="text-decoration: none;">Apache Licence 2</a>
</td>
<td>
依赖：jQuery 1.4.4 ~~ jQuery 1.12.2
</td>
<td>
支持：IE6+、Chrome、Firefox等
</td>
</tr>
<tr>
<td>
QQ群交流：254754154
</td>
<td colspan="2">
捐助：<a href="#" onclick="$('#nav_donate a').trigger('click')">支持长远发展，感谢您的认可！</a>
</td>
</tr>
</table>
<div class="introStyle home" style="padding-left: 0.4em; font-weight: 400; line-height: 1.6em;">
<h3 style="font-size: 1.2em; margin-bottom: 0.4em;">插件特点</h3>
1. 简单、轻量，基于jQuery及HTML Table，<a href="examples/zh-CN.html#href=examples/grid/simple.html" target="_blank">简单的表格</a>只需数十行代码，支持<a href="examples/zh-CN.html#href=examples/grid/load-time-test.html" target="_blank">大数据量表格</a>；
<br/>
2. 内置<a href="#" onclick="$('#nav_documention a').trigger('click')">多套经典皮肤</a>，且非常容易<a href="examples/zh-CN.html#href=examples/grid/themes/custom.html" target="_blank">定制</a>，字体定制只需要修改两处CSS代码即可；
<br/>
3. 实用便捷的功能：<a href="examples/zh-CN.html#href=examples/grid/edit.html" target="_blank">表格编辑</a>、
<a href="examples/zh-CN.html#href=examples/grid/foot.html" target="_blank">表底聚合</a>、
<a href="examples/zh-CN.html#href=examples/grid/no-pagation.html" target="_blank">不分页</a>、
<a href="examples/zh-CN.html#href=examples/grid/multi-header.html" target="_blank">多行表头</a>、
<a href="examples/zh-CN.html#href=examples/grid/multi-sort.html" target="_blank">多字段排序</a>、
<a href="examples/zh-CN.html#href=examples/grid/local/json.html" target="_blank">本地数据</a>、
<a href="examples/zh-CN.html#href=examples/grid/userdata.html" target="_blank">处理Userdata</a>、
<a href="examples/zh-CN.html#href=examples/grid/move-column-extend.html" target="_blank">拖动列宽</a>、
<a href="examples/zh-CN.html#href=examples/grid/fixed-header/fixed-header-extend.html" target="_blank">滚动表格数据</a>等；
<br/>
4. 易与其他插件集成使用，示例展示了集成<a href="examples/zh-CN.html#href=examples/layui/layer.html" target="_blank">Layui</a>、
<a href="examples/zh-CN.html#href=examples/artDialog/gridAndForm.html" target="_blank">ArtDialog</a>、
<a href="examples/zh-CN.html#href=examples/form/validation.html" target="_blank">jquery.validationEngine</a>、
第三方分页工具条等的使用；
<br/>
5. 扩展性好，插件有特别好的扩展性，易于对插件本身进行局部甚至较大的修改，易于改变展现样式；插件放开了属性及方法的全局修改权限，所有方法都可在外部进行全局重写，而无需修改插件本身的代码；
<br/>
6. 模块化JS、CSS代码，可按需加载，代码精致简洁，对于阅读、修改、扩展非常容易。
</div>
<div class="introStyle home" style="padding-left: 0.4em; font-weight: 400; line-height: 1.6em;">
<h3 style="font-size: 1.2em; margin-bottom: 0;">引用文件</h3>
引用文件：builds/merged/bsgrid.all.min.css    CSS样式(包含默认皮肤样式)
<br/>    
builds/js/lang/grid.zh-CN.min.js    JS本地化脚本(builds/js/lang/grid.*.min.js)
<br/>    
builds/merged/bsgrid.all.min.js    JS脚本
<br/>
可选皮肤：builds/css/skins/grid_*.min.css    CSS皮肤(需引用于bsgrid.all.min.css之后)
<br/>
图标资源：builds/images/
<br/>
其他说明：builds目录下未列出的文件无需引入项目中
<h3 style="font-size: 1.2em; margin-bottom: 0;"><a href="examples/zh-CN.html#href=examples/grid/simple.html" target="_blank" style="text-decoration: none;">入门示例</a></h3>
<a href="examples/zh-CN.html#href=examples/grid/simple.html" target="_blank" style="margin-left: -0.4em;">
<img style="border-width: 0; width: 88%;" title="点击查看入门示例"
src="documention/images/simple.png"/>
</a>
<pre style="font-size: 0.9em; margin-top: 0; background-color: #eee;">
引用文件：
<link rel="stylesheet" href="../../builds/merged/bsgrid.all.min.css"/>
<script type="text/javascript" src="../../plugins/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../builds/js/lang/grid.zh-CN.min.js"></script>
<script type="text/javascript" src="../../builds/merged/bsgrid.all.min.js"></script>
实现代码：
<table id="searchTable">
<tr>
<th w_index="XH" width="5%;">XH</th>
<th w_index="ID" width="5%;">ID</th>
<th w_index="CHAR" w_align="left" width="15%;">CHAR</th>
<th w_index="TEXT" w_align="left" width="30%;">TEXT</th>
<th w_index="DATE" width="15%;">DATE</th>
<th w_index="TIME" width="15%;">TIME</th>
<th w_index="NUM" width="5%;">NUM</th>
<th w_render="operate" width="10%;">Operate</th>
</tr>
</table>
<script type="text/javascript">
var gridObj;
$(function () {
gridObj = $.fn.bsgrid.init('searchTable', {
url: 'data/json.jsp',
// autoLoad: false,
pageSizeSelect: true,
pageSize: 10
});
});
function operate(record, rowIndex, colIndex, options) {
return '<a href="#" onclick="alert(\'ID=' + gridObj.getRecordIndexValue(record, 'ID') + '\');">Operate</a>';
}
</script>
数据格式参考：<a href="examples/grid/data/simple.json" target="_blank">simple.json</a>
</pre>
<h3 style="font-size: 1.2em; margin-bottom: 0;">带参数查询</h3>
<pre style="font-size: 0.9em; margin-top: 0; background-color: #eee;">
function doSearch() {
// 提供以下三种带参数方式，可任选其中任意一种
var searchParames = $('#searchForm').serializeArray(); // jQuery推荐方式
// searchParames = 'param1=val1&param2=val2';
// searchParames = {'param1': 'val1', 'param2': 'val2'};
gridObj.search(searchParames);
}
示例：<a href="examples/grid/search.html" target="_blank">带参数查询表格</a>
</pre>
</div>
<h2 id="title" style="display: none;"></h2>
<iframe id="iframe" src=""></iframe>
<table id="download" class="introStyle" style="display: none;">
<tr>
<td>版本下载：</td>
<td>
<a href="https://github.com/baishui2004/jquery.bsgrid/archive/v1.37.zip"
target="_blank">1.37</a>
 
<a href="https://github.com/baishui2004/jquery.bsgrid/archive/v1.36.zip"
target="_blank">1.36</a>
</td>
</tr>
<tr>
<td>更新说明：</td>
<td>
<a href="http://git.oschina.net/bs2004/jquery.bsgrid/raw/master/CHANGE-LOG" target="_blank">Change
log</a>
</td>
</tr>
</table>
<table id="about" class="introStyle" style="display: none;">
<tr>
<td>个人网站:</td>
<td><a href="http://thebestofyouth.com" target="_blank">http://thebestofyouth.com</a></td>
</tr>
<tr>
<td>电子邮箱:</td>
<td>bs2004@163.com</td>
</tr>
<tr>
<td>GitHub:</td>
<td><a href="http://github.com/baishui2004" target="_blank">http://github.com/baishui2004</a></td>
</tr>
<tr>
<td>Git@OSC:</td>
<td><a href="http://git.oschina.net/bs2004" target="_blank">http://git.oschina.net/bs2004</a></td>
</tr>
<tr>
<td>OSChina:</td>
<td><a href="http://oschina.net/baishui2004" target="_blank">http://oschina.net/baishui2004</a></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="2">@ 江苏·苏州</td>
</tr>
</table>
</div>
<script>
var navigation = responsiveNav("#nav", {customToggle: "#toggle"});
$(function () {
$('#nav ul li').click(function () {
$('#nav ul li.active').removeClass('active');
$(this).addClass('active');
});
});
function home() {
hideAll();
$('.home').show();
}
function setIframeSrc(title, url) {
hideAll();
$('#title').html(title).show();
$('#iframe').attr('src', url).show();
}
function down() {
hideAll();
$('#title').html('下载').show();
$('#download').show();
}
function about() {
hideAll();
$('#title').html('关于我').show();
$('#about').show();
}
function hideAll() {
$('.home').hide();
$('#title').hide();
$('#examples').hide();
$('#download').hide();
$('#about').hide();
$('#iframe').hide().attr('src', '');
}
</script>
</body>
</html>