新闻 jQuery.bsgrid 1.35 发布，性能优化、功能增强 下载

jquery bsgrid，一个简单易用的jQuery Grid插件，支持json、xml数据格式，自带多套皮肤且易于扩展，支持分页或不分页，对扩展性友好，导出友好。

项目主页：http://thebestofyouth.com/bsgrid
备用主页：http://bsgrid.oschina.mopaas.com/(腾讯管家提示风险，因为共用mopass域名缘故)

版本：1.35  1.33   示例：导航一  导航二 文档：HTML  PDF  方法及属性使用与说明
依赖：jQuery 1.4.4 ~~ jQuery 1.11.2 支持浏览器：IE6+、Chrome、Firefox等
捐助：支持长远发展，感谢您的认可！



本次更新内容：

1，优化grid及grid.extend的性能（减少非配置必须的js执行，一千条数据加载速度快一倍多），示例页面：load-time-test.html；
2，options.otherParames支持String型参数串（示例：param1=val1&param2=val2），参见下面的说明：带参数查询，现支持三种方式；
3，local json、local xml data数据增加分页功能，简化数据构造；
4，grid增加userdata，对于json数据其值可以是一个简单的值或json Object；或者json Array，示例：userdata.html；
对于json数据其值可以是一个简单的值或xml串，示例：userdata-xml.html；
配置processUserdata以处理userdata，使用grid.getUserdata()获取userdata；
5，增加动态表头示例，使用userdata进行简易的动态表头处理，示例：dynamic-header.html；


典型皮肤效果：


插件特点：
1. 轻量、简单，标准的表格只需数十行代码；
2. 内置多套经典皮肤，且非常容易扩展，比如只需要修改两处CSS代码即可修改字体样式；
3. 非常多的实用功能，多行表头、 拖动表头改变宽度、 固定表头滚动表体数据、 多字段联合排序、 表底聚合、 在线编辑等；
4. 容易扩展，属性及方法可以在外部进行全局重写，而无需修改插件本身的代码；
5. 模块化JS、CSS代码，可按需加载，代码精致简洁，对于阅读、修改、扩展非常容易；

6. 易与其他插件集成使用，示例展示了集成ArtDialog、jquery.validationEngine、第三方分页工具条的使用等。

入门示例：
http://bsgrid.oschina.mopaas.com/examples/grid/simple.html

项目中使用需要加入的文件，以下未列出的builds目录下的文件无需加入项目中：
引用文件：builds/merged/bsgrid.all.min.css CSS样式(默认皮肤不需要引入额外的皮肤样式)
builds/js/lang/grid.zh-CN.min.js JS本地化脚本(builds/js/lang/grid.*.min.js)
builds/merged/bsgrid.all.min.js JS脚本
可选皮肤：builds/css/skins/grid_*.min.css CSS皮肤(需引用于bsgrid.all.min.css之后)

图标资源：builds/images

入门示例代码：

引用文件：
<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>
带参数查询：


var gridObj;
$(function () {
gridObj = $.fn.bsgrid.init('searchTable', {
url: 'data/json.jsp',
// autoLoad: false,
pageSizeSelect: true,
pageSize: 10
});
doSearch();
});

function doSearch() {
// 提供以下三种带参数方式，可任选其中任意一种
// gridObj.options.otherParames = 'param1=val1¶m2=val2';
// gridObj.options.otherParames = {'param1': 'val1', 'param2': 'val2'};
gridObj.options.otherParames = $('#searchForm').serializeArray(); // jQuery推荐方式
gridObj.page(1);
}
jQuery.bsgrid 1.35 发布，性能优化、功能增强下载地址