可以用JS脚本重新调整列宽和行高吗？

收藏

因为需要适应不同分辨率浏览器显示的宽高

roger.wang · roger.wang

回复 1楼moonlight108的帖子

可以通过JS设置Height、Width

<SCRIPT language=javascript>
function setHeight() {
FpSpread1.Rows(10).SetHeight = 10;
}
</SCRIPT>
<SCRIPT>
function setWidth() {
FpSpread1.Columns(3) = 10; // sets the size
}
</SCRIPT>

复制代码

在Spread ASP.net自带的帮助文档中，有专门的一张说明如何通过JS操作Spread的，参考路径：
Spread for ASP.NET 7.0 Product Documentation > Client-Side Scripting Reference

moonlight108 · moonlight108

回复 2楼roger.wang的帖子

列宽很好计算、调整。不过，调完列宽后，原先wrap展示的列标题就会改变行数，也就是合适的高度很可能是要变化的。请问，我怎么调这个高度呢？

roger.wang · roger.wang

回复 3楼moonlight108的帖子

能给个demo吗？我想弄明白这个帖子沟通的需求背景故事。

从您标题、1#的描述，我理解的是您需要通过js(前台)控制Spread的列宽和列高，故我响应的在2#给出了API接口。

moonlight108 · moonlight108

回复 4楼roger.wang的帖子

因为FpSpread不支持百分比定宽度，所以服务器端只能写死了一个列宽度。如图：

QQ截图20140220022313.png

但是这样，在用户选择的列数少的时候，右边会出现很多空白，不好看，所以才需要在客户端根据分辨率和浏览器的窗口大小，来重新调整列宽。列宽比较好设置，根据用户选择的列数和当前浏览器的有效宽度能计算出来。就比如上图，假设调整完列宽后，行标题都可以在一行展示了，但是其高度不会自动变化。我这时候还需要取得行标题的最合适高度才行把这个界面调整的相对美观。就是想问，怎么得到这个合适的行标题第一行的高度值。

moonlight108 · moonlight108

怎么不回应了呢？列数和行数都是动态的，行表头或列表头的列数或行数可当已知条件。必须自适应屏幕大小，但不能用FitToSize，因为都是数据，最大宽度其实应该是行表头或列表头。列数累加宽度超过FpSPread宽度的话，必须FpSPread自己出滚动条，浏览器不能出滚动条。怎样重新调整行高和列宽呢？

roger.wang · roger.wang

回复 6楼moonlight108的帖子

抱歉回复晚了

从您5#、6#的描述看：
1 您要行标题的高度，然后要设置行高和列宽。

能否把您的Spread ASP.net这个数据，保存为xml格式的，我找个环境模拟一下。
Spread ASP.net版本、用的浏览器版本请提供一下。
这样我想定位能快一些。

roger.wang · roger.wang

回复 6楼moonlight108的帖子

<script>
function onClick() {
var rc = FpSpread1.GetRowCount();
var spread = document.getElementById("FpSpread1");
spread.Rows(0).SetHeight(130);//ok
spread.Columns(1).SetWidth(130);//ok
}
</script>

复制代码

moonlight108 · moonlight108

回复 8楼roger.wang的帖子

屏幕有宽屏、窄屏；分辨率也相应有大有小。做的网页要自适应这些。
数据的行数和列数都是不固定的。
比如，下面同一个数据点，在不同浏览器窗口大小的时候表现是这样的：

QQ截图20140220051829.png

下面的图在浏览器窗口比较大的时候，右边就出现空白了，不好看。这时候就要根据当前的列数计算一个合适的列宽，使得充分利用上窗口。
列宽比较好算。就这个例子，列宽调宽后，第一行的列表头的也许不用折行，就成一行了。这时候你还得调整这行的高度，否则还是不好看。
这个高度怎么算呢？因为无法获知在列宽调整后的第一行的列表头的最大折行数的。

roger.wang · roger.wang

回复 9楼moonlight108的帖子

1 设置列宽自适应，用SizeToFit函数试试：

<SCRIPT language=javascript>
function FitSpread()
{
var s=document.getElementById("FpSpread1″);
if(document.all)
s.SizeToFit(s.ActiveCol);
else
s.SizeToFit(s.GetActiveCol());
}
</SCRIPT>

复制代码

用法参考：Spread for ASP.NET 7.0 Product Documentation > Client-Side Scripting Reference > Scripting Members > Methods > SizeToFit

2 高度
没有办法直接获得列头的文字高度而去设置文字的宽度，有类似的办法：

var spread = FpSpread1;
        var span = FpSpread1.all("FpSpread1_colHeader");
        var table = span.firstChild;
        var tr = table.rows(0);
        var tc;
 
        if(spread!=null)
            {
           //resize the spread control (take off page heading and left part of page)
        spread.style.height = document.body.clientHeight – spread.offsetTop – 180;
      spread.style.width = document.body.clientWidth – 220;
          
          //resize columns
          var w = spread.offsetWidth – 20;
            //go through all the columns
          for (var i=0;i<spread.GetColCount();i++)
                {
               //set column width
               tc = tr.cells(i)
                spread.setColWidth(i,tc.innerText.length*10);
               }
           }

复制代码

		自动登录	找回密码
密码			立即注册

[已处理] 可以用JS脚本重新调整列宽和行高吗？

9 个回复

活字格认证

微信认证勋章

元老葡萄