lidatui / mmgrid Goto Github PK
View Code? Open in Web Editor NEWmmGird是一个基于jQuery的表格控件
Home Page: http://lidatui.github.io/mmGrid
mmGird是一个基于jQuery的表格控件
Home Page: http://lidatui.github.io/mmGrid
var mmg = $('.mmg').mmGrid({
height: 480
, cols: cols
, url: 'ROOT/index.php/Data/get_json'
, method: 'get'
, remoteSort:false //如何使用客服端排序需要改成true
//, items: items //客户端数据
, sortName: 'date' //排序的字段名。字段名的值为列模型设置的sortName或name中的值。
, sortStatus: 'desc' //排序方向。
, multiSelect: true //数据使用本地对象数组
, checkCol: true //表格显示checkbox
, indexCol: true //列索引
, showBackboard: true //是否显示背板 默认true
, nowrap: true //表格显示的数据超出列宽时是否换行。
, indexColWidth: 20 //表格索引列宽度
, fullWidthRows: true //true:表格第一次加载数据时列伸展,自动充满表格。
, autoLoad: true
, params:{Pa:'10'}
, plugins: [
$('#pg').mmPaginator({})
]
代码如上,分页不好用,跟演示站一样,点击下一页时,只有列(indexCol)在动,而数据没有动,大神帮帮忙。看看这有啥问题
在 IE6 访问 http://miemiedev.github.io/mmGrid/examples/index.html
第 10 例子的表格数据不出来.
即 height:auto 后, IE6 不出表格内容.
If I've already a table element, and it already has data in it. Does mmGrid convert table to grid?
单击CHECKBOX选中行 不触发cellSelected
这算BUG 么?
感觉这样好看一些。
为了更方便定义多行表头,我采用了jquery.easyui的定义形式,它是由多个[]组成。原来mmGrid的定义是采用cols:[]的定义方式。采用多行[]定义的方式,要求在相应的单元格处定义相应的colspan和rowspan,如果不定义缺省为1。基本上和定义表格差不多。为了实现这种定义,改动代码挺多。同时为了减少表头的重复计算,在初始化时对表头只计算一次。
examples也进行了修改。目前如果只有一行表头时,可以兼容以前的定义。同时我fork的仓库中还有treeGrid的示例,见examples2.html。
供参考。
如果mmGrid再实现固定列,我觉得这个表格的功能已经很完善了。
我现在是把css里 .mmGrid .mmg-btnBackboardDn加入z-index改成2
今天在处理row的生成时,我需要在每个cell生成时添加一个wrapper用的div,所以修改了_rowHtml中的代码。但是发现checkbox的click事件处理有问题了,查了代码发现是因为:
$body.on('click','tr > td .mmg-check',function(e){
e.stopPropagation();
var $this = $(this);
if(this.checked){
that.select($this.parent().parent().parent().index());
}else{
that.deselect($this.parent().parent().parent().index());
}
});
这里通过 .parent()
假定了内容和父元素 <tr>
的层次关系,因此当我添加了新的一层时就不正确了。简单的方法是再添加一个 parent()
但是无法通用,于是我使用了 parents()
,代码如下:
$body.on('click','tr > td .mmg-check',function(e){
e.stopPropagation();
var $this = $(this);
if(this.checked){
that.select($($this.parents('tr')[0]).index());
}else{
that.deselect($($this.parents('tr')[0]).index());
}
});
如果可以,建议按上面进行修改。
第一次进入页面,表格已经缓存了mmGrid( var data = this.data('mmGrid'); ),
点击链接更换url参数不起作用,不能动态更新表格的数据
myTable.load({
url:'loadCode.html?code='+code
});
cellSelected的触发与CHECKBOX的 CLICK事件没关联????
http://miemiedev.github.io/mmGrid/examples/api.html
手册中multiSelect参数的解释复制错了
可以动态调整表头功能很方便,不过有时不想让这个表头可调,有没有一个开关项可以把这个功能关闭?
在 浏览器模式IE9(B), 文档模式(M):IE9标准 下,表格一直在加载,显示 正在载入...
现在好象高度必须设置一个值,能不能设置为实际的高度,即没有纵向滚动条。
之前有位同事使用DataTable实现过类似excel的功能,可以进行列搜索,和列显示和隐藏等。
请问动态添加子任务的时候,子任务显示错乱,有的子任务显示,有的子任务不显示,怎么解决啊?
trHtml.push('"><span class="');
if(opts.nowrap){
trHtml.push('nowrap');
}
trHtml.push('">');
这里每个单元格都使用 span
来包裹内容,不过个人感觉使用 div
是不是会更好一些?
是不是页面html结构上需要注意什么?
还有如果在弹出框(如art dialog)里展示mmgrid,fullWidthRows=true设置无效
数据有47条,分页显示1页且呈灰色字体,无法点击,总条目显示0条记录
请问如何才能使得mmPaginator分页生效,并且动态获取总条数?
呈现方式, 在分组里,当有分组内容有两个或者更多的时候.将前面一个分组内一个栏目隐藏.
此时后面一个分组项目里的内容会跑的前一个分组里面去.
标题栏要和下面的行区分一下吧。还有采用什么协议?
当列标题过长时,不是显示为 ...
而是超出当前单元格宽度了。
建议在表格中增加一个可选的footer区域,实现某些列数据汇总的功能,如求和、平均值、最大值、最小值等。
当显示checkbox列的时候,选择“全选”的checkbox下面所有行的checkbox都全选了,但是去掉某行的checkbox选中状态之后,“全选”的checkbox没有去除选中状态。
我看到
MMGrid.prototype = {
_initLayout: function($el){
var $elParent = $el.parent();
var elIndex = $el.index();
$el就是原始的table元素,但是后面 this
没有保存,是否可以在这里面加一个如:
this.$element = $el;
plugins : [
$('#paginator11-1').mmPaginator()
]
这个要load吧,具体携带参数格式之类的,有没有实例。
看到mmGrid有indexCol的功能,不过发现如果动态修改表格行,这个计数将不正确。所以,可以考虑写一个通用的更新index的函数,在有变化时进行更新处理。
第一次进入页面,load mmGrid以后,点击链接更换url后,mmGrid无法更新数据。后一次load 需要传url和参数,怎么传才能更新数据,或者刷新新的数据。
如果有可能可以考虑实现。不过这一功能可能对结构影响效大。
以前我也是习惯写回调的方式,但这样需要在options中配置回调函数。在bootstrap中,基本上都是使用event的方式来处理。在我写的treegrid插件中也是采用了事件。是否mmGrid也可以使用事件的方式,这样感觉处理会更简单和通用一些。关键是有可能同时绑定多个事件处理函数。
@miemiedev mmGrid有类似excel中单元格批注的功能吗?谢谢。
建议可以直接支持将数据导出成XML或EXCEL的xls、xlsx功能。
如下分组表头:
{title:'人员信息', align: 'center', cols:[
{ title:'姓名', name:'sName' ,width:50, align:'left',sortable:true},
{ title:'性别', name:'sSex' ,width:30, align:'center',sortable:true},
{ title:'出生日期', name:'sBirth' ,width:65, align:'center',sortable:true},
{ title:'民族', name:'sNation' ,width:50, align:'center',sortable:true,hidden:true},
{ title:'政治面貌', name:'sParty' ,width:60, align:'center',sortable:true,hidden:true},
]},
{title:'单位信息', align: 'center', cols:[
{ title:'单位名称', name:'sCorp' ,width:55, align:'center',sortable:true},
{ title:'地址', name:'sAddress' ,width:40, align:'center',sortable:true},
{ title:'电话', name:'sTel' ,width:100, align:'left',sortable:true},
{ title:'传真', name:'sFax' ,width:100, align:'left',sortable:true,hidden:true}
]},
初始化时“民族”和“政治面貌”是hidden的,这样默认 单位名称 和 地址就显示在了“人员信息”中去了。
在更新url时能更新表格数据
如果可以加上,mmGrid的应用范围应该可以更广了。类似于象easy ui的多行表头。在我的项目中大量使用,不过easy ui不开源,所以一直在找一个轻量的grid控件做为替換。
BTW: 挺喜欢mmGrid的基础代码,我正在上面实现自已的tree的支持。等做得差不多了,看对你有没有用。
var mmg = $('.mmg').mmGrid({
cols: cols,
url:'Default.php',
method: 'get',
remoteSort:false,
params:{Pa:"13"},
loadingText:'正在载入...',
sortName: 'hip',
sortStatus: 'desc',
checkCol: false,
fullWidthRows: true,
autoLoad: false,
plugins: [
$('#pg').mmPaginator({})
]
});
我就是这样写的,出来的分页显示共0条记录,而且前后页按钮都无法点
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.