jQuery MiniUI

标题: 多个datagrid布局 [打印本页]

作者: q123126 时间: 2014-4-10 10:29:30 标题: 多个datagrid布局

怎么样3个datagrid并排，根据浏览器大小，自动改变datagrid宽度呢。

作者: factory 时间: 2014-4-10 11:03:27

这个很简单的啊

用个table去做布局就好了

<table style="width:....; table-layout:fixed">
<tr>
   <td width="xxxx"><div class="mini-datagrid" style="width:100%"></div></td>
  </tr>
<tr>
   <td width="xxxx"><div class="mini-datagrid" style="width:100%"></div></td>
  </tr>
<tr>
   <td width="xxxx"><div class="mini-datagrid" style="width:100%"></div></td>
  </tr>

自然就能根据浏览器大小改变宽度

作者: q123126 时间: 2014-4-10 11:14:50

factory 发表于 2014-4-10 11:03
这个很简单的啊

用个table去做布局就好了

<table1>
<table2>
<table style="width: 100%; table-layout: fixed">
      <tr>
         <td width="30%">
            <div class="mini-fit">
...
现在是这样做的，但是mini-fit无效，不会填满页面高度，grid高度只有表头的高度

作者: factory 时间: 2014-4-10 11:18:43

q123126 发表于 2014-4-10 11:14
...
现在是这样做的，但是mini-fit无效，不会填满页面高度， ...

fit首先你得要确保你的父元素有高度啊. 你表格都没高度,fit当然计算不出来高度了

作者: q123126 时间: 2014-4-10 11:21:04

factory 发表于 2014-4-10 11:18
fit首先你得要确保你的父元素有高度啊. 你表格都没高度,fit当然计算不出来高度了 ...

[attach]4274[/attach]

td高度设置100%了，不会要设置一个固定值吧。table设置高度100%也不行的。

作者: factory 时间: 2014-4-10 11:25:17

q123126 发表于 2014-4-10 11:21
td高度设置100%了，不会要设置一个固定值吧。table设置高度100%也不行的。

...

那是因为你的页面没高度啊...HTML页面默认就是自动内容撑开的,所以你表格100%高度自然等于是没高度了

给你页面写上这样的样式
<style>
html,body{
height:100%;width:100%;margin:0;padding:0
}
</style>

作者: q123126 时间: 2014-4-10 11:26:46

factory 发表于 2014-4-10 11:25
那是因为你的页面没高度啊...HTML页面默认就是自动内容撑开的,所以你表格100%高度自然等于是没高度了

给 ...

你看我的实例里面是有页面高度的哦

作者: lost 时间: 2014-4-10 11:41:32

q123126 发表于 2014-4-10 11:26
你看我的实例里面是有页面高度的哦

<form id="form1" runat="server" style="height:100%;width:100%;" >
</form>
form要给个高度的

作者: factory 时间: 2014-4-10 11:45:57

q123126 发表于 2014-4-10 11:26
你看我的实例里面是有页面高度的哦

很明确的问题了,就是你的table没高度引起的.

fit是通过获取父元素的高度 P ,然后其他同级的元素的高度C

fit = P-C 来做撑满剩余高度的.

P和C少了任意一个都计算不出的. 你现在没同级元素,那么fit = P了,但是P没可视高度,自然fit也就没了

你们页面布局的需求我也不清楚,我只能告诉你,你得先让table有了高度才行,至于怎么才能有高度,得看你们是怎么样的布局需求了

作者: q123126 时间: 2014-4-10 12:04:32

本帖最后由 q123126 于 2014-4-10 12:28 编辑

factory 发表于 2014-4-10 11:45
很明确的问题了,就是你的table没高度引起的.

fit是通过获取父元素的高度 P ,然后其他同级的元素的高度C

[attach]4275[/attach]

这个是我修改过的，ff已经可以了，但是ie8不行。

作者: factory 时间: 2014-4-10 13:39:56

q123126 发表于 2014-4-10 12:04
这个是我修改过的，ff已经可以了，但是ie8不行。

[attach]4277[/attach]

IE8不是好的吗?

作者: q123126 时间: 2014-4-10 13:42:15

本帖最后由 q123126 于 2014-4-10 13:43 编辑

factory 发表于 2014-4-10 13:39
IE8不是好的吗?

ff不会有滚动条，但是ie8会有，看不到表格下边框，要下拉才能看到。

作者: factory 时间: 2014-4-10 13:46:01

q123126 发表于 2014-4-10 13:42
ff不会有滚动条，但是ie8会有。

因为table默认单元格之间是有间隙的,然后你所有的列宽之和正好是100%,加上间隙,自然就有滚动条了.

缩小一点某一列的宽度
或者给表格加上cellpadding="0" cellspacing="0"

作者: q123126 时间: 2014-4-10 15:57:42

factory 发表于 2014-4-10 13:46
因为table默认单元格之间是有间隙的,然后你所有的列宽之和正好是100%,加上间隙,自然就有滚动条了.

缩小 ...

原来如此，谢谢，在学习中。

欢迎光临 jQuery MiniUI (http://miniui.com/discuss/)