jQuery MiniUI

 找回密码
 立即注册
查看: 10313|回复: 20
打印 上一主题 下一主题

grid怎样显示不完的时候怎么显示横向滚动条 [复制链接]

Rank: 2

跳转到指定楼层
楼主
发表于 2012-9-9 21:44:37 |只看该作者 |倒序浏览
grid怎样显示不完的时候怎么显示横向滚动条

Rank: 9Rank: 9Rank: 9

沙发
发表于 2012-9-10 09:37:09 |只看该作者
空数据的时候,也显示横向滚动条是吗?
这个功能,新版本已经提供。
请下载更新即可。

Rank: 8Rank: 8

板凳
发表于 2012-9-10 09:41:13 |只看该作者
你是要这样的效果吗?
http://miniui.com/demo/index.html#src=datagrid/datagrid.html
如果表格宽度小于所有列宽的之和,会自动有横向滚动条

Rank: 2

地板
发表于 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下面,当字段很多时后面就显示不出来,也没有横向滚动条,我需要有横向滚动条

Rank: 9Rank: 9Rank: 9

5#
发表于 2012-9-10 12:46:04 |只看该作者
把doctype加上。
另外,你先确定访问网站示例,是否有问题。

Rank: 2

6#
发表于 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列

Rank: 8Rank: 8

7#
发表于 2012-9-10 14:47:21 |只看该作者
sichuanzog 发表于 2012-9-10 14:27
你说的是这个
我的grid一共有21列

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

Rank: 2

8#
发表于 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>

Rank: 2

9#
发表于 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代码

Rank: 9Rank: 9Rank: 9

10#
发表于 2012-9-10 18:23:06 |只看该作者
你是否用的是jquery 1.8.1版本?
如果是,此BUG已经修复,重新下载即可。

Archiver|普加软件

GMT+8, 2024-9-29 20:33 , Processed in 1.055235 second(s), 10 queries .

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部