Score
0
Watch 76 Star 153 Fork 60

bs2004 / jquery.bsgridJavaScriptApache-2.0

Create your Gitee Account
Explore and code with more than 5 million developers,Free private repositories !:)
Sign up
支持json、xml数据格式,皮肤丰富并且容易定制,支持表格编辑、本地数据、导出参数构建等实用便捷的功能,容易扩展,更拥有丰富的示例以及问题反馈的及时响应。 spread retract

http://thebestofyouth.com/bsgrid

Clone or download
index.html 13.11 KB
Copy Edit Web IDE Raw Blame History
bs2004 authored 2016-04-06 23:34 . 1.38-preview
<!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;">
&emsp;&emsp;支持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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</td>
<td>
依赖:jQuery 1.4.4 ~~ jQuery 1.12.2&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</td>
<td>
支持:IE6+、Chrome、Firefox等&nbsp;
</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.&nbsp;简单、轻量,基于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.&nbsp;内置<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.&nbsp;实用便捷的功能:<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.&nbsp;易与其他插件集成使用,示例展示了集成<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.&nbsp;扩展性好,插件有特别好的扩展性,易于对插件本身进行局部甚至较大的修改,易于改变展现样式;插件放开了属性及方法的全局修改权限,所有方法都可在外部进行全局重写,而无需修改插件本身的代码;
<br/>
6.&nbsp;模块化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 &emsp;&emsp;&nbsp; CSS样式(包含默认皮肤样式)
<br/>&emsp;&emsp;&emsp;&emsp;&nbsp;&nbsp;&nbsp;
builds/js/lang/grid.zh-CN.min.js &emsp;&emsp;&nbsp;&nbsp; JS本地化脚本(builds/js/lang/grid.*.min.js)
<br/>&emsp;&emsp;&emsp;&emsp;&nbsp;&nbsp;&nbsp;
builds/merged/bsgrid.all.min.js &emsp;&emsp;&nbsp;&nbsp;&nbsp; JS脚本
<br/>
可选皮肤:builds/css/skins/grid_*.min.css &emsp;&emsp;&nbsp;&nbsp;&nbsp; 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;">
引用文件:
&lt;link rel="stylesheet" href="../../builds/merged/bsgrid.all.min.css"/&gt;
&lt;script type="text/javascript" src="../../plugins/jquery-1.4.4.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="../../builds/js/lang/grid.zh-CN.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="../../builds/merged/bsgrid.all.min.js"&gt;&lt;/script&gt;
实现代码:
&lt;table id="searchTable"&gt;
&lt;tr&gt;
&lt;th w_index="XH" width="5%;"&gt;XH&lt;/th&gt;
&lt;th w_index="ID" width="5%;"&gt;ID&lt;/th&gt;
&lt;th w_index="CHAR" w_align="left" width="15%;"&gt;CHAR&lt;/th&gt;
&lt;th w_index="TEXT" w_align="left" width="30%;"&gt;TEXT&lt;/th&gt;
&lt;th w_index="DATE" width="15%;"&gt;DATE&lt;/th&gt;
&lt;th w_index="TIME" width="15%;"&gt;TIME&lt;/th&gt;
&lt;th w_index="NUM" width="5%;"&gt;NUM&lt;/th&gt;
&lt;th w_render="operate" width="10%;"&gt;Operate&lt;/th&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;script type="text/javascript"&gt;
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 '&lt;a href="#" onclick="alert(\'ID=' + gridObj.getRecordIndexValue(record, 'ID') + '\');"&gt;Operate&lt;/a&gt;';
}
&lt;/script&gt;
数据格式参考:<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&amp;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>
&emsp;
<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">@&nbsp;江苏·苏州</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>

Comment ( 0 )

Sign in for post a comment

JavaScript
1
https://gitee.com/bs2004/jquery.bsgrid.git
git@gitee.com:bs2004/jquery.bsgrid.git
bs2004
jquery.bsgrid
jquery.bsgrid
master

Search