baukh789 / gridmanager Goto Github PK

首先感谢提供了一个这么好用的表格插件！
我准备动态获取数据，但是没有看懂demo中ajax_url指向的数据源的格式是什么，请问能否说明一下。谢谢。

将绑定类方法的绑定与事件回调分开，以方便单元测试

没有看到onSelectAll之类的方法呢，怎么监听用户是否多选？

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

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

ie不支持，无法生成

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

问题如标题 谢谢

其他功能完好，只是没法实现排序，不知道为什么，我的配置是参照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>';
			}
		}
		]
	}

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

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

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

如题；
蛋疼的产品非要提这种sb的需求，要进页面的时候是空白的，非要点击查询再查询出数据来。
欢迎屌大的大佬帮小弟解决下。

在非全选的情况下，getCheckedData和getCheckedTr的结果是空的

请问下，当我跳转到了第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);】,也没有生效。还请麻烦讲解一下~~

现在的数据格式如下：
{
"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不支持对象？ 怎么解决？

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

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

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

请问有什么办法可以判断某列是否显示吗?

我觉得是不是可以加有个配置项，实现单选配置啊？万分感谢

这个集成到springmvc中会好移植吗？

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

输入筛选条件，点击查询，然后点击排序，发现排序后的数据是全部数据

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

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

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              //总条数
        }
        */
    }
  });

判断是否在IE下如果在那么将 remove() 改成 removeNode(true) 就能完美支持IE10以上了

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

点击排序的时候，总页码，变成 undefined

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

没有实现分页，同时，两页的数据完全一样，不晓得哪里出错了？求指教

其他都很好，就是项目会用到搜索框，请问有这个API函数吗？

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的值 了。我就能进行后续操作了。 请指教，我该怎么操作。

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

你好，请问下，在分页事件执行前，如何方便更改query参数？比如，表格初始化条件为a,b,c。后面分页时，我想增加查询条件为a,b,c,d,，API有没有考虑增加这个情况？

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

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

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

首先，非常感谢插件作者提供了一个这么好的插件，也非常感谢你的耐心解答，现在我遇到了一个问题，先描述下：
我有三个表格需要做，也有三个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切换想要切换成第二个表）表格没有任何变化，请问我这样做有什么问题导致失败呢？
谢谢！

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

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

我需要将表格中的null装换为空字符串或者“-”，但是如果每个都重新格式化的话又不太好，请问有什么方法可以解决吗

query参数设置是{key:value}格式，如何发送类似jquery ajax中的dataType='json'以及发送json格式参数

能不能在checkbox上绑定该行的一些数据

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

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