Git Product home page Git Product logo

baishui2004 / jquery.bsgrid Goto Github PK

View Code? Open in Web Editor NEW
107.0 12.0 45.0 9.06 MB

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

Home Page: http://thebestofyouth.com/bsgrid/

License: Apache License 2.0

HTML 20.16% JavaScript 61.34% CSS 18.50%

jquery.bsgrid's Introduction

jQuery.bsgrid - 简单实用、功能丰富、易扩展的jQuery Grid插件

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

源码:Github     演示:皮肤示例文档 版本:1.38-preview   协议:Apache Licence 2   更新:2016-01-21
依赖:jQuery 1.4.4 ~~ jQuery 1.12.2   支持:IE6+、Chrome、Firefox等

QQ群交流:254754154    捐助:支持长远发展,感谢您的认可!

皮肤效果

内置多套皮肤(点击图片查看示例页面),并可非常容易的定制皮肤[示例:Custom Blue Style]

bsgrid的由来

  首先,解释插件名称为何叫bsgrid,是因为作者常用bs开头的字符做英文账号的缘故。bsgrid的诞生因为主流插件、框架的grid使用或扩展比较复杂,而本插件作者力图开发一款使用简单、功能实用、容易扩展的grid控件,目前已初步实现此目标。

bsgrid的特点

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

关于主流Grid

整体评论主流grid:
  1,比较适用于内部系统,对于外部系统适用而言,想要改变皮肤样式,字体大小等都非常困难;
  2,过度封装,造成了其扩展性能不是很好,并且其methods、properties很多,上手不容易;
  3,大多数不提供多行表头、表格聚合、不分页表格、本地数据等实用却强大的功能。

分别评论几个主流grid,个人见解:
  1,ExtJS,功能丰富,封装好,但属重量级产品,需要加载大体积文件,且响应速度较慢,需商业授权,一般用于内部系统;
  2,DHtmlx,同样功能丰富,封装好,不过其可以根据所需要的模块进行加载,速度方面快于ExtJS,需商业授权,由于其样式不易修改,同样一般用于内部系统;
  3,EasyUI,基于jQuery,语法使用jQuery,却部分地方像ExtJS的写法,在不需其源码的情况下无需商业授权,因无源码而不方便按需模块化加载,也很难改变皮肤样式;
  4,jQGrid,基于jQuery,开源免费且功能特别强大,但同样其样式不易修改;
  5,Flexigrid,基于jQuery,功能逊色,但轻量级,methods、properties较少,不失为想用ExtJS Grid或EasyUI Grid却难以上手这两者的另外一个选择。

jquery.bsgrid's People

Contributors

baishui2004 avatar lxp135 avatar ryming avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

jquery.bsgrid's Issues

文档地址

打开文档的网址是否不正确,跳转到daocloud了

分页工具条出现和表格宽度不一致的情况

在使用过程中发现分页工具条和数据表宽度不一致,分析后发现是滚动条导致表格初始化前后宽度不一样,影响到js赋予分页工具条的宽度值,有两种办法可以处理:

  1. 在数据表显示完成后再设置分页工具条的宽度;

2.在init中新增滚动条监听事件:

$(window).scroll(function(){$("#" + options.pagingOutTabId).width($("#" + gridId).width());});
因为对源码研究不是很透彻,所以我选取了第二种办法,期待能有更好的改进。
另:这个插件超级好用。

建议支持列横向固定

这个需求应该有很多地方可以用到。
比如一个列表中存在一个操作列,而这个列表的字段非常多。
操作列则在最后一列上,上面有一个修改和删除按钮。
这样我就想在列表横向滚动的时候,操作列不动,一直显示在页面上。

希望能支持自定义某一列或几列可以横向固定显示在页面上。

建议添加一个接口重新加载localdata

建议添加一个接口重新加载localdata

类似于:

reloadLocalData : function(dataType ,localData){
        this.options.settings.localData = localData;
        if (dataType == 'json') {
            this.loadGridData(dataType, $.fn.bsgrid.buildData.gridData(dataType, curPage, localData), options);
        } else if (dataType == 'xml') {
            this.loadGridData(dataType, '<xml>' + $.fn.bsgrid.buildData.gridData(dataType, curPage, localData) + '</xml>', options);
        }
        return;
    }

通过
gridObj.reloadLocalData (dataType,localData);来调用

关于数据格式化

bsgrid列数据,怎么支持格式化?数据库里面存放的可能只是编码,需要在前台手动进行格式化,但在API中没有找到对应的属性设置
比如后台是long值的日期,我需要在grid中格式化成yyyy-MM-dd类型的

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.