Git Product home page Git Product logo

baukh789 / gridmanager Goto Github PK

View Code? Open in Web Editor NEW
818.0 31.0 140.0 9.61 MB

🌐 快速、灵活的对Table标签进行实例化,让Table标签充满活力。

Home Page: https://gridmanager.lovejavascript.com

License: MIT License

CSS 0.67% HTML 16.64% JavaScript 44.25% Less 3.76% TypeScript 34.69%
gridmanager grid table jqgrid react-grid angular-grid vue-gridview jquery-grid jquery-table angular-table

gridmanager's Introduction

GridManager [一套代码多框架运行]

快速、灵活的对Table标签进行实例化,让Table标签充满活力。

image Build Status npm version npm downloads coverage

优势

在支持常见功能的前提下,提供了如: 导出、打印、列配置、右键菜单、行列移动、用户偏好记忆等提升用户体验的功能。

内置基础类库jTool, 对原生DOM提供了缓存机制。

支持在原生JS、jQuery、Angular 1.x、Vue、React环境下使用,一套代码多框架运行。

在框架满天飞的时代,助力前端开发人员用更少的API做更多的事情。

实现功能

功能 描述
宽度调整 表格的列宽度可进行拖拽式调整
位置更换 表格的列位置进行拖拽式调整
配置列 可通过配置对列进行显示隐藏转换
表头吸顶 在表存在可视区域的情况下,表头将一直存在于顶部
列固定 指定某列固定在左侧或右侧
排序 表格单项排序或组合排序
分页 表格ajax分页,包含选择每页显示总条数和跳转至指定页功能
用户偏好记忆 记住用户行为,含用户调整的列宽、列顺序、列可视状态及每页显示条数
序号 自动生成序号列
全选 自动生成全选列
导出 静态数据导出、动态数据导出、已选数据导出
打印 当前页打印
右键菜单 常用功能在菜单中可进行快捷操作
过滤 通过对列进行过滤达到快速搜索效果
合并 同一列下相同值的单元格可自动合并
树表格 可通过配置快速实现树型表格结构
行移动 可通过配置快速实现行位置移动
嵌套表头 无层级限制配置复杂的表格实例

安装

npm install gridmanager --save

安装文件目录及说明

  • index.css 样式文件,原生及框架使用同一份样式文件
  • index.js 原生使用的js文件
  • vue2 vue2框架使用的js文件
  • react react框架使用的js文件
  • angular-1.x.js angular1.x使用的js文件

引用

ES6+

import 'gridmanager/index.css'; // 各框架通过样式文件
import GridManager from 'gridmanager'; // 原生js引用方式
import GridManager from 'gridmanager/vue2'; // vu2引用方式
import GridManager from 'gridmanager/react'; // react引用方式
import GridManager from 'gridmanager/angular-1.x'; // angular-1.x引用方式

ES5

<link rel="stylesheet" href="gridmanager/index.css">
<script src="gridmanager/index.js"></script>

API

Demo

框架版本介绍

示例

使用默认配置

<table></table>
document.querySelector('table').GM({
    gridManagerName: 'demo-baseCode',
    ajaxData: 'https://www.lovejavascript.com/learnLinkManager/getLearnLinkList',
    ajaxType: 'POST',
    query: {pluginId: 1},
    columnData: [
        {
            key: 'name',
            text: '名称'
        },{
            key: 'info',
            text: '使用说明'
        },{
            key: 'url',
            text: 'url'
        }
    ]
});

使用分页

<table></table>
document.querySelector('table').GM({
	gridManagerName: 'demo-ajaxPageCode',
    ajaxData: 'https://www.lovejavascript.com/learnLinkManager/getLearnLinkList',
    ajaxType: 'POST',
    query: {pluginId: 1},
    supportAjaxPage: true,
    columnData: [
        {
            key: 'name',
            text: 'name'
        },{
            key: 'info',
            text: 'info'
        },{
            key: 'url',
            text: 'url'
        }
    ]
});

调用公开方法

// 刷新
GM.refreshGrid('demo-ajaxPageCode');

// 更新查询条件
GM.setQuery('demo-ajaxPageCode', {name: 'baukh'});

其它更多请直接访问API

数据格式

这是标准格式, 如果返回格式不同。可以通过参数或responseHandler进行修改。 具体请参考API

{
    "data": [
        {
            "name": "baukh",
            "age": "28",
            "createDate": "2015-03-12",
            "info": "野生前端程序",
            "operation": "修改"
        },
        {
            "name": "baukh",
            "age": "28",
            "createDate": "2015-03-12",
            "info": "野生前端程序",
            "operation": "修改"
        },
        {
            "name": "baukh",
            "age": "28",
            "createDate": "2015-03-12",
            "info": "野生前端程序",
            "operation": "修改"
        }
    ],
   totals: 1682
}

皮肤

以下皮肤为第三方提供,如果你也有过好的实现,请提交至 issues

贡献者

BoWang816
luchyrabbit
xtfan21
gaochaodd
silence717
heriky

License

浏览器兼容

  • Firefox >= 59, Chrome >= 56,Edge >= 16, Safari >= 13

微信讨论群

使用问题可扫码加群讨论,BUG类问题请通过issues提交。

gridmanager's People

Contributors

baukh789 avatar bowang816 avatar eakerzt avatar luchyrabbit avatar luckfunc avatar silence717 avatar sitonghui 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  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

gridmanager's Issues

关于翻页查询后跳转到第一页的问题

请问下,当我跳转到了第4页,然后进行搜索,数据只有不到两页,这样当前显示为空白,还得自己输入跳转到第一页,如何自动跳转到第一页?类似这个问题https://github.com/baukh789/GridManager/issues/24,我看到API说【5. 可以通过在参数query中添加cPage字段对分页进行控制,如=> {cPage: 1}】,但是前面有【1. query的key值如果与分页及排序等字段冲突, query中的值将会被忽略.】,另外,我尝试在【table.GM('setQuery', _query)】后进行【table.GM('refreshGrid', true);】,也没有生效。还请麻烦讲解一下~~

关于Gridmanger 获取每行数据

var rowVal = $('#tableWrap table').GM('getRowData', 'tr');
我以前是这样就可以获取 每行的数据 console.log("rowVal:"+rowVal.id)
然后就可以获取想要的数据 现在3.0版本的 这样为啥获取不到?

列表导出

在点击右键导出列表时,发现只能导出表头,数据都没有导出来,请问是怎么回事呢

GridManager不支持后端分页吗

Demo中分页示例 ajax请求的json数据是全部的,只有一个totals字段,分页由前段完成吗?如果数据量很大,有没有后端分页的功能

兼容ie问题

IE不支持jquery的某些方法比如说remove(),导致表格无法加载,类似这些该怎么解决

无法实现排序功能

其他功能完好,只是没法实现排序,不知道为什么,我的配置是参照demo做的。这是我的配置文件

 [{
		supportRemind: true
		,i18n:'zh-cn'
		,supportConfig: false
		,disableCache:false
		,disableOrder:false
		,supportSorting: true
		,supportDrag:true
		,supportCheckbox:false
		,supportAjaxPage:true
		,ajax_data:moveableTitle.getList()
		,ajax_url: 'data/test.json'
		,ajax_type: 'POST'
		,pageSize:10
		,query: {ex: '用户自定义的查询参数,格式:{key:value}'}
		,columnData: [{
			key: 'name',
			width: '20%',
			text: '名称'
		},{
			key: 'type',
			width: '50%',
			text: '类型',
			sorting: ''
		},{
			key: 'createDate',
			sorting: '',
			width: '20%',
			text: '创建时间'
		},{
			key: 'display',
			sorting: '',
			width: '20%',
			text: '显示'
		},{
			key: 'content',
			text: '内容',
			width:'10%'
		},{
			key: 'operation',
			width: '10%',
			text: '操作',
			template: function(operation, rowObject){//operation:当前key所对应的单条数据;rowObject:单个一行完整数据
				console.log(rowObject)
				return '<a name='+rowObject.key+' type="delete">删除</a><span>  </span><a name='+rowObject.key+' type="toggle">显示/隐藏</a>';
			}
		}
		]
	}

一个表格通过tab切换获得不同参数形成多个表格

首先,非常感谢插件作者提供了一个这么好的插件,也非常感谢你的耐心解答,现在我遇到了一个问题,先描述下:
我有三个表格需要做,也有三个tab键,点击每个tab可以切换到自己的表格。
如果给每个表格都写上自己一套逻辑代码有点冗余,所以我想着能不能只用一个表格,通过每次传参不同使表格渲染出不同的数据形成三个不同的表格。
暂时的思路:
点击单个tab的时候往query里面传值(后端通过传入的customerStatus进行判断返回哪个类型的值,总共有三个类型:0,1,2),可以从后端请求到不同的值并重新加载页面,但是在这个之前得初始化表格,改写columnData里面的数据(即对应的键)。
代码如下:

html:
<table id="allInfoTable" ></table>

js:
`table.GM({

    ....
    query: {customerStatus: 0},
    columnData: [{
	 		key: 'name',
			remind: 'the name',
			width: '10%',
			text: '姓名',
			sorting: ''
		},{
			key: 'organization',
			remind: 'the organization',
			text: '单位'
		},{
			key: 'position',
			remind: 'the position',
			width: '10%',
			text: '职位'
		}
     }]

})
以上是初始化表格渲染的第一个表格,那么我点击tab切换到第二个表格时: 方法是: 向后端传入参数customerStatus为1获得第二个表格的数据,然后初始化表格,在初始化表格的回调函数里执行函数,即往columnData里面传值把表格的字段改成只有一个名字的表。 js:
$(".getType2").on("click",function(){

            document.querySelector('#allInfoTable').GM('setQuery',{
               'customerStatus': '1'
            },function(){
                document.querySelector('table').GM('init', {columnData:[{
                        key: 'name',
                        remind: 'the name',
                        width: '10%',
                        text: '姓名',
                        sorting: ''
                }]}, function(callback){
                        console.log("callback",callback);
                })
            });

})`

但是这样做(点击了tab切换想要切换成第二个表)表格没有任何变化,请问我这样做有什么问题导致失败呢?
谢谢!

karma配合ES6的问题

您好,一直把您的项目当作自己的一个教程,受益匪浅;
看到您最近添加了单元测试的内容,想了解下您是如何实现在断言中使用ES6语法,比如import之类的?

datakey 不能是一个对象么?

现在的数据格式如下:
{
"status":"success",
"totals":68,
"data":[
{"id":1,"name":"gridManager"},
{"id":2,"name":"gridManager2"}
]
}
==>datakey:"data"
而实际上可能如下:
{
"status":"success",
"totals":68,
"data":[
{
pagesize:5,
total:10,
list:[
{"id":1,"name":"gridManager"},
{"id":2,"name":"gridManager2"}
]
}
]
}
==>datakey:"data.list"

而datakey不支持对象? 怎么解决?

关于跨域的设置

怎么设置跨域请求带上cookie
jquery ajax请求是这样的 如下
crossDomain: true,
xhrFields: {
withCredentials: true
},

请教一个问题 pageSize设置后没有生效

配置了pageSize没有生效,每次进入页面还是显示的30 但是我配置的是10
我是这样配置的
... ,ajax_type: 'POST' ,pageSize:10 ,sizeData:[10,20,30] ...

是我哪里还没有配置好吗?
谢谢

表格的单元格宽度设置

表格的单元格的宽度是否可以强制设置为某个百分比,目前我在使用上发现很多时候设置完百分比宽度后,都不起作用。并且我也确定该宽度下 内容均可显示完整

列居中问题

使用align属性时,发现不起作用,检查源码后发现是因为在css中给td设置了(text-align:left)样式,去掉该样式align属性就起作用了

请教两个问题,1后台接收不到cPage和pSize的参数问题,2怎样获得用户选择的复选框对应的值。

jsp 代码 : var table = document.querySelector('table'); table.GM({ supportRemind: true ,gridManagerName: 'test' // ,disableCache:true ,isCombSorting: true ,height: '300px' ,supportConfig: false ,supportExport:false ,supportAjaxPage:true ,supportSorting: true ,ajax_url: '${ctx}/exBidRegister/getBidderProductList' // ,ajax_headers: {'header-test': 'baukh'} ,ajax_type: 'post' ,query: {} ,pageSize:10 ,dataKey: 'list' // 注意: 这里是用来测试responseHandler 是否生效; 数据本身返回为data, 而在这里我把数据名模拟为list, 再通过responseHandler去更改 ,totalsKey: 'count' // 指定总数 key 为 number ....});

后台Controller 代码如下 :

@responsebody @RequestMapping(value = "getBidderProductList", method = RequestMethod.POST) public String getBidderProductList( BidderProduct bidderProduct, HttpServletRequest request,HttpServletResponse response, @RequestParam(required = true, defaultValue = "1") int cPage, @RequestParam(required = true, defaultValue = "10") int pSize) { ...... }

经查看ajax 发送的post的 参数如下: pSize=10&cPage=4&tPage=5&tSize=47&sort_createDate=DESC 可是 当 点击其他页码的时候可以进入我写的Controller 方法,可是 就是 接收不到 cPage 和pSize参数。

2.我查看API中 发现有getCheckedData()方法,但是怎么触发调用这个方法呢。 还有我想将数据记录的id隐藏在checkbox中,这样我在点击 选中时 就可以得到这个id的值 了。我就能进行后续操作了。 请指教,我该怎么操作。

分页数据量大时卡顿

分页数据量大时,列表滚动会卡顿,实测查询5000条分页时,就卡了,尽管实际数据不到5000条,请核实,谢谢。

关于初次加载 直接跳转指定页码

由于页面大小问题 页码只能显示前几条 12345****100 最后一页
但我想在页面初次加载时跳转到指定页码
$("ul.pagination").find("li[cPage="+cPage+"]").click();
但当cPage为
里面的页码时 是不能跳转的
我想知道还有什么办法解决这个问题 谢谢

一个页面多个表格出错

我的一个页面里有多个表格 有时候第一次近来表格 都能够正常显示 但再次刷新就会报错
如下
Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Element': 'th[th-name=]' is not a valid selector
请问是什么问题

关于点击查询按钮之后,refresh重新加载的问题

rawValueGridTable.GM('setQuery', _query).GM('refreshGrid', function () {
                    			console.log('搜索成功...');
                    	});

这一段代码目前看来,刷新的时候是默认记录之前点击页的,如果做到完全刷新整个面板,体验可能会更好

宽度自适应BUG

<div style="width:200px;�padding:20px"><table></table></div>
1、如果表格父级容器的padding为0的话,表格的宽度可100%自适应不会出现滚动条
2,如果表格父级容器设置padding的话,表格的宽度会出现横向滚动条

初步判定应该是在计算表格列宽度时没有把表格的父级padding减去的原因。

某一列数据能固定在后面吗?

当表格中列数很多时,会挤出滚动条,一般对于每一行数据的操作会放在最后一列,此时,需要滚动滚动条才能找到操作列,可能导致操作错误。

分页条无法显示

GridManager的作者你好,我对你的GridManager的插件非常感兴趣,这个插件功能十分强大。不过我在使用的过程中出现了一些问题,我的分页栏显示不出来,我认为我该加的参数(supportAjaxPage)都添加了但是没有效果。我想请问下作者如何解决。

GridManager使用详解

首先介绍一下该插件的使用场景和实现功能
使用场景

适用于管理平台的数据展示列表,通过该插件可以更简约的实现一些前端交互及与列表相关的功能实现。
功能实现

1、列项的宽度调整
2、列位置的顺序调整
3、列的展示与隐藏
4、本地存储机制,插件会对用户已经调整的宽度、列的展现状态等信息进行存储,再次进入时会根据存储
5、根据列进行排序,支持单列与多列的排序
6、分页功能,含常用的分页功能
7、国际化,默认支持中英文两种语言,可通过配置项进行其它语种的设定。进行回显。
以上的介绍可能过于文字化,接下来依次对这些功能进行code展示。

最简易的实现
$('table').listManager();
对的,就是这么简单的一句代码就可以实现刚才功能介绍中所示的1-4项。
这四项都是插件默认支持的项,其它项则需要借助于配置项。

配置项介绍:

配置分为两种;具体的参数项请参考http://www.lovejavascript.com/#!plugIn/listManager/index.html中的参数说明。
针对于单表的配置:以参数传递的形式进行配置。
ex: $('table').listManager({i18n: 'en-us'})
针对于全局表格的配置:通过全局配置变量listManagerConfig或$.fn.listManager.defaults进行设定。

  ex: window.listManagerConfig = {i18n: 'en-us'};
  ex: $.fn.listManager.defaults = {i18n: 'en-us'};

功能介绍中的前四项为纯粹的前端特效,后三项为存在数据交互,正因为这种差异,后三项需要进行配置才可以使用。 下面进行分别介绍
国际化实现:

国际化相对于前四项的纯前端特效而言,需要进行一些简单的配置。
通过参数i18n进行配置使用的语种,默认使用的是中文简体
通过textConfig配置插件中的文本信息及各语种所对应的文字,自带中文简体与美式英语两个语种的文本。
如仅需要中英两种语种,只需对参数i18n进行配置即可。
如需扩展可对textConfig进行配置,textConfig所支持的默认项如下,依照默认项的格式进行配置将会对默认项进行覆盖。

   ex: $('table').listManager({
             i18n: 'en-us',
            'config-action': {
                'zh-cn':'配置表格',
                'en-us':'The configuration form'
            }
            ,'first-page': {
                'zh-cn':'首页',
                'en-us':'first'
            }
            ,'previous-page': {
                'zh-cn':'上一页',
                'en-us':'previous'
            }
            ,'next-page': {
                'zh-cn':'下一页',
                'en-us':'next '
            }
            ,'last-page': {
                'zh-cn':'尾页',
                'en-us':'last '
            }
            ,'dataTablesInfo':{
                'zh-cn':'此页显示 {0}-{1} 共{2}条',
                'en-us':'this page show {0}-{1} count {2}'
            }
            ,'goto-first-text':{
                'zh-cn':'跳转至',    
                'en-us':'goto '
            }
            ,'goto-last-text':{
                'zh-cn':'页',
                'en-us':'page '
            }
       });

分页功能实现:

分页功能默认处于关闭状态,通过参数supportAjaxPage:true进行开启,除止之外还需要配置pageCallback,通过参数名称就可以看出来这是在触发分页后的一个回调函数,当然也可以叫做分页事件。该配置项接收分页事件,在这个函数中会传入一个参数,该 参数包含一些必要的分页信息。
具体配置如下:

ex: $('table').listManager({
    supportAjaxPage: true,
    pageCallback: function(query){
        //query 中包含当前的分页信息:cPage(当前页),pSize(每页显示条数)
        //在该callback中 对列表数进行重新请求 并对列表及分页进行数据重填
        //1、请求后端数据
        // $.ajax() ....
        //2、列表数据重填
        var thtml = ''; //拼装好的数据
        var _tbody = $('table tbody');
         _tbody.html(thtml)           
        //3、分页数据重新渲染
        this.resetPageData(table, pageData);
        /*
        其中pageData,需要通过返回数据进行设置,存在四个值,如下所示:  
        pageDate = {        
            tPage: 10,              //总页数
            cPage: 1,               //当前页 
            pSize: 10,              //每页显示条数
            tSize: 100              //总条数
        }
        */
    }
  });

排序功能实现:

排序与分页类似,不再进行描述,配置如下:

   ex: $('table').listManager({
    supportSorting: true,
    isCombSorting: true,
    sortUpText:'up',   //配置升序排序的文本信息
    sortDownText:'down', //配置降序排序的文本信息
    sortingCallback: function(query){
        //query 中包含当前的排序信息
        //格式为{th-name: sortUpText/sortDownText}  th-name为th上配置的th-name,
        //在该callback中 对列表数进行重新请求 并对列表及分页进行数据重填
        //1、请求后端数据
        // $.ajax() ....
        //2、列表数据重填
        var thtml = ''; //拼装好的数据
        var _tbody = $('table tbody');
         _tbody.html(thtml)           
        //3、分页数据重新渲染
        this.resetPageData(table, pageData);
        /*
        其中pageData,需要通过返回数据进行设置,存在四个值,如下所示:  
        pageDate = {        
            tPage: 10,              //总页数
            cPage: 1,               //当前页 
            pSize: 10,              //每页显示条数
            tSize: 100              //总条数
        }
        */
    }
  });

拖拽功能

当表格在x轴上有滚动条时,拖拽列,该列不会紧跟鼠标位置移动,而是跟鼠标位置在x轴方向上有一定距离的位移

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.