311 lines
13 KiB
HTML
311 lines
13 KiB
HTML
|
<!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>
|