jQuery.bsgrid 简单易用的jQuery Grid插件

jquery bsgrid，A simple jQuery Grid plugin, support json and xml data, has many themes and simple to extend, support pagation or no pagation, easy to expand and export. 一个简单易用的jQuery Grid插件，支持json、xml数据格式，自带多套皮肤且易于扩展，支持分页或不分页，对扩展性友好，导出友好。

QQ群交流：254754154
捐助：支持长远发展，感谢您的认可！

源码：Github 示例：导航一导航二
版本：1.35 协议：Apache Licence 2 更新日期：2015-04-28
文档：HTML PDF 方法及属性使用与说明
依赖：jQuery 1.4.4 ~~ jQuery 1.11.2
支持：IE6+、Chrome、Firefox等

#####首先给出典型效果图示##### 1，内置多套皮肤（点击下面对应皮肤图片可查看示例页面），并可非常容易的自定义皮肤（参考Custom Blue Style）

Default Style	ExtJS Gray Style	ExtJS Blue Style
ExtJS Access Style	FlexiGrid Gray Style	Dhtmlx Sky Blue Style
Pure Gray Style	jqGrid Style	EasyUI Style
Bootstrap Style	Custom Blue Style

2，可以非常方便的集成第三方分页工具条使用（点击下面对应皮肤图片可查看示例页面）

With jqPagination	With jquery_pagination
With jPaginate	With jPages
With smartpaginator	With jPaginator

###bsgrid的由来### 首先，澄清插件名称为何叫bsgrid，是因为敝人常用bs开头的字符做英文账号的缘故。bsgrid诞生的原因是主流插件或框架的grid使用或扩展比较复杂。
以下仅简单说下各插件或框架的grid：
1，目前主流Grid基本比较适用于内部系统，对于外部系统适用而言，想要改变皮肤样式，字体大小等都非常困难；
2，主流Grid封装的太好，这反而造成了其扩展性能不是很好，并且其methods、properties很多，上手不容易；
3，主流grid大多数不提供无分页情况下后台数据的全部展现。

###bsgrid的特点### 1，轻量级，基于jQuery及HTML Table，除了对加载数据、分页、渲染数据的简单封装外，不额外增加特别的功能；模块化JS代码，可按需加载；CSS样式精致简洁，对于扩展修改非常容易；
2，使用友好，对于一个简单的表格展现，仅仅数十行代码即可完成，并且支持json、xml两种数据格式；且支持友好的导出参数构建；
3，内置多套经典样式风格，效果参看examples\grid\themes\*.html；可非常容易的修改表格使用字体大小，参看示例examples\grid\themes\custom.html，仅需修改该示例样式中的两处font-size即可；
4，自带load加载数据遮罩，并很容易进行扩展或重写；
5，扩展性好，插件有特别好的扩展性，易于对插件本身进行局部甚至较大的修改，易于改变展现样式、渲染数据；插件放开了属性及方法的全局修改权限，所有方法都可在外部进行全局重写，而无需修改插件本身的代码。

###对于主流Grid的简单理解### 大概说下目前的一些主流grid插件或框架的grid
1，ExtJS，功能丰富，封装好，但属重量级产品，需要加载大体积文件，且响应速度较慢，需商业授权，一般用于内部系统；
2，DHtmlx，同样功能丰富，封装好，不过其可以根据所需要的模块进行加载，速度方面快于ExtJS，需商业授权，由于其样式不易修改，同样一般用于内部系统；
3，EasyUI，基于jQuery，语法使用jQuery，却部分地方像ExtJS的写法，在不需其源码的情况下无需商业授权，因无源码而不方便按需模块化加载，也很难改变皮肤样式；
4，jQGrid，基于jQuery，开源免费且功能特别强大，但同样其样式不易修改；
5，Flexigrid，基于jQuery，功能逊色，但轻量级，methods、properties较少，不失为想用ExtJS Grid或EasyUI 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分页、grid扩展、icon图标css样式
              grid.all.min.js         合并grid、paging分页、grid扩展、grid导出构建js脚本
              form.all.min.css        合并form表单、icon图标css样式
              form.all.min.js         合并form表单及其依赖js脚本
              bsgrid.all.min.css      合并grid、paging分页、grid扩展、icon图标、form表单css样式
              bsgrid.all.min.js       合并grid、paging分页、grid扩展、grid导出构建、form表单js脚本

1，Example Index
2，Simple Grid
3，Simple en Grid
   Simple Grid With Images
4，Simple XML Data Grid
   Local Json Data
   Local Xml Data
5，No Pagation
6，No Diaplay Blank Rows
7，No Data
8，Grid With Checkbox
   With Custom Checkbox
   Edit Grid
   Move Column
   Custom Move Column
   Extend Conditions
   Extend Grid
   Multi Header Grid
   Grid With Footer
   Multi Sort Grid
   Fixed Grid
   Fixed Grid Custom
9，Grid With Little Paging
10，Standard Grid
11，Multi Grid
    Multi Extend 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/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>

#####3，Simple en 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;
   }

##### Simple Grid With Images#####

数据支持扩展渲染，th使用w_render属性，值是js方法名：
    <th w_render="renderImg" width="5%;">IMAGES</th>
renderImg方法：
    function renderImg(record, rowIndex, colIndex, options) {
        var idInt = parseInt($.trim(gridObj.getRecordIndexValue(record, 'ID')));
        return '<img src="../images/' + ((idInt % 3) == 0 ? 3 : (idInt % 3)) + '.jpg" width="32px" />';
    }

#####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
　　});

##### Local Json Data#####

示例页面：Local Json Data

##### Local Xml Data#####

示例页面：Local Xml Data

#####5，No Pagation##### 支持展示后台的全部数据，分页工具条变为如下只显示总数的样式：

实现代码：将pageAll设置为true即可，后台数据格式与分页后台数据格式一致
   $.fn.bsgrid.init('searchTable', {
       url: 'data/simple.json',
       pageAll: true
   });
补充说明：不分页则无需加载grid.paging.min.css、grid.paging.min.js

#####6，No Diaplay Blank Rows##### 设置是否显示无数据的行，下图示例展示的是分页行大小是25，但只显示了20条数据，无数据行没有显示：

实现代码：修改全局参数displayBlankRows，默认值为true
　　$.fn.bsgrid.defaults.displayBlankRows = false;

#####7，No Data##### 无数据时的提示：
No Data

注意此提示仅当$.fn.bsgrid.defaults.displayBlankRows = false;时才会显示，为true时显示的是空行。
说明：属性displayPagingToolbarOnlyMultiPages与displayBlankRows互不影响。

#####8，Grid With Checkbox#####

##### With Custom Checkbox#####

示例页面：With Custom Checkbox

##### Edit Grid#####

示例页面：Edit Grid

##### Move Column#####

示例页面：Move Column

##### Custom Move Column#####

示例页面：Custom Move Column

##### Extend Conditions#####

示例页面：Extend Conditions

##### Extend Grid#####

示例页面：Extend Grid

##### Multi Header Grid#####

示例页面：Multi Header Grid

##### Grid With Footer#####

示例页面：Grid With Footer

##### Multi Sort Grid#####

示例页面：Multi Sort Grid

##### Fixed Grid#####

示例页面：Fixed Grid

##### Fixed Grid Custom#####

示例页面：Fixed Grid Custom

#####9，Grid With Little Paging##### 似ExtJS、EasyUI类分页工具条：

参看示例源码，仅需要设置参数pagingLittleToolbar值为true即可，默认值为false。

#####10，Standard Grid##### 演示bsgrid的大部分对外调用方法，并描述主要配置属性及其作用。
此处为了演示分页，后台使用jsp页面模拟分页数据，可以完整的展示排序，分页。

#####11，Multi Grid##### 支持一个页面显示多个grid：

##### Multi Extend Grid#####

示例页面：Multi Extend Grid

#####12，Export Grid##### bsgrid并不是提供导出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&param1=param1&param2=param2

需要额外引用用于导出的JS：
    <script type="text/javascript" src="../../builds/js/export.min.js"></script>

代码实现，如下，静态页面部分仅再需要增加一个导出按钮即可：
    var gridObj;
    $(function () {
        gridObj = $.fn.bsgrid.init('searchTable', {
            url: 'data/json.jsp',
            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 thead tr th[w_hidden!="true"]'), gridObj.options.otherParames, {
            url: 'export.html' + '?sortName=' + gridObj.options.sortName + '&sortOrder=' + gridObj.options.sortOrder, // 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方法的使用。
特别注意：
JS原生的alert、confirm、prompt方法是阻塞的，而使用artDialog覆盖的alert、confirm、prompt方法是非阻塞的，artDialog覆盖的方法是用回调方式实现阻塞的等待执行代码效果，详细可参看示例：Pop with ArtDialog
Grid with ArtDialog

需要额外引用的文件：
    <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功能，详细可查看示例及示例源码：
Grid with ArtDialog

xuanjiandie / jquery.bsgrid

jQuery.bsgrid 简单易用的jQuery Grid插件

简介

发行版

贡献者

近期动态

xuanjiandie / jquery.bsgrid .gitee-modal { width: 500px !important; }

jQuery.bsgrid 简单易用的jQuery Grid插件

简介

发行版

贡献者

近期动态

搜索帮助

xuanjiandie / jquery.bsgrid