Flexigrid:window.resize问题
我设法想出了一个可以使 Flexigrid 更加“流畅”的代码,更具体地说,它可以根据页面加载时的窗口大小来调整大小,但现在我想添加在窗口大小发生变化时自动调整大小的功能无需刷新它。
这就是我到目前为止所得到的:
$(document).ready(function(){
var myWidth;
var myHeight;
var rowno;
if($(window).resize(function(e) {
// do something when window resizes
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
var rowno = Math.floor((myHeight - 96)/29)
}));
$("#flex1").flexigrid
(
{
url: 'post2.php',
dataType: 'json',
colModel : [
{display: 'ID', name : 'id', width : (myWidth*0.018), sortable : true, align: 'center', hide: false},
{display: 'URL', name : 'url', width : (myWidth*0.38), sortable : false, align: 'left'},
{display: 'File Name', name : 'filename', width : (myWidth*0.239), sortable : true, align: 'left'},
{display: 'Availability', name : 'availability', width : (myWidth*0.038), sortable : true, align: 'center'},
{display: 'State', name : 'state', width : (myWidth*0.029), sortable : true, align: 'center'},
{display: 'Total Size', name : 'totalsize', width : (myWidth*0.05), sortable : false, align: 'center'},
{display: 'Current Size', name : 'currentsize', width : (myWidth*0.05), sortable : false, align: 'center'},
{display: 'Procent', name : 'procent', width : (myWidth*0.04), sortable : true, align: 'center'},
{display: 'Log', width : (myWidth*0.018), sortable : false, align: 'center'},
],
buttons : [
{name: 'Add', bclass: 'add', onpress : test},
{name: 'Delete', bclass: 'delete', onpress : test},
{separator: true},
{name: 'Start', bclass: 'start', onpress : test},
{name: 'Stop', bclass: 'stop', onpress : test},
{separator: true},
{name: 'Select All', bclass : 'selectall', onpress : test},
{name: 'DeSelect All', bclass : 'deselectall', onpress : test},
{separator: true}
],
searchitems : [
{display: 'URL', name : 'url'},
{display: 'Filename', name : 'filename', isdefault: true}
],
sortname: "id",
sortorder: "asc",
usepager: true,
title: '',
useRp: false,
rp: rowno,
showTableToggleBtn: true,
height: (myHeight - 96)
}
);
});
现在它在 jquery 中抛出了一个关于无效参数的错误,但我很确定是语法问题。
谢谢,
克里斯蒂安。
I managed to come up with a code that can make flexigrid more "fluid", more specifically it can resize depending on the window size on page load, but now I would like to add the function to resize automatically when the size of the window changes without refreshing it.
This is what I have so far:
$(document).ready(function(){
var myWidth;
var myHeight;
var rowno;
if($(window).resize(function(e) {
// do something when window resizes
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
var rowno = Math.floor((myHeight - 96)/29)
}));
$("#flex1").flexigrid
(
{
url: 'post2.php',
dataType: 'json',
colModel : [
{display: 'ID', name : 'id', width : (myWidth*0.018), sortable : true, align: 'center', hide: false},
{display: 'URL', name : 'url', width : (myWidth*0.38), sortable : false, align: 'left'},
{display: 'File Name', name : 'filename', width : (myWidth*0.239), sortable : true, align: 'left'},
{display: 'Availability', name : 'availability', width : (myWidth*0.038), sortable : true, align: 'center'},
{display: 'State', name : 'state', width : (myWidth*0.029), sortable : true, align: 'center'},
{display: 'Total Size', name : 'totalsize', width : (myWidth*0.05), sortable : false, align: 'center'},
{display: 'Current Size', name : 'currentsize', width : (myWidth*0.05), sortable : false, align: 'center'},
{display: 'Procent', name : 'procent', width : (myWidth*0.04), sortable : true, align: 'center'},
{display: 'Log', width : (myWidth*0.018), sortable : false, align: 'center'},
],
buttons : [
{name: 'Add', bclass: 'add', onpress : test},
{name: 'Delete', bclass: 'delete', onpress : test},
{separator: true},
{name: 'Start', bclass: 'start', onpress : test},
{name: 'Stop', bclass: 'stop', onpress : test},
{separator: true},
{name: 'Select All', bclass : 'selectall', onpress : test},
{name: 'DeSelect All', bclass : 'deselectall', onpress : test},
{separator: true}
],
searchitems : [
{display: 'URL', name : 'url'},
{display: 'Filename', name : 'filename', isdefault: true}
],
sortname: "id",
sortorder: "asc",
usepager: true,
title: '',
useRp: false,
rp: rowno,
showTableToggleBtn: true,
height: (myHeight - 96)
}
);
});
Right now it throws me an error in jquery about an invalid argument, but I am pretty sure is syntax problem.
Thanks,
Cristian.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
如果你看到任何元素的高度大小并将其加在一起,它大约为 120px。
所以如果你做这样的事情(flexigrid配置对象属性),你会没事的:
if u see the height size of any element and u add it together it 120px aprox.
so if u do something like this (flexigrid config object property), u'll be ok:
最好使用 % 代替 px 或 em 来表示大小
没有这么大的脚本它也可以正常工作
** edit **
如果你仍然想提供一个 settimeout 函数,它将每 1 秒检查一次浏览器 window.height 和 width 的大小与 window.width : )
如果你成功了,我是第一个复制你的脚本的人,我正在寻找相同的。 。但已经习惯了%
better use % for size in place of px or em
it works fine without such big script
** edit **
if u still want to do give a settimeout function which will check every 1 sec the size of the browser window.height and width with window.width :)
if u succeed with this I'm the first one to copy your script I'm searching for the same . . but got used to %