jQuery MiniUI

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

datagrid显示错乱 [复制链接]

Rank: 2

跳转到指定楼层
楼主
发表于 2017-6-12 10:49:15 |只看该作者 |倒序浏览

附件: 你需要登录才可以下载或查看附件。没有帐号?立即注册

Rank: 2

沙发
发表于 2017-6-12 10:50:49 |只看该作者
我这是一个tab页,当点击tab页切换过来的时候显示的表格向上面那样出BUG,但是按F11后会恢复正常

Rank: 8Rank: 8

板凳
发表于 2017-6-12 10:56:40 |只看该作者
wangy 发表于 2017-6-12 10:50
我这是一个tab页,当点击tab页切换过来的时候显示的表格向上面那样出BUG,但是按F11后会恢复正常 ...

把这个表格页面代码打包发上来,我们测试一下
另外说明一下出现这问题的环境

Rank: 2

地板
发表于 2017-6-12 11:34:21 |只看该作者
dforce 发表于 2017-6-12 10:56
把这个表格页面代码打包发上来,我们测试一下
另外说明一下出现这问题的环境 ...

<!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>Fit Layout</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /><link href="../demo.css" rel="stylesheet" type="text/css" />


  <script src="../../scripts/boot.js" type="text/javascript"></script>


</head>
<body >
<style type="text/css">
  html, body{
    margin:0;padding:0;border:0;width:100%;height:100%;overflow:hidden;
  }
  .tab-pane{
    display: none;
  }
  .tab-pane.active{
    display: block;
  }
</style>

<ul class="nav-tabs">
  <li><a href="#div1">div1</a></li>
  <li><a href="#div2">div2</a></li>
</ul>
<div>
  <div class="tab-pane active" id="div1">
    111111111111
  </div>
  <!--撑满页面-->
  <div class="tab-pane" id="div2" style="height:500px">
    <div class="mini-fit" >

      <div id="datagrid1" class="mini-datagrid" style="width:100%;height:100%;"
           url="../data/AjaxService.jsp?method=SearchEmployees"  idField="id"
           sizeList="[5,10,20,50]" pageSize="10"
          >
        <div property="columns">
          <div type="indexcolumn" ></div>
          <div field="loginname" width="120" headerAlign="center" allowSort="true">员工帐号</div>
          <div field="name" width="120" headerAlign="center" allowSort="true">姓名</div>
          <div field="gender" width="100" renderer="onGenderRenderer" align="center" headerAlign="center">性别</div>
          <div field="salary" width="100" allowSort="true">薪资</div>
          <div field="age" width="100" allowSort="true">年龄</div>
          <div field="createtime" width="100" headerAlign="center" dateFormat="yyyy-MM-dd" allowSort="true">创建日期</div>
        </div>
      </div>

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

<script type="text/javascript">
  mini.parse();
  var grid = mini.get("datagrid1");
  grid.load();
  grid.setVisible(true)

  function onSearch() {
    mini.open({
      url: bootPATH + "../demo/CommonLibs/SelectGridWindow.html"
    });
  }
  $(".nav-tabs").on("click","a",function(e){
    var e=e|| window.event;
    if (e.preventDefault) {
      e.preventDefault();
      e.stopPropagation();
    } else {
      e.returnValue = false;
      e.cancelBubble = true;
    }
    var id=$(this).attr("href");
    $(id).addClass("active").siblings().removeClass("Active")
  })
</script>

</body>
</html>

Rank: 2

5#
发表于 2017-6-12 11:35:22 |只看该作者
wangy 发表于 2017-6-12 11:34
Fit Layout
  

在demo里面的fit页面,加了个tab标签也出现了这个问题

Rank: 8Rank: 8

6#
发表于 2017-6-12 14:20:34 |只看该作者
wangy 发表于 2017-6-12 11:35
在demo里面的fit页面,加了个tab标签也出现了这个问题

请添加mini.layout():
  1. $(".nav-tabs").on("click", "a", function (e) {
  2.         var e = e || window.event;
  3.         if (e.preventDefault) {
  4.             e.preventDefault();
  5.             e.stopPropagation();
  6.         } else {
  7.             e.returnValue = false;
  8.             e.cancelBubble = true;
  9.         }
  10.         var id = $(this).attr("href");
  11.         $(id).addClass("active").siblings().removeClass("Active")
  12.         mini.layout();
  13.     })
复制代码

Rank: 2

7#
发表于 2017-6-12 15:05:59 |只看该作者
jialiang 发表于 2017-6-12 14:20
请添加mini.layout():

非常感谢,这个问题解决了,还有个小问题想问下,使用mini.open()弹出时怎么使后面的滚动条不可滚动,经常性弹出层一个滚动条,父页面一个滚动条

Rank: 8Rank: 8

8#
发表于 2017-6-12 15:39:10 |只看该作者
wangy 发表于 2017-6-12 15:05
非常感谢,这个问题解决了,还有个小问题想问下,使用mini.open()弹出时怎么使后面的滚动条不可滚动,经 ...

“使后面的滚动条不可滚动“ 不太明白你的需求
滚动条是根据你的页面生成的,如果显示不下,页面样式又没有设置overflow:hidden,就会自动出现滚动条。

Rank: 2

9#
发表于 2017-6-12 16:28:57 |只看该作者
dforce 发表于 2017-6-12 15:39
“使后面的滚动条不可滚动“ 不太明白你的需求
滚动条是根据你的页面生成的,如果显示不下,页面样式又没 ...

不好意思,我没有表达清楚,是这样的
1.我的页面本身有一个滚动条
2.在使用mini.open后让这个滚动条隐藏起来,也就是让页面像摸态框那样

Rank: 8Rank: 8

10#
发表于 2017-6-12 17:11:44 |只看该作者
wangy 发表于 2017-6-12 16:28
不好意思,我没有表达清楚,是这样的
1.我的页面本身有一个滚动条
2.在使用mini.open后让这个滚动条隐藏 ...

这可以动态修改页面的overflow来实现
document.body.style.overflow="hidden"
mini.open({
   ondestroy:function(){
        document.body.style.overflow="auto"   //这里再改回来
    }
})

Archiver|普加软件

GMT+8, 2025-7-14 00:01 , Processed in 1.030559 second(s), 10 queries .

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部