jQuery MiniUI

标题: grid怎样显示不完的时候怎么显示横向滚动条 [打印本页]

作者: sichuanzog 时间: 2012-9-9 21:44:37 标题: grid怎样显示不完的时候怎么显示横向滚动条

grid怎样显示不完的时候怎么显示横向滚动条

作者: niko 时间: 2012-9-10 09:37:09

空数据的时候，也显示横向滚动条是吗？
这个功能，新版本已经提供。
请下载更新即可。

作者: factory 时间: 2012-9-10 09:41:13

你是要这样的效果吗?
http://miniui.com/demo/index.html#src=datagrid/datagrid.html
如果表格宽度小于所有列宽的之和,会自动有横向滚动条

作者: sichuanzog 时间: 2012-9-10 11:35:27

factory 发表于 2012-9-10 09:41
你是要这样的效果吗?
http://miniui.com/demo/index.html#src=datagrid/datagrid.html
如果表格宽度小于所 ...

我的一个页面定义了两个grid，宽度是100%，并且grid在tab下面，当字段很多时后面就显示不出来，也没有横向滚动条，我需要有横向滚动条

作者: niko 时间: 2012-9-10 12:46:04

把doctype加上。
另外，你先确定访问网站示例，是否有问题。

作者: sichuanzog 时间: 2012-9-10 14:27:08

niko 发表于 2012-9-10 12:46
把doctype加上。
另外，你先确定访问网站示例，是否有问题。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

你说的是这个
我的grid一共有21列

作者: factory 时间: 2012-9-10 14:47:21

sichuanzog 发表于 2012-9-10 14:27
你说的是这个
我的grid一共有21列

更多的列都不会有这个问题,你把你的代码发上来我本地试试

作者: sichuanzog 时间: 2012-9-10 17:27:24

factory 发表于 2012-9-10 14:47
更多的列都不会有这个问题,你把你的代码发上来我本地试试

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script src="scripts/boot.js" type="text/javascript"></script>
<link href="scripts/miniui/themes/blue/skin.css" rel="stylesheet" type="text/css" />

<style type="text/css">
  body{
      margin:0;padding:0;border:0;width:100%;height:100%;owerflow:visible;
}
fieldset
{
      border:solid 1px #aaa;
}
.hideFieldset
{
      border-left:0;
      border-right:0;
      border-bottom:0;
      border-top:0;
}
.hideFieldset .fieldset-body
{
      display:none;
}

</style>

</head>
<body>

<div  class="mini-tabs" style="width:100%;" activeIndex="0">
         <div title="列表">
<fieldset id="fd2" style="width:100%;">
      <legend><label><input type="checkbox" checked id="checkbox1" onclick="toggleFieldSet(this, 'fd2')" hideFocus/>查询条件</label></legend>
      <div class="fieldset-body">
<div id="form1">
<table class="form-table" border="0" cellpadding="1" cellspacing="2">
<tr>
<td class="form-label" >
开发企业名称：<input id="developer"
         class="mini-textbox" emptyText="开发企业名称">  项目名称： <input id="project" class="mini-textbox"
         emptyText="项目名称" style="width: 150px;" onenter="onKeyEnter" />  购买起止日期：<input id="buydate1"
         class="mini-datepicker" /> -<input id="buydate2"
         class="mini-datepicker" /> 购房套数：<input id="ts" vtype=int
         class="mini-textbox" />
         </td>
</tr>
<tr>
   <td>
         用途： <input id="usage" class="mini-textbox" emptyText="房屋用途"
         style="width: 120px;" onenter="onKeyEnter" />
            房屋建设方式： <input id="struct"
         class="mini-textbox" emptyText="房屋建设方式" style="width: 120px;"
         onenter="onKeyEnter" /> 房屋坐落： <input
         id="region" class="mini-textbox" emptyText="房屋坐落"
         style="width: 250px;" onenter="onKeyEnter" />

         </td>
</tr>

  </table></div></div></fieldset>
<div class="mini-toolbar" style="padding:2px;border-top:0;border-left:0;border-right:0;">

<a class="mini-button" onclick= "submitForm();" iconCls="icon-search" plain="true">查询</a>
<a class="mini-button" onclick="resetForm()" iconCls="icon-remove" plain="true">重置</a>
  <a class="mini-menubutton" plain="true" menu="#popupMenu" iconCls="icon-download" />导出excel</a>
<ul id="popupMenu" class="mini-menu" style="display:none;">

      <li iconCls="icon-download" onclick="ExportExcelMain()">导出主表数据</li>
      <li iconCls="icon-download" onclick="ExportExcelDetail()">导出明细表数据</li>

</ul>

</div>

<div id="main" class="mini-datagrid" style="width:60%;height:250px;"
      url="sameidsearch.jhtml?action=main"  idField="LICENCEID"
      showFooter="false" showSummaryRow="true" onload="onGridLoad"
      onselectionchanged="onSelectionChanged"  fitcolumns="false"
      allowResize="true"  virtualScroll="true"

>
      <div property="columns">


         <div field="PROPOSER" width="300" headerAlign="center" >购买人</div>
         <div  name="total" field="OWNERID" width="200" headerAlign="left" >身份证号</div>
         <div field="TS" width="100" headerAlign="center" >套数</div>






</div>
  </div>



  <div id="detail" class="mini-datagrid" style="width:100%;height:400px;"
      url="sameidsearch.jhtml?action=detail"  showFooter="false"  fitcolumns="false" >
<div property="columns">
<div field="LICENCEID" width="60" headerAlign="center" >预售证号</div>
<div field="PROPOSER" width="60" >购买人</div>
<div field="IDTYPE" width="70" >证件类型</div>
<div field="OWNERID" width="120" >证件号</div>
<div field="BUYDATE" width="80" >销售日期</div>
<div field="PRICE" width="80" >销售价格</div>
<div field="DEVELOPER" width="120"  align="center"    headerAlign="center">开发企业</div>
<div field="PROJECT" width="120" >项目名称</div>
<div field="OPENSALEDATE" width="80" >开盘日期</div>
<div field="REGION" width="120" >地址坐落</div>
<div field="HNO" width="50" >栋号</div>
<div field="UNO" width="50" >单元号</div>
<div field="FNO" width="50" >楼层</div>
<div field="RNO" width="50" >房间号</div>
<div field="AREA" width="50" >套内面积</div>
<div field="OUTAREA" width="50" >公摊面积</div>
<div field="USAGE" width="50" >用途</div>
<div field="STRUCT" width="50" >结构</div>
<div field="PHONE" width="120" >联系电话</div>
<div field="CONTACT" width="120" >联系人</div>
<div field="SCOPE" width="120" >预售范围</div>

</div>
</div>
</div>

  <div title="图表" refreshOnClick="true">


<iframe id="ydchart" src="" frameborder="0px" width="100%" height="600px"></iframe>

  </div>
  </div>
<form action="export.jhtml" method="post" name="exportform" id="exportform"  sytle="display:none">
<input type="hidden" id="columns" name="columns"></input>
<input type="hidden" id="json1" name="json1"></input>
</form>



</body>
</html>

作者: sichuanzog 时间: 2012-9-10 17:28:01

sichuanzog 发表于 2012-9-10 17:27
body{
margin:0;padding:0;border:0;width:100%;height:100%;owerflow:visible;
...

因为回复字数限制，没有发下面的javascript代码

作者: niko 时间: 2012-9-10 18:23:06

你是否用的是jquery 1.8.1版本？
如果是，此BUG已经修复，重新下载即可。

作者: sichuanzog 时间: 2012-9-11 14:12:57

不是是1.6.2

作者: niko 时间: 2012-9-11 18:28:21

你看网站示例：http://www.miniui.com/demo/#src=datagrid/datagrid.html
是有滚动条的。

你自己做个例子，没有滚动条的，上传下。

作者: sichuanzog 时间: 2012-9-20 14:42:32

niko 发表于 2012-9-10 18:23
你是否用的是jquery 1.8.1版本？
如果是，此BUG已经修复，重新下载即可。

还是不行啊[attach]659[/attach]下面没有出现左右滚动条

作者: factory 时间: 2012-9-20 14:52:37

sichuanzog 发表于 2012-9-20 14:42
还是不行啊下面没有出现左右滚动条

你先看demo,在你那边是否有滚动条?
确定有之后,你再从demo上改造成你的表格

作者: sichuanzog 时间: 2012-9-20 15:59:56

factory 发表于 2012-9-20 14:52
你先看demo,在你那边是否有滚动条?
确定有之后,你再从demo上改造成你的表格 ...

有滚动条但是滚动不完

作者: sichuanzog 时间: 2012-9-20 16:02:31

factory 发表于 2012-9-20 14:52
你先看demo,在你那边是否有滚动条?
确定有之后,你再从demo上改造成你的表格 ...

<div showHeader="false" region="west" width="180" maxWidth="250" minWidth="100" >
      
      <div class="mini-outlookmenu" url="data/outlookmenu.txt" onitemselect="onItemSelect"
         idField="id" parentField="pid" textField="text" borderStyle="border:0"
      >
      </div>

</div>

<div title="center" region="center">
      <iframe id="mainframe" frameborder="0" scrolling="yes" name="main" style="width:100%;height:100%;" border="0"></iframe>
</div>

      </div>

<script type="text/javascript">
      mini.parse();

      //init iframe src

var iframe = document.getElementById("mainframe");


      function onItemSelect(e) {
         var item = e.item;
         iframe.src = item.url;
      }
</script>

这个是body里面的代码

作者: factory 时间: 2012-9-20 17:12:17

sichuanzog 发表于 2012-9-20 16:02
mini.parse() ...

我测试了你的代码,没有出现横向滚动条显示不完.

作者: sichuanzog 时间: 2012-9-21 08:18:50

factory 发表于 2012-9-20 17:12
我测试了你的代码,没有出现横向滚动条显示不完.

不会吧，我有个主页面，就是上面的代码，然后iframe显示的时候没有出现滚动条，比如说我的宽度1200，就会有部分不能显示出来，能不能让iframe出现横向滚动条

作者: factory 时间: 2012-9-21 09:51:16

sichuanzog 发表于 2012-9-21 08:18
不会吧，我有个主页面，就是上面的代码，然后iframe显示的时候没有出现滚动条，比如说我的宽度1200，就会 ...

[attach]662[/attach]
你给的代码运行起来是这个吧?
有横向滚动条啊,而且滚动也没出现问题

作者: sichuanzog 时间: 2012-9-21 15:45:14

factory 发表于 2012-9-21 09:51
你给的代码运行起来是这个吧?
有横向滚动条啊,而且滚动也没出现问题

就是，但是我的页面表格宽度是用的100%，左边还有菜单栏

作者: niko 时间: 2012-9-21 18:33:51

iframe有没有滚动条，是你iframe内的body样式决定的。
你修改下iframe内的body样式：overflow:hidden，去掉。

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