jQuery.bsgrid

  支持json、xml数据格式，皮肤丰富并且容易定制，支持表格编辑、本地数据、导出参数构建等实用便捷的功能，容易扩展，更拥有丰富的示例以及问题反馈的及时响应。

插件特点

1. 简单、轻量，基于jQuery及HTML Table，简单的表格只需数十行代码，支持大数据量表格；
2. 内置多套经典皮肤，且非常容易定制，字体定制只需要修改两处CSS代码即可；
3. 实用便捷的功能：表格编辑、 表底聚合、 不分页、 多行表头、 多字段排序、 本地数据、 处理Userdata、 拖动列宽、 滚动表格数据等；
4. 易与其他插件集成使用，示例展示了集成Layui、 ArtDialog、 jquery.validationEngine、 第三方分页工具条等的使用；
5. 扩展性好，插件有特别好的扩展性，易于对插件本身进行局部甚至较大的修改，易于改变展现样式；插件放开了属性及方法的全局修改权限，所有方法都可在外部进行全局重写，而无需修改插件本身的代码；
6. 模块化JS、CSS代码，可按需加载，代码精致简洁，对于阅读、修改、扩展非常容易。

引用文件

引用文件：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/
其他说明：builds目录下未列出的文件无需引入项目中

入门示例

引用文件：
    <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>
数据格式参考：simple.json

带参数查询

    function doSearch() {
        // 提供以下三种带参数方式，可任选其中任意一种
        var searchParames = $('#searchForm').serializeArray();      // jQuery推荐方式
        // searchParames = 'param1=val1&param2=val2';
        // searchParames = {'param1': 'val1', 'param2': 'val2'};
        gridObj.search(searchParames);
    }
示例：带参数查询表格