forked from baishui2004/jquery.bsgrid
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
157 lines (154 loc) · 7.78 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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>jquery.bsgrid - 一个简单易用的jQuery Grid插件</title>
<style type="text/css">
body {
font-size: 16px;
color: #555;
line-height: 24px;
background-color: white;
padding: 10px;
}
a {
font-size: 16px;
color: blue;
text-decoration: underline;
}
.tabImg {
width: 100%;
border-collapse: collapse;
}
.tabImg td {
font-size: 18px;
color: green;
border: solid 1px #aaa;
background-color: white;
padding: 0;
margin: 0;
text-align: center;
vertical-align: top;
}
.tabImg td img{
width: 100%;
border: solid 0 white;
}
</style>
</head>
<body>
<a style="font-size: 48px; color: green; text-decoration: none; font-weight: 400;" href="https://github.com/baishui2004/jquery.bsgrid" target="_blank">jquery.bsgrid</a>
 一个简单易用的jQuery Grid插件，支持json、xml数据格式，自带多套皮肤且易于扩展，支持分页或不分页，对扩展性友好，导出友好。
<div style="font-size: 15px;">
<br />
项目链接：<a href="https://github.com/baishui2004/jquery.bsgrid" target="_blank">源码主页</a>
  <a href="documention/README.md.html" target="_blank">在线文档</a>
  <a href="https://github.com/baishui2004/jquery.bsgrid/raw/master/documention/README.md.pdf" target="_blank">离线文档 ( PDF )</a>
<br />
在线演示：<a href="examples/en.html" target="_blank">示例导航1</a>
 <a href="examples/en-table.html" target="_blank">示例导航2</a>
 <a href="examples/grid/standard.html" target="_blank">方法及属性的使用演示与说明</a>
<br />
插件版本：<a href="https://github.com/baishui2004/jquery.bsgrid/tree/v1.30/" target="_blank">1.30</a>
 <a href="https://github.com/baishui2004/jquery.bsgrid/tree/v1.21/" target="_blank">1.21</a>
<br />
插件协议：<a href="http://www.apache.org/licenses/LICENSE-2.0.txt" target="_blank">Apache Licence 2</a>
<br />
交流QQ群：254754154
<br />
源码Github同步更新：<a href="https://github.com/baishui2004/jquery.bsgrid" target="_blank">https://github.com/baishui2004/jquery.bsgrid</a>
</div>
<br />
<h2>典型皮肤效果图示</h2>
<table class="tabImg">
<tr>
<td>ExtJS Gray Style
<br />
<a href="examples/grid/themes/gray.html" target="_blank">
<img title="ExtJS Gray Style - 点击图片查看示例页" src="https://github.com/baishui2004/jquery.bsgrid/raw/master/documention/images/jquery.bsgrid-skins01-ExtJS Gray Style.png" /></a>
</td>
<td>ExtJS Blue Style
<br />
<a href="examples/grid/themes/blue.html" target="_blank">
<img title="ExtJS Blue Style - 点击图片查看示例页" src="https://github.com/baishui2004/jquery.bsgrid/raw/master/documention/images/jquery.bsgrid-skins02-ExtJS Blue Style.png" /></a>
</td>
</tr>
<tr>
<td>ExtJS Access Style
<br />
<a href="examples/grid/themes/access.html" target="_blank">
<img title="ExtJS Access Style - 点击图片查看示例页" src="https://github.com/baishui2004/jquery.bsgrid/raw/master/documention/images/jquery.bsgrid-skins03-ExtJS Access Style.png" /></a>
</td>
<td>FlexiGrid Gray Style
<br />
<a href="examples/grid/themes/flexigrid.html" target="_blank">
<img title="FlexiGrid Gray Style - 点击图片查看示例页" src="https://github.com/baishui2004/jquery.bsgrid/raw/master/documention/images/jquery.bsgrid-skins04-FlexiGrid Gray Style.png" /></a>
</td>
</tr>
<tr>
<td>Dhtmlx Sky Blue Style
<br />
<a href="examples/grid/themes/sky_blue.html" target="_blank">
<img title="Dhtmlx Sky Blue Style - 点击图片查看示例页" src="https://github.com/baishui2004/jquery.bsgrid/raw/master/documention/images/jquery.bsgrid-skins05-Dhtmlx Sky Blue Style.png" /></a>
</td>
<td>Custom Blue Style
<br />
<a href="examples/grid/themes/custom.html" target="_blank">
<img title="Custom Blue Style - 点击图片查看示例页" src="https://github.com/baishui2004/jquery.bsgrid/raw/master/documention/images/jquery.bsgrid-skins06-Custom Blue Style.png" /></a>
</td>
</tr>
</table>
<br />
<h2>jquery.bsgrid的特点</h2>
1，轻量级，基于jQuery及HTML Table，除了对加载数据、分页、渲染数据的简单封装外，不额外增加特别的功能；模块化JS代码，可按需加载；CSS样式精致简洁，对于扩展修改非常容易；
<br />
2，使用友好，对于一个简单的表格展现，仅仅数十行代码即可完成，并且支持json、xml两种数据格式；且支持友好的导出参数构建；
<br />
3，内置多套经典样式风格，效果参看examples\grid\themes\*.html；可非常容易的修改表格使用字体大小，参看示例examples\grid\themes\custom.html，仅需修改该示例样式中的两处font-size即可；
<br />
4，自带load加载数据遮罩，并很容易进行扩展或重写；
<br />
5，扩展性好，插件有特别好的扩展性，易于对插件本身进行局部甚至较大的修改，易于改变展现样式、渲染数据；插件放开了属性及方法的全局修改权限，所有方法都可在外部进行全局重写，而无需修改插件本身的代码。
<br />
<br />
<h2>入门示例</h2>
<a href="examples/grid/simple.html" target="_blank">
<img title="Simple Grid - 点击图片查看示例页" src="https://github.com/baishui2004/jquery.bsgrid/raw/master/documention/images/jquery.bsgrid-02_simple_grid.png" />
</a>
<pre style="font-size: 12px; background-color: #eee; color: #333;">
引用文件：
<link rel="stylesheet" href="../../builds/merged/grid.simple.min.css"/>
<script type="text/javascript" src="../../plugins/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../builds/js/lang/grid.en.min.js"></script>
<script type="text/javascript" src="../../builds/merged/grid.simple.min.js"></script>
实现代码：
<table id="searchTable" class="bsgrid">
<tr>
<th w_index="XH" width="5%;">XH</th>
<th w_index="ID" width="5%;">ID</th>
<th w_index="CHAR" w_align="left" w_tip="true" width="15%;">CHAR</th>
<th w_index="TEXT" w_align="left" w_length="50" 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>
</pre>
</body>
</html>