From bbe4738fc249a7591d83ffb6411273f10331e301 Mon Sep 17 00:00:00 2001
From: bs2004 jquery bsgrid,A simple jQuery Grid plugin with pagation, export and easy to expand. 一个简单易用的jQuery Grid插件,支持json、xml数据格式,自带多套皮肤且易于扩展,支持分页或不分页,对扩展性友好,导出友好。
-交流QQ群:254754154
- 插件版本:1.32
+ 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
+
+示例:导航一
+ 导航二
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
-
+
@@ -128,36 +128,36 @@ QQ群交流:254754154
With jqPagination
-
+
With jquery_pagination
-
+
With jPaginate
-
+
With jPages
-
+
@@ -239,12 +239,12 @@ Merged Files: 目录builds/merged,合并经常一起使用的css、js,合并
#####1,Example Index#####
-![Example Index](https://github.com/baishui2004/jquery.bsgrid/raw/master/documention/images/jquery.bsgrid-01_examples_index-01.png)
+![Example Index](https://github.com/baishui2004/jquery.bsgrid/raw/v1.32/documention/images/jquery.bsgrid-01_examples_index-01.png)
With smartpaginator
-
+
With jPaginator
-
+
-![Example Index](https://github.com/baishui2004/jquery.bsgrid/raw/master/documention/images/jquery.bsgrid-01_examples_index-02.png)
+![Example Index](https://github.com/baishui2004/jquery.bsgrid/raw/v1.32/documention/images/jquery.bsgrid-01_examples_index-02.png)
#####2,Simple Grid#####
-![Simple Grid](https://github.com/baishui2004/jquery.bsgrid/raw/master/documention/images/jquery.bsgrid-02_simple_grid.png)
+![Simple Grid](https://github.com/baishui2004/jquery.bsgrid/raw/v1.32/documention/images/jquery.bsgrid-02_simple_grid.png)
引用文件:
<link rel="stylesheet" href="../../builds/merged/grid.simple.min.css"/>
@@ -281,7 +281,7 @@ Merged Files: 目录builds/merged,合并经常一起使用的css、js,合并
#####3,Simple en Grid#####
-![Simple en Grid](https://github.com/baishui2004/jquery.bsgrid/raw/master/documention/images/jquery.bsgrid-03_simple_en_grid.png)
+![Simple en Grid](https://github.com/baishui2004/jquery.bsgrid/raw/v1.32/documention/images/jquery.bsgrid-03_simple_en_grid.png)
1,插件语言本地化文件:grid.en.min.js、grid.zh-CN.min.js、grid.zh-TW.min.js
@@ -295,7 +295,7 @@ Merged Files: 目录builds/merged,合并经常一起使用的css、js,合并
##### Simple Grid With Images#####
-![Simple Grid With Images](https://github.com/baishui2004/jquery.bsgrid/raw/master/documention/images/jquery.bsgrid-03_simple_grid_with_images.png)
+![Simple Grid With Images](https://github.com/baishui2004/jquery.bsgrid/raw/v1.32/documention/images/jquery.bsgrid-03_simple_grid_with_images.png)
数据支持扩展渲染,th使用w_render属性,值是js方法名:
<th w_render="renderImg" width="5%;">IMAGES</th>
@@ -307,7 +307,7 @@ renderImg方法:
#####4,Simple XML Data Grid#####
-![Simple XML Data Grid](https://github.com/baishui2004/jquery.bsgrid/raw/master/documention/images/jquery.bsgrid-04_simple_XML_data_grid.png)
+![Simple XML Data Grid](https://github.com/baishui2004/jquery.bsgrid/raw/v1.32/documention/images/jquery.bsgrid-04_simple_XML_data_grid.png)
默认的是json格式,换加载XML格式数据:
方式1,全局修改加载数据格式:
@@ -323,7 +323,7 @@ renderImg方法:
##### Local Json Data#####
-示例页面:Local Json Data
+示例页面:Local Json Data
##### Local Xml Data#####
@@ -334,7 +334,7 @@ renderImg方法:
#####5,No Pagation#####
支持展示后台的全部数据,分页工具条变为如下只显示总数的样式:
-![No Pagation](https://github.com/baishui2004/jquery.bsgrid/raw/master/documention/images/jquery.bsgrid-05_no_pagation.png)
+![No Pagation](https://github.com/baishui2004/jquery.bsgrid/raw/v1.32/documention/images/jquery.bsgrid-05_no_pagation.png)
实现代码:将pageAll设置为true即可,后台数据格式与分页后台数据格式一致
$.fn.bsgrid.init('searchTable', {
@@ -347,7 +347,7 @@ renderImg方法:
#####6,No Diaplay Blank Rows#####
设置是否显示无数据的行,下图示例展示的是分页行大小是25,但只显示了20条数据,无数据行没有显示:
-![No Diaplay Blank Rows](https://github.com/baishui2004/jquery.bsgrid/raw/master/documention/images/jquery.bsgrid-06_no_diaplay_blank_rows.png)
+![No Diaplay Blank Rows](https://github.com/baishui2004/jquery.bsgrid/raw/v1.32/documention/images/jquery.bsgrid-06_no_diaplay_blank_rows.png)
实现代码:修改全局参数displayBlankRows,默认值为true
$.fn.bsgrid.defaults.displayBlankRows = false;
@@ -356,7 +356,7 @@ renderImg方法:
#####7,No Data#####
无数据时的提示:
-![No Data](https://github.com/baishui2004/jquery.bsgrid/raw/master/documention/images/jquery.bsgrid-07_no_data.png)
+![No Data](https://github.com/baishui2004/jquery.bsgrid/raw/v1.32/documention/images/jquery.bsgrid-07_no_data.png)
注意此提示仅当$.fn.bsgrid.defaults.displayBlankRows = false;时才会显示,为true时显示的是空行。
说明:属性displayPagingToolbarOnlyMultiPages与displayBlankRows互不影响。
@@ -364,67 +364,67 @@ renderImg方法:
#####8,Grid With Checkbox#####
-![Grid With Checkbox](https://github.com/baishui2004/jquery.bsgrid/raw/master/documention/images/jquery.bsgrid-08_grid_with_checkbox.png)
+![Grid With Checkbox](https://github.com/baishui2004/jquery.bsgrid/raw/v1.32/documention/images/jquery.bsgrid-08_grid_with_checkbox.png)
##### With Custom Checkbox#####
-示例页面:With Custom Checkbox
+示例页面:With Custom Checkbox
##### Edit Grid#####
-示例页面:Edit Grid
+示例页面:Edit Grid
##### Move Column#####
-示例页面:Move Column
+示例页面:Move Column
##### Custom Move Column#####
-示例页面:Custom Move Column
+示例页面:Custom Move Column
##### Extend Conditions#####
-示例页面:Extend Conditions
+示例页面:Extend Conditions
##### Extend Grid#####
-示例页面:Extend Grid
+示例页面:Extend Grid
##### Multi Header Grid#####
-示例页面:Multi Header Grid
+示例页面:Multi Header Grid
##### Grid With Footer#####
-示例页面:Grid With Footer
+示例页面:Grid With Footer
##### Multi Sort Grid#####
-示例页面:Multi Sort Grid
+示例页面:Multi Sort Grid
##### Fixed Grid#####
-示例页面:Fixed Grid
+示例页面:Fixed Grid
##### Fixed Grid Custom#####
-示例页面:Fixed Grid Custom
+示例页面:Fixed Grid Custom
#####9,Grid With Little Paging#####
似ExtJS、EasyUI类分页工具条:
-![Grid With Little Paging](https://github.com/baishui2004/jquery.bsgrid/raw/master/documention/images/jquery.bsgrid-09_grid_with_little_paging.png)
+![Grid With Little Paging](https://github.com/baishui2004/jquery.bsgrid/raw/v1.32/documention/images/jquery.bsgrid-09_grid_with_little_paging.png)
引入样式grid.paging.little.min.css,并额外引入grid.paging.little.min.js(注意引用顺序),这个JS文件是对内置工具条展现的部分重写,简单的数几十行代码,充分体现了可扩展性特别强:
<link rel="stylesheet" href="../../builds/css/grid.paging.little.min.css"/>
@@ -436,22 +436,22 @@ renderImg方法:
此处为了演示分页,后台使用jsp页面模拟分页数据,可以完整的展示排序,分页。
-![Standard Grid](https://github.com/baishui2004/jquery.bsgrid/raw/master/documention/images/jquery.bsgrid-10_standard_grid.png)
+![Standard Grid](https://github.com/baishui2004/jquery.bsgrid/raw/v1.32/documention/images/jquery.bsgrid-10_standard_grid.png)
#####11,Multi Grid#####
支持一个页面显示多个grid:
-![Multi Grid](https://github.com/baishui2004/jquery.bsgrid/raw/master/documention/images/jquery.bsgrid-11_multi_grid.png)
+![Multi Grid](https://github.com/baishui2004/jquery.bsgrid/raw/v1.32/documention/images/jquery.bsgrid-11_multi_grid.png)
##### Multi Extend Grid#####
-示例页面:Multi Extend Grid
+示例页面:Multi Extend Grid
#####12,Export Grid#####
bsgrid并不是提供导出Grid的页面数据功能,而是进行导出参数的组织:
-![Export Grid](https://github.com/baishui2004/jquery.bsgrid/raw/master/documention/images/jquery.bsgrid-12_export_grid.png)
+![Export Grid](https://github.com/baishui2004/jquery.bsgrid/raw/v1.32/documention/images/jquery.bsgrid-12_export_grid.png)
简单的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
@@ -488,7 +488,7 @@ http://bsgrid.oschina.mopaas.com/examples/grid/export.html?exportFileName=Export
特别注意:
JS原生的alert、confirm、prompt方法是阻塞的,而使用artDialog覆盖的alert、confirm、prompt方法是非阻塞的,artDialog覆盖的方法是用回调方式实现阻塞的等待执行代码效果,详细可参看示例:[Pop with ArtDialog](http://bsgrid.oschina.mopaas.com/examples/artDialog/pop.html)
-![Grid with ArtDialog](https://github.com/baishui2004/jquery.bsgrid/raw/master/documention/images/jquery.bsgrid-13_grid_with_artDialog.png)
+![Grid with ArtDialog](https://github.com/baishui2004/jquery.bsgrid/raw/v1.32/documention/images/jquery.bsgrid-13_grid_with_artDialog.png)
需要额外引用的文件:
<link rel="stylesheet" href="../../plugins/artDialog/skins/blue.css"/>
@@ -508,4 +508,4 @@ artDialog需要引用的文件:artDialog/skins/blue.css、artDialog/jquery.art
#####14,Grid And Form with ArtDialog#####
结合ArtDialog使用,可以完成一个很好看的CRUD功能,详细可查看示例及示例源码:
-![Grid with ArtDialog](https://github.com/baishui2004/jquery.bsgrid/raw/master/documention/images/jquery.bsgrid-14_grid_and_form_with_artDialog.png)
\ No newline at end of file
+![Grid with ArtDialog](https://github.com/baishui2004/jquery.bsgrid/raw/v1.32/documention/images/jquery.bsgrid-14_grid_and_form_with_artDialog.png)
\ No newline at end of file
diff --git a/documention/README.md.html b/documention/README.md.html
index 5a4ac93..2d612e1 100644
--- a/documention/README.md.html
+++ b/documention/README.md.html
@@ -289,27 +289,30 @@
max-width: 100%
}
-jQuery.bsgrid 简单易用的jQuery Grid插件
-
-开源协议:Apache Licence 2
+捐助:支持长远发展,感谢您的认可!
-更新日期:2015-01-07
+版本:1.32
+ 协议:Apache Licence 2
+ 更新日期:2015-01-22
-Github:https://github.com/baishui2004/jquery.bsgrid/
+文档:HTML
+ PDF
+ 方法及属性使用与说明
-在线演示:http://bsgrid.oschina.mopaas.com/
+依赖:jQuery 1.4.4 ~~ jQuery 1.11.2
-在线文档:http://bsgrid.oschina.mopaas.com/documention/README.md.html
-
-文档中可能有部分图片显示不稳定(显示不出),可直接右键另存README.md.pdf到本地查看此文档说明。
1,内置多套皮肤(点击下面对应皮肤图片可查看示例页面),并可非常容易的自定义皮肤(参考Custom Blue Style)
Default Style
+ + + + |
ExtJS Gray Style
- - + + |
ExtJS Blue Style
- - + + |
|
ExtJS Access Style
- - + + |
FlexiGrid Gray Style
- - + + + |
+ Dhtmlx Sky Blue Style
+ + + |
|
Dhtmlx Sky Blue Style + | Pure Gray Style
+ + + + |
+ jqGrid Style
- - + + + |
+ EasyUI Style
+ + + + |
+
Bootstrap Style
+ + + |
Custom Blue Style
- - + + + |
+ + |
+
+
引用文件: <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/js/lang/grid.zh-CN.min.js"></script> <script type="text/javascript" src="../../builds/merged/grid.simple.min.js"></script> 实现代码: <table id="searchTable" class="bsgrid"> @@ -504,14 +556,13 @@-2,Simple Grid
pageSize: 10 }); }); - function operate(record, rowIndex, colIndex, options) { return '<a href="#" onclick="alert(\'ID=' + gridObj.getRecordIndexValue(record, 'ID') + '\');">Operate</a>'; } </script>
1,插件语言本地化文件:grid.en.min.js、grid.zh-CN.min.js、grid.zh-TW.min.js @@ -523,8 +574,19 @@+3,Simple zh-CN Grid
background-color: #ffe48d; }
+数据支持扩展渲染,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" />'; + } +
默认的是json格式,换加载XML格式数据: 方式1,全局修改加载数据格式: @@ -537,10 +599,18 @@+4,Simple XML Data Grid
pageSize: 10 });
+示例页面:Local Json Data ++
+示例页面:Local Xml Data +
支持展示后台的全部数据,分页工具条变为如下只显示总数的样式:
-
实现代码:将pageAll设置为true即可,后台数据格式与分页后台数据格式一致 $.fn.bsgrid.init('searchTable', { @@ -552,7 +622,7 @@5,No Pagation
6,No Diaplay Blank Rows
设置是否显示无数据的行,下图示例展示的是分页行大小是25,但只显示了20条数据,无数据行没有显示:
+
-实现代码:修改全局参数displayBlankRows,默认值为true $.fn.bsgrid.defaults.displayBlankRows = false; @@ -560,49 +630,64 @@6,No Diaplay Blank Rows
7,No Data
无数据时的提示:
+
-注意此提示仅当$.fn.bsgrid.defaults.displayBlankRows = false;时才会显示,为true时显示的是空行。 说明:属性displayPagingToolbarOnlyMultiPages与displayBlankRows互不影响。8,Grid With Checkbox
-bsgrid内置并不支持checkbox的直接配置,通过column列的w_render属性实现: -
+
-+
+With Custom Checkbox
-实现代码:主要部分 - <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) : ''); - } +示例页面: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 Custom9,Grid With Little Paging
似ExtJS、EasyUI类分页工具条:
+
--将grid.paging.min.css替换为grid.paging.little.min.css,并额外引入grid.paging.little.min.js(注意引用顺序),这个JS文件是对内置工具条展现的部分重写,简单的数几十行代码,充分体现了可扩展性特别强: +引入样式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>@@ -611,15 +696,19 @@10,Standard Grid
此处为了演示分页,后台使用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¶m1=param1¶m2=param2 @@ -636,12 +725,11 @@12,Export Grid
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 + $.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 @@ -656,7 +744,7 @@13,Grid with ArtDialog
特别注意:
JS原生的alert、confirm、prompt方法是阻塞的,而使用artDialog覆盖的alert、confirm、prompt方法是非阻塞的,artDialog覆盖的方法是用回调方式实现阻塞的等待执行代码效果,详细可参看示例:Pop with ArtDialog
- +需要额外引用的文件: <link rel="stylesheet" href="../../plugins/artDialog/skins/blue.css"/> @@ -675,7 +763,7 @@13,Grid with ArtDialog
14,Grid And Form with ArtDialog
结合ArtDialog使用,可以完成一个很好看的CRUD功能,详细可查看示例及示例源码:
+
-