jQuery MiniUI

标题: datagrid显示错乱 [打印本页]
作者: wangy    时间: 2017-6-12 10:49:15     标题: datagrid显示错乱

[attach]9348[/attach][attach]9347[/attach]
作者: wangy    时间: 2017-6-12 10:50:49

我这是一个tab页，当点击tab页切换过来的时候显示的表格向上面那样出BUG，但是按F11后会恢复正常
作者: dforce    时间: 2017-6-12 10:56:40

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

把这个表格页面代码打包发上来，我们测试一下
另外说明一下出现这问题的环境
作者: wangy    时间: 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>
作者: wangy    时间: 2017-6-12 11:35:22

wangy 发表于 2017-6-12 11:34
Fit Layout
  

在demo里面的fit页面，加了个tab标签也出现了这个问题
作者: jialiang    时间: 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.     })
复制代码
作者: wangy    时间: 2017-6-12 15:05:59

jialiang 发表于 2017-6-12 14:20
请添加mini.layout()：

非常感谢，这个问题解决了，还有个小问题想问下，使用mini.open()弹出时怎么使后面的滚动条不可滚动，经常性弹出层一个滚动条，父页面一个滚动条
作者: dforce    时间: 2017-6-12 15:39:10

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

“使后面的滚动条不可滚动“ 不太明白你的需求
滚动条是根据你的页面生成的，如果显示不下，页面样式又没有设置overflow:hidden，就会自动出现滚动条。
作者: wangy    时间: 2017-6-12 16:28:57

dforce 发表于 2017-6-12 15:39
“使后面的滚动条不可滚动“ 不太明白你的需求
滚动条是根据你的页面生成的，如果显示不下，页面样式又没 ...

不好意思，我没有表达清楚，是这样的
1.我的页面本身有一个滚动条
2.在使用mini.open后让这个滚动条隐藏起来，也就是让页面像摸态框那样
作者: dforce    时间: 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"   //这里再改回来
    }
})
作者: wangy    时间: 2017-6-12 19:04:55

dforce 发表于 2017-6-12 17:11
这可以动态修改页面的overflow来实现
document.body.style.overflow="hidden"
mini.open({

谢谢大神



欢迎光临 jQuery MiniUI (http://miniui.com/discuss/) Powered by Discuz! X2