【控件分享】基于Sigma Grid的支持前后台加载数据、分页，可自定义肌肤的高性能表格控件qoss-grid

文章版权：版权归网宿科技CDN研发二部-QOSS组所有，转载请注明出处。

 

控件介绍：
qoss-grid的前身是gt-grid，它是经由以下控件的演变而来：
gt-grid → Sigma Grid（基于gt-grid并开源） → portal gt-grid（研三对Sigma Grid做了优化）→ gdd-grid（我在portal gt-grid的基础上新增了一些基础功能，美化修改样式，更名为gdd-grid，在GDD组和QOSS组推广使用）
qoss-grid是在gdd-grid基础上再次更名为qoss-grid，并将源码中的Sigma更名为QOSS。
GDD组的同学如果正在使用原来的gdd-grid，请尽快更新到最新的版本qoss-grid上，新增的皮肤添加到skin文件夹即可。今后我将停止对gdd-grid的更新以及技术支持，qoss-grid将部署到QOSS组的svn上，由我和其他QOSS组的成员维护和更新。
 
控件信息：
控件名称：qoss-grid
版本号：1.8.15
作者：luxb(陆雄斌)
更新时间：2014-08-15
 
使用说明：
jsp页面只需一行引入：

<script id="qoss_grid_import" type="text/javascript" src="../grid/import/qoss_grid_import.js"></script>

 
js代码：

var instance = new QOSS.Grid(gridConfig);

版权声明：
qoss-grid是基于Sigma Grid(开源表格控件)的一款支持前后台加载数据、分页，可自定义皮肤的高性能表格控件。
对Sigma Grid所做的修改如下：
版本号：1.8.15（最新）
    1. 增加自适应高度autoHeight和自适应宽度autoWidth字段
    2. 增加自定义刷新完毕过程
    3. 调整自适应宽度时，表格的右边框线的显示
    4. 增加报表report皮肤
版本号：1.7.26
    1. 增加特殊的简单样式皮肤simple，选择皮肤菜单新增qoss和simple
    2. 示例的example_style_skin.html增加qoss和simple皮肤
    3. 版本号规范化，x.y.z(x表示第几年，y表示月份，z表示日期)
版本号：1.7.25
    1. Sigma更名为QOSS
    2. 只需一行代码即可引入所有需要的js和css文件
    3. 新增是否显示工具栏属性，支持隐藏工具栏
    4. 支持前台载入json数据
    5. 支持根据url和queryData载入json数据，需要jQuery支持
    6. 支持自定义服务器返回的结果字段名
    7. 支持自适应高度和宽度
    8. 新增自定义初始化过程
    9. 支持根据skin字段自动引入相应的css
    10. 支持按图表支持字段自动引入图表控件js，设置grid根目录
    11. 增加鼠标移出表格时选中行样式还原
    12. 默认不选中第一行
    13. 修改和美化表格的部分css样式
    14. 增加qoss新皮肤

为了保持控件源代码的完整性，对源码所做的修改必须遵循一下原则进行注释：
1) 新增一行：
added code line;/* [用户名][add][新增内容] */

2) 新增一段：
/* [用户名][add][start][新增内容] */
added code line 1;
added code line 2;
...
/* [用户名][add][end] */

3) 修改一行：
modified code line/* [用户名][modify][修改内容] */

4) 修改一段：
/* [用户名][modify][start][修改内容] */
modified code line 1;
modified code line 2;
...
/* [用户名][modify][end] */

5) 删除一行：
/* deleted code line;[用户名][delete][删除内容] */

6) 删除一段：
/* [用户名][delete][start][删除内容]
deleted code line 1;
deleted code line 2;
deleted code line 3;
[用户名][delete][end]*/

最新版本v1.8.15源码，见附件：