简体   繁体   English

Flexigrid:window.resize问题

[英]Flexigrid: window.resize problem

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. 我设法提出了一个可以使flexigrid更“流畅”的代码,更具体地说,它可以根据页面加载时的窗口大小来调整大小,但是现在我想添加一个函数,以在窗口大小更改时自动调整大小没有刷新它。

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. 现在,它在jQuery中向我抛出有关无效参数的错误,但我很确定这是语法问题。

Thanks, 谢谢,

Cristian. 克里斯蒂安。

if u see the height size of any element and u add it together it 120px aprox. 如果您看到任何元素的高度大小,并且将其加在一起为120px aprox。 so if u do something like this (flexigrid config object property), u'll be ok: 因此,如果您执行这样的操作(flexigrid配置对象属性),则可以:

$("#tabla").flexigrid({
   ...,
   width:'auto',
   height:$("#container").innerHeight()-120
});

better use % for size in place of px or em it works fine without such big script 最好使用%代替px或em来设置大小,如果没有这么大的脚本,效果很好

** 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 :) 如果您仍然想提供一个settimeout函数,它将每1秒检查一次浏览器window.height和width与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 % 但习惯了%

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM