注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

天朝布衣田中码农参上

苦逼码农的点点滴滴,请多多指教!

 
 
 

日志

 
 
 
 

一个纯Js的数据表格工具Sigma Grid的简单使用  

2016-07-23 08:39:24|  分类: JavaScript |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
Sigma Grid 是一个基于 Ajax 的数据表格,用以显示滚动的表格以及进行单元格数据的在线编辑,支持各种流行的浏览器,提供服务器端的集成解决方案,包括 PHP、Java、.NET 和 Perl。主要功能包括数据浏览、嵌套的多个表头、列排序、分页显示,支持大数据量的数据显示。可以说,这个Js数据表格工具强大到无所不能。
好了,一开始还是说下官方地址:https://github.com/sigmawidgets/Sigma-grid-AJAX-grid-for-php-java---.net
下载解压配置好相应的目录,就可以开始Sigma Grid之旅了。
1)首先是引入下列相关的文件:

<!--引入默认的可选皮肤-->
<link rel="stylesheet" type="text/css" href="../grid/gt_grid.css" />
<!--相关提示信息,这里默认采用中文如要用英文就引入gt_msg_en.js-->
<script type="text/javascript" src="../grid/gt_msg_cn.js"></script>
<script type="text/javascript" src="../grid/gt_grid_all.js"></script>

以上代码放入相关<head></head>之前,这里是最小引用,如果需要Jquery还需要额外引入。如需要引入其它skin,也请自行处理。
2)在<boby></body>之前加入相关代码:

<!--定义表头-->
<table id="myHead" style="display:none">
<tr>
<!--这里的columnId要跟js里面的对应上-->

<td columnId='site' align="center" style="height:20px">网站</td>
<td columnId='url' align="center" style="height:20px">地址</td>
</tr>
</table>
<!--定义容器-->
<div id="mygrid_container"></div>

3)最后,就是加入js了。

<script>
//这里虚拟一些数据,要跟之前的数据格式对应上
var data=[
["爱上吃喝","237h.com"],
["翔大","9zfx.com"],
["我就上乐乐吧","593668.com"]
];
//数据对应
var dsOption= {
fields :[
{name : 'site'},
{name : 'url' }],
recordType : 'array', //这里只允许object或array
data: data
};
//表头数据
var colsOption = [
{id: 'site' , header: "网站" , width :'150', align: "center", headAlign: "center"},
{id: 'url' , header: "地址" , editable : true,align: "center", headAlign: "center" } //不设宽度,系统会自动分配,
];
//Grid初始化参数
var gridOption={
id : "myGrid1", //定义表id
customHead : 'myHead', //定义表头
width: "1060",//可用"100%", 宽
height: "350",//可用"100%", 高
container : 'mygrid_container', //容器id
pageSizeList : [2,5], //分页的允许值,这里为了显示效果故设成很小
pageSize : 2, //默认页面大小
dataset : dsOption , //数据格式
columns : colsOption , //列格式
toolbarContent : 'nav goto | print'//显示相关菜单
};
var mygrid=new Sigma.Grid(gridOption); //生成Grid对象
//开始输出表
mygrid.render();
</script>

执行效果大体如下页面所示:
一个纯Js的数据表格工具Sigma Grid的简单使用 - sinsunson - 天朝布衣田中码农参上
4)如果需要动态调用数据,也可以加入XMLHttpRequest,当然用JQuery也行。这里仅是示范,js代码就改成如下:

<script>
var queryURL = "data.json";
//数据对应
var dsOption= {
fields :[
{name : 'site'},
{name : 'url' }]
};
//表头数据
var colsOption = [
{id: 'site' , header: "网站" , width :'150', align: "center", headAlign: "center"},
{id: 'url' , header: "地址" , editable : true,align: "center", headAlign: "center" } //不设宽度,系统会自动分配,
];
//Grid初始化参数
var gridOption={
id : "myGrid1", //定义表id
customHead : 'myHead', //定义表头
width: "1060",//可用"100%", 宽
height: "350",//可用"100%", 高
container : 'mygrid_container', //容器id
pageSizeList : [2,5], //分页的允许值,这里为了显示效果故设成很小
pageSize : 2, //默认页面大小
dataset : dsOption , //数据格式
columns : colsOption , //列格式
loadURL : queryURL, //这里加入取数据地址
toolbarContent : 'nav goto | print'//显示相关菜单
};
var mygrid=new Sigma.Grid(gridOption); //生成Grid对象
//开始输出表
mygrid.render();
</script

5)虚拟出的数据文件data.json,大体格式如下:

{"data":[{"site":"爱上吃喝","url":"237h.com"},{"site":"翔大","url":"9zfx.com"},{"site":"我就上乐乐吧","url":"593668.com"}],"pageInfo":{"totalRowNum":3},"exception":null}

6)如果需要后台分类,您需要处理下前台提交过来的分页参数,即一个提交过来的JSON格式数据:比如:

_gt_json:{"recordType":"object","pageInfo":{"pageSize":2,"pageNum":2,"totalRowNum":3,"totalPageNum":2,"startRowNum":3,"endRowNum":3},"columnInfo":[{"id":"site","header":"网站","fieldName":"site","fieldIndex":"site","sortOrder":null,"hidden":false,"exportable":true,"printable":true},{"id":"url","header":"地址","fieldName":"url","fieldIndex":"url","sortOrder":null,"hidden":false,"exportable":true,"printable":true}],"sortInfo":[],"filterInfo":[],"remotePaging":true,"parameters":{},"action":"load"}

从中提取出相应的页面大小[ pageSize],当前页面[pageNum]等来进一步处理即可[如,PHP搭配使用$_POST['_gt_json']或$_GET['_gt_json']来获取这个json字符串]。
当然以上也只是它的基本使用,如果需要更多的了解,请自行查看文档。此外,该项目好象已经停止更新6年了,目前最新的版本就是2.4。
  评论这张
 
阅读(1)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018