目录
  1. 1. 引入文件
  2. 2. 实现代码
bsgrid-最简单的表格

bsgrid 支持json、xml数据格式
本文使用bsgrid读取json数据


引入文件

bsgrid.all.min.css       CSS样式
jquery.min.js               jQuery
grid.zh-CN.min.js       JS本地化脚本
bsgrid.all.min.js           JS脚本
1
2
3
4
<link rel="stylesheet" href="css/bsgrid.all.min.css" />
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/grid.zh-CN.min.js"></script>
<script type="text/javascript" src="js/bsgrid.all.min.js"></script>

实现代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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="NUM" width="5%;">NUM</th>
</tr>
</table>
<script type="text/javascript">
var gridObj;
$(function() {
gridObj = $.fn.bsgrid.init('searchTable', {
url: 'simple.json', //json文件url
ajaxType: 'get', //请求方式
pageSizeSelect: true, //是否显示分页大小选择下拉框,默认false
pageSize: 10 //分页大小,默认20
});
});
</script>

效果图
本文参考网站(http://thebestofyouth.com/bsgrid/)

文章作者: 艾小逗
文章链接: http://foryh.com/2018/05/24/bsgrid-最简单的表格/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 艾小逗
打赏
  • 微信
  • 支付寶