jQuery Grid插件 jQuery.bsgrid 1.32 发布,中文文档及更简单的示例

bs2004
 bs2004
发布于 2015年02月04日
收藏 96

jQuery.bsgrid 简单轻量易扩展的jQuery Grid插件

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

本次更新,中文文档、更简单使用的示例展示。

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

插件特点:
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>
本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动共创开源社区。
转载请注明:文章转载自 OSCHINA 社区 [http://www.oschina.net]
本文标题:jQuery Grid插件 jQuery.bsgrid 1.32 发布,中文文档及更简单的示例
加载中

最新评论(27

bs2004
bs2004

引用来自“开源石头”的评论

请问bsgrid如果要跟后台action交互的话,对后台action有什么要求吗?应该以什么类型返回结果?或者说action应该怎么返回数据给bsgrid?,现在我在jsp页面通过
<script>
var gridObj;
$(function(){
gridObj = $.fn.bsgrid.init('tableid',{
url:"/RtCard.do?_actionType=query",
pageSizeSelect:true,
pageSize:10,
rowHoverColor:true
});
});
</script>
后台对应的query的action是采用ajax的返回值模式,把list类型的数据通过JSONArray进行处理返回。但是在前端没有任何响应,而且进入页面的时候,也没有debug到对应的action类中(因为我是采用调试模式在eclipse的)。

引用来自“开源石头”的评论

还有对应的文件也引用进去了,jquery是1.11.1版本的,bsgrid是1.36版本的。
参考官网首页,数据格式参考:http://bsgrid.coding.io/examples/grid/data/simple.json按这个文件里的格式返回数据
开源石头

引用来自“开源石头”的评论

请问bsgrid如果要跟后台action交互的话,对后台action有什么要求吗?应该以什么类型返回结果?或者说action应该怎么返回数据给bsgrid?,现在我在jsp页面通过
<script>
var gridObj;
$(function(){
gridObj = $.fn.bsgrid.init('tableid',{
url:"/RtCard.do?_actionType=query",
pageSizeSelect:true,
pageSize:10,
rowHoverColor:true
});
});
</script>
后台对应的query的action是采用ajax的返回值模式,把list类型的数据通过JSONArray进行处理返回。但是在前端没有任何响应,而且进入页面的时候,也没有debug到对应的action类中(因为我是采用调试模式在eclipse的)。
还有对应的文件也引用进去了,jquery是1.11.1版本的,bsgrid是1.36版本的。
开源石头
请问bsgrid如果要跟后台action交互的话,对后台action有什么要求吗?应该以什么类型返回结果?或者说action应该怎么返回数据给bsgrid?,现在我在jsp页面通过
<script>
var gridObj;
$(function(){
gridObj = $.fn.bsgrid.init('tableid',{
url:"/RtCard.do?_actionType=query",
pageSizeSelect:true,
pageSize:10,
rowHoverColor:true
});
});
</script>
后台对应的query的action是采用ajax的返回值模式,把list类型的数据通过JSONArray进行处理返回。但是在前端没有任何响应,而且进入页面的时候,也没有debug到对应的action类中(因为我是采用调试模式在eclipse的)。
开源石头
看了一下demo,感觉该插件grid是自己触发跟后台交互数据的?那如果是通过button用ajax跟后台交互数据获取到的数据该怎么填充到grid中呢?这个通过button获取到的数据应该算是本地数据了?具体该怎么设置?请大神指教。谢谢!
bs2004
bs2004

引用来自“chenshao”的评论

不支持多级别吗???

引用来自“bs2004”的评论

多级别是什么意思?

引用来自“chenshao”的评论

不好意思,描述得不够专业。
TreeGrid的意思。
目前不支持54
陈少鑫
陈少鑫

引用来自“chenshao”的评论

不支持多级别吗???

引用来自“bs2004”的评论

多级别是什么意思?
不好意思,描述得不够专业。
TreeGrid的意思。
bs2004
bs2004

引用来自“chenshao”的评论

不支持多级别吗???
多级别是什么意思?
陈少鑫
陈少鑫
不支持多级别吗???
返回顶部
顶部