jQuery.bsgrid 简单易用的jQuery Grid插件jquery bsgrid，A simple jQuery Grid plugin with pagation, export and easy to expand. 一个简单易用的jQuery Grid插件，支持分页或不分页，支持json、xml数据格式，对导出友好，扩展性友好。 本插件的早期及当前版本已在多个项目中使用。 开源协议：Apache Licence 2 首先给出典型效果图示1，内置多套皮肤（点击下面对应皮肤图片可查看示例页面），并可非常容易的自定义皮肤（参考Custom Blue Style）
2，可以非常方便的集成第三方分页工具条使用（点击下面对应皮肤图片可查看示例页面）
bsgrid的由来 首先，澄清插件名称为何叫bsgrid，是因为敝人常用bs开头的字符做英文账号的缘故。bsgrid诞生的原因是主流插件或框架的grid使用或扩展比较复杂。 bsgrid的特点 1，轻量级，基于jQuery及HTML Table，除了对加载数据、分页、渲染数据的简单封装外，不额外增加特别的功能；模块化JS代码，可按需加载；CSS样式精致简洁，对于扩展修改非常容易； 对于主流Grid的简单理解大概说下目前的一些主流grid插件或框架的grid bsgrid示例目录以下列出Grid及Grid With ArtDialog的示例并作以说明；Util、Button、Form、Paging、Grid With Other Pagination部分的示例简述如下： Util： 演示util.min.js，提供form表单序列化为字符串的方法(区别于jquery的param方法)，以及form表单序列化name为字符串的方法 Button：演示icon.min.css，提供两种图标样式 Form： 演示form.min.js、form.min.css，对于表单的敏捷处理，包括获取表单值、给表单赋值、表单的查看新增编辑模式、表单各种模式下的tip提示 Paging：演示grid.paging.min.js分页工具条，不依赖grid.min.js Grid With Other Pagination：演示Grid集成第三方分页工具条使用 Merged Files: 目录builds/merged，合并经常一起使用的css、js，合并文件描述文件builds/readme grid.simple.min.css 合并grid、paging分页css样式 grid.simple.min.js 合并grid、paging分页js脚本 grid.all.min.css 合并grid、paging分页、icon图标css样式 grid.all.min.js 合并grid、paging分页、grid导出构建js脚本 bsgrid.all.min.css 合并grid、paging分页、icon图标、form表单css样式 bsgrid.all.min.js 合并grid、paging分页、grid导出构建、form表单js脚本 1，Example Index 2，Simple Grid 3，Simple zh-CN Grid 4，Simple XML Data Grid 5，No Pagation 6，No Diaplay Blank Rows 7，No Data 8，Grid With Checkbox 9，Grid With Little Paging 10，Standard Grid 11，Multi Grid 12，Export Grid 13，Grid with ArtDialog 14，Grid And Form with ArtDialog 1，Example Index
2，Simple Grid
引用文件：
<link rel="stylesheet" href="../../builds/merged/grid.simple.min.css"/>
<script type="text/javascript" src="../../plugins/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../builds/js/lang/grid.en.min.js"></script>
<script type="text/javascript" src="../../builds/merged/grid.simple.min.js"></script>
实现代码：
<table id="searchTable" class="bsgrid">
<tr>
<th w_index="XH" width="5%;">XH</th>
<th w_index="ID" width="5%;">ID</th>
<th w_index="CHAR" w_align="left" w_tip="true" width="15%;">CHAR</th>
<th w_index="TEXT" w_align="left" w_length="50" 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">
$(function () {
$.fn.bsgrid.init('searchTable', {
url: 'data/simple.json',
// autoLoad: false,
pageSizeSelect: true,
pageSize: 10
});
});
function operate(record, rowIndex, colIndex, options) {
return '<a href="#" onclick="alert(\'ID=' + record['ID'] + '\');">Operate</a>';
}
</script>3，Simple zh-CN Grid
1，插件语言本地化文件：grid.en.min.js、grid.zh-CN.min.js、grid.zh-TW.min.js
2，行间隔色配置：stripeRows: true
3，行hover样式：添加如下样式
/* row hover */
.bsgrid tr:hover {
background-color: #ffe48d;
}4，Simple XML Data Grid
默认的是json格式，换加载XML格式数据：
方式1，全局修改加载数据格式：
$.fn.bsgrid.defaults.dataType = 'xml';
方式2，单grid修改加载数据格式：
$.fn.bsgrid.init('searchTable', {
url: 'data/simple.xml',
dataType: 'xml',
pageSizeSelect: true,
pageSize: 10
});5，No Pagation支持展示后台的全部数据，分页工具条变为如下只显示总数的样式： 实现代码：将pageAll设置为true即可，后台数据格式与分页后台数据格式一致
$.fn.bsgrid.init('searchTable', {
url: 'data/simple.json',
pageAll: true
});
补充说明：不分页则无需加载grid.paging.min.css、grid.paging.min.js6，No Diaplay Blank Rows设置是否显示无数据的行，下图示例展示的是分页行大小是25，但只显示了20条数据，无数据行没有显示： 实现代码：修改全局参数displayBlankRows，默认值为true $.fn.bsgrid.defaults.displayBlankRows = false; 7，No Data无数据时的提示： 注意此提示仅当$.fn.bsgrid.defaults.displayBlankRows = false;时才会显示，为true时显示的是空行。 说明：属性displayPagingToolbarOnlyMultiPages与displayBlankRows互不影响。 8，Grid With Checkboxbsgrid内置并不支持checkbox的直接配置，通过column列的w_render属性实现： 实现代码：主要部分
<th w_render="checkbox" w_index="ID" width="3%;"><input type="checkbox"/></th>
// 表格的checkbox选择
if($('#searchTable tr:first th input[type=checkbox]').length == 1) {
$('#searchTable tr:first th input[type=checkbox]').change(function () {
if ($(this).attr('checked')) {
$('#searchTable tr:not(:first) td input[type=checkbox]').attr('checked', true);
} else {
$('#searchTable tr:not(:first) td input[type=checkbox]').attr('checked', false);
}
});
}
function checkbox(record, rowIndex, colIndex, options) {
var headerTh = $.fn.bsgrid.getGridHeaderObject(options);
return '<input type="checkbox" value="' + $.fn.bsgrid.parseData.getColumnValue(options.settings.dataType, record, $.trim(headerTh.eq(colIndex).attr(options.settings.colsProperties.indexAttr))) + '"/>';
}
function getCheckedIds() {
var ids = '';
$('#searchTable tr:not(:first) td input:checked').each(function () {
ids += ',' + $(this).val();
});
alert(ids.length > 0 ? ids.substring(1) : '');
}9，Grid With Little Paging似ExtJS、EasyUI类分页工具条： 将grid.paging.min.css替换为grid.paging.little.min.css，并额外引入grid.paging.little.min.js（注意引用顺序），这个JS文件是对内置工具条展现的部分重写，简单的数几十行代码，充分体现了可扩展性特别强： <link rel="stylesheet" href="../../builds/css/grid.paging.little.min.css"/> <script type="text/javascript" src="../../builds/js/grid.paging.little.min.js"></script> 10，Standard Grid演示bsgrid的大部分对外调用方法，并描述主要配置属性及其作用。 11，Multi Grid支持一个页面显示多个grid： 12，Export Gridbsgrid并不是提供导出Grid的页面数据功能，而是进行导出参数的组织： 简单的grid导出参数URL类似如下：
http://bsgrid.oschina.mopaas.com/examples/grid/export.html?exportFileName=Export%2520Example&dataNames=XH%252CID%252CCHAR%252CTEXT%252CDATE%252CTIME%252CNUM&dataIndexs=XH,ID,CHAR,TEXT,DATE,TIME,NUM&dataLengths=50,50,150,300,150,150,50&dataAligns=center,center,left,left,center,center,center¶m1=param1¶m2=param2
需要额外引用用于导出的JS：
<script type="text/javascript" src="../../builds/js/export.min.js"></script>
代码实现，如下，静态页面部分仅再需要增加一个导出按钮即可：
var gridObj;
$(function () {
gridObj = $.fn.bsgrid.init('searchTable', {
url: 'data/simple.json',
pageSizeSelect: true,
pageSize: 10
});
});
function doExport() {
alert('Only test request params, To see it in browser address url.');
gridObj.options.otherParames = $('#searchForm').serializeArray();
$.bsgrid_export.doExport($('#searchTable tr th'), gridObj.options.otherParames, {
url: 'export.html', // only test request params
exportFileName: 'Export Example',
colsProperties: {
width: 120
},
colWidthPercentmultiplier: 10 // if set column width N%, then column width will reset N*10, default 14
});
}13，Grid with ArtDialog结合artDialog，演示使用artDialog的锁屏遮罩样式，以及演示使用artDialog覆盖JS原生alert、confirm、prompt方法的使用。 需要额外引用的文件： <link rel="stylesheet" href="../../plugins/artDialog/skins/blue.css"/> <link rel="stylesheet" href="override/artDialog.skins.override.css"/> <script type="text/javascript" src="../../plugins/artDialog/jquery.artDialog.min.js"></script> <script type="text/javascript" src="../../plugins/artDialog/artDialog.plugins.min.js"></script> <script type="text/javascript" src="override.grid.js"></script> <script type="text/javascript" src="override/artDialog.plugin.override.en.js"></script> <script type="text/javascript" src="override/artDialog.plugin.override.js"></script> <script type="text/javascript" src="override.pop.js"></script> artDialog需要引用的文件：artDialog/skins/blue.css、artDialog/jquery.artDialog.min.js、artDialog/artDialog.plugins.min.js 覆盖bsgrid的锁屏遮罩样式的文件：override.grid.js 覆盖JS原生的alert、confirm、prompt方法的文件：artDialog.skins.override.css、artDialog.plugin.override.en.js、artDialog.plugin.override.js、override.pop.js 14，Grid And Form with ArtDialog结合ArtDialog使用，可以完成一个很好看的CRUD功能，详细可查看示例及示例源码： |
