jQuery MiniUI

标题: 关于tab页嵌套datagrid高度、宽度适应滚动条问题 [打印本页]

作者: liuziliangjava 时间: 2014-10-13 13:41:13 标题: 关于tab页嵌套datagrid高度、宽度适应滚动条问题

如标题所示：
就是我在tab页面中嵌套了相应的页面(B.jsp) B.jsp页面中有datagrid列表进行展示，但是现在有个问题就是说，当我的datagrid列数比较多的时候，datagrid只有一条记录的时候，会出现横向滚动条会把那一条展示的记录给覆盖掉了，如果是多条记录的话是不会出现这个问题

因为网络问题，这个图片截图上传不上去
相应的jsp：
<div id="grid1" class="mini-datagrid mini-fit" style="width:100%;height:auto;"sortMode="client"
url="" dataField=""
      allowAlternating="true" multiSelect="false" showEmptyText="true" showPager="true"
      emptyText="没有查到数据" showReloadButton="false" showColumnsMenu="true"
      onrowdblclick="" allowCellEdit="true" allowCellSelect="true"onselectionchanged="onSelectionChanged"
      sizeList="[10,20,50,100]" pageSize="10">
<div property="columns">
<div type="checkcolumn">选择</div>
<div field="partyNum" headerAlign="center" allowSort="true">A</div>
<div field="partyName" headerAlign="center" allowSort="true">B</div>
<div field="custRiskTypeCd" headerAlign="center" allowSort="true" dictTypeId="XD_FLCD0002">C</div>
<div field="shbackEnterpriseSizeCd" headerAlign="center" allowSort="true" dictTypeId="CDKH0025">D</div>
<div field="creditRatingCd" headerAlign="center" allowSort="true" dictTypeId="XD_KHCD0228">E</div>
<div field="creditExposure" headerAlign="center" allowSort="true">F</div>
<div field="availableExposure" headerAlign="center" allowSort="true" >G</div>
</div>
</div>
</div>

就是如果这个<div field="creditExposure" headerAlign="center" allowSort="true">F</div>这个比较多的时候，会出现这个问题
因为这个列数都是不固定的

css：
.mini-panel-body, .mini-grid-rows-view {
overflow: auto;
}
.mini-grid-rows-view {
height:auto;
}

麻烦版主帮我看一下，非常感谢！

作者: liuziliangjava 时间: 2014-10-13 13:50:18

我把截图发到csdn了，麻烦版主看一下非常感谢
http://blog.csdn.net/lzljava/article/details/40043725

作者: dforce 时间: 2014-10-13 14:17:59

liuziliangjava 发表于 2014-10-13 13:50
我把截图发到csdn了，麻烦版主看一下非常感谢
http://blog.csdn.net/lzljava/article/details/40043725 ...

你的浏览器是什么

作者: liuziliangjava 时间: 2014-10-13 14:18:50

dforce 发表于 2014-10-13 14:17
你的浏览器是什么

IE浏览器几个版本都试过了都有这个问题

作者: liuziliangjava 时间: 2014-10-13 14:30:43

liuziliangjava 发表于 2014-10-13 14:18
IE浏览器几个版本都试过了都有这个问题

现在是因为
<div id="grid1" class="mini-datagrid mini-fit" style="width:100%;height:auto;"sortMode="client">
这个datagrid的高度我们是设置为height:auto的,然后当这个datagrid列数比较多的时候，这个横向滚动条就会出来，因为横向滚动条自己也占有个高度，而且当datagrid列表只有一条记录的时候，这个滚动条就会把那一条记录给遮住，现在就是说有没有一个办法可以在哪个公共的地方把height:auto设置为一个固定高度，因为我现在很多页面都会有这个问题，不可能每个页面去手动改这个

麻烦版主提供一下思路，谢谢

作者: dforce 时间: 2014-10-13 14:43:24

liuziliangjava 发表于 2014-10-13 14:30
现在是因为

这个datagrid的高度我们是设置为height:auto的,然后当这个datagrid列数比较多的时候，这个横 ...

<div class="mini-fit">
<div class="mini-datagrid"

作者: liuziliangjava 时间: 2014-10-13 14:51:56

dforce 发表于 2014-10-13 14:43

版主，因为系统有这个问题的页面非常多，一一改也现实，现在这个问题也比较急，客户明天就要演示，有没有一个公共的方法或者设置什么样式能在所有的datagrid生效吗？先谢谢版主

作者: dforce 时间: 2014-10-13 15:02:34

liuziliangjava 发表于 2014-10-13 14:51
版主，因为系统有这个问题的页面非常多，一一改也现实，现在这个问题也比较急，客户明天就要演示，有没有 ...

mini-fit 和mini-datagrid是两个控件，你为什么要写在一起
分开写之后还有没这个问题？

作者: liuziliangjava 时间: 2014-10-13 15:09:35

dforce 发表于 2014-10-13 15:02
mini-fit 和mini-datagrid是两个控件，你为什么要写在一起
分开写之后还有没这个问题？ ...

版主，我这边现在想到的办法就是说
复写了
.mini-grid-rows-view {
height:100px;
}
这个CSS ，但是这个height:100%写成百分比是不行的，因为每个电脑的分辨率是不一样的
因为之前开发的时候mini-fit这个控件我们是没用的，现在页面非常多也不可能现在去加这些东西了
版主，你这边有什么办法解决我上述问题思路吗？谢谢

有没有办法在加载页面之前把mini-fit加到datagrid里面去呢？或者有什么其他办法

作者: factory 时间: 2014-10-13 17:32:22

liuziliangjava 发表于 2014-10-13 15:09
版主，我这边现在想到的办法就是说
复写了
.mini-grid-rows-view {

我们处理下

作者: liuziliangjava 时间: 2014-10-13 17:48:27

factory 发表于 2014-10-13 17:32
我们处理下

好的，非常感谢版主，这边催的也比较急多谢

作者: liuziliangjava 时间: 2014-10-14 09:22:41

liuziliangjava 发表于 2014-10-13 17:48
好的，非常感谢版主，这边催的也比较急多谢

版主，就这个问题今天能给个解决方案吗？

作者: liuziliangjava 时间: 2014-10-14 11:25:27

liuziliangjava 发表于 2014-10-14 09:22
版主，就这个问题今天能给个解决方案吗？

版主，这个问题我已经搞定、实现了分享一下 ,主要思路还是重新复写了css
mini.copyTo(h, {
         success: function(t, u, s) {
            var e = null;
            try {
                  e = mini.decode(t)
                  if (e && !mini.isArray(e)) {//[修改了当datagrid记录为1条记录的时候，滚动条遮住记录的问题]
                     dglen = parseInt(mini._getMap(j.totalField, e));
                     if(dglen=='1'){
var str_css = '.mini-grid-rows-view {height:100px;}';//定义css内容
var style = document.createStyleSheet();
      style.cssText = str_css;
var style = document.createElement("style");
style.type = "text/css";
style.textContent = str_css;
document.getElementsByTagName("HEAD").item(0).appendChild(style);
                     }
                  }
            }

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