设为首页收藏本站

jQuery MiniUI

 找回密码
 立即注册
jQuery MiniUI › 论坛 › MiniUI › 技术交流 › 用mini-splitter分隔的上下两个表格，为啥下部表格始终 ...
返回列表 发新帖
查看: 4186|回复: 5
打印 上一主题 下一主题

用mini-splitter分隔的上下两个表格，为啥下部表格始终不加载 [复制链接]

leijun_no1

Rank: 1
跳转到指定楼层
楼主
发表于 2021-2-6 12:23:57 |只看该作者 |倒序浏览
本帖最后由 leijun_no1 于 2021-2-6 12:33 编辑

代码如下，请版主指点下。困惑了N久

<!DOCTYPE html>
<html>
<head>
<title>采购订单列表</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<style type="text/css">html{zoom :100%}</style><script>var IMG = "http://127.0.0.1";var FILE = "http://127.0.0.1/data";var ENV = "DEV";var EOVA_FORM = "";var EOVA_ZOOM = "100%";var EOVA_LOCAL = "zh_CN";</script>
<script src="/scripts/boot.js" type="text/javascript"></script><script src="/scripts/boot.js" type="text/javascript"></script>
<script src="/scripts/miniui/resource/datagrid/js/ColumnsMenu.js" type="text/javascript"></script>
<script src="/scripts/miniui/locale/zh_CN.js" type="text/javascript"></script>
<style type="text/css">
    html,body
    {
        width:100%;
        height:100%;
        border:0;
        margin:0;
        padding:0;
        overflow:visible;
    }
</style>
</head>
<body>
<div class="mini-fit" >
<div class="mini-splitter" vertical="true" style="width:100%;height:100%;">
     <div size="40%" showCollapseButton="true">
      <a href="">111</a>
      <div class="mini-fit" >
<table id="master_grid" lay-filter="master_grid"></table>
<div id="master_grid" class="mini-datagrid" style="width:100%;height:100%;"
        allowCellEdit="false" allowCellSelect="true"  allowResize="true" virtualScroll="true"
        multiSelect="true">
</div>
<script>
    // init param
    var ID = "master_grid";
    var PID = "";
    //var $grid = $("#" + ID);
    var $parentWidget;
    if(PID != ""){
     $parentWidget = $("#" + PID);
    }
   
    // 离线数据模式
    var isData = false;
    var menuCode = 'pur_order_vend_001';
    var objectCode = 'purOrderHForVend';
    var toolbar = 'master_grid_toolbar';// grid ref toolbar
    var isPaging = eval('true');// is show pagination
    var url = '';// diy grid load data url
    var height = '';// diy grid load data url
  
    var objectJson = '';// object is json
    var fieldsJson = '';// fiedlds is json
    var configJson = '';// config is json

    //alert(objectCode);
    //alert(JSON.stringify(objectJson));
   
   
    if (url == '') {
        url = '/grid/query/' + objectCode;
        if(menuCode != ''){
         url = url + '-' + menuCode;
        }
    }
    var paras = $.getUrlParas();
    // 自动传递所有参数
    // 是否含有关联查询条件
    if(paras && (paras.indexOf('query_') != -1 || paras.indexOf('filter_') != -1)){
     url = url + '?' + paras;
    }
   
// 初始化组件
EovaWidget.init(objectCode, objectJson, fieldsJson, configJson);
    var config = EovaWidget.data.config,
     object = EovaWidget.data.object,
     fields = EovaWidget.data.fields;
    // 当前对象是否允许初始加载数据
    var isFirstLoad = false;
    var isFirstLoadNow = eval('true');
// 必须当前业务和对象都允许加载数据
    if(isFirstLoadNow && object.is_first_load){
     isFirstLoad = true;
    }
   
// 单元格编辑, 自定义开关
    var cols = [];
    // var validators = {};

    // 构建其它列
    //cols = $.table.buildColumn(object, fields, cols);
    cols = $.table.buildMiniUIColumn(object, fields, cols);
    // 构建首列
    //cols = $.table.buildFirstColumn(object, fields, cols);
// 构建表头合并列
/*if(object.config){
  cols = $.table.buildMergeColumn(object.config, cols);
} else {
  cols = [cols];
}*/

var limit = isPaging ? 100 : 5000;

// 分页配置
/*if(object.config && object.config != ''){
  var objectConfig = $.json.toObj(object.config);
  if (objectConfig.limit) {
   limit = objectConfig.limit;
  }
}*/
//-------miniUI----table
mini.parse();
    var grid = mini.get(ID);   
    grid.setColumns(cols);//设置列   
    grid.setUrl(url);
    grid.load();   
    var menu = new ColumnsMenu(grid);
</script>   </div>
     </div>
     
     <div  size="40%" showCollapseButton="true">
      
   <div id="editForm1" style="width:700px;position:relative;">
   
       <a href="">222</a>      
    <div  class="mini-tabs" style="width:100%;height:400px" activeIndex="0">      
                 <div title="采购订单">      
      <div class="mini-fit" >
<table id="purOrderL_grid" lay-filter="purOrderL_grid"></table>
<div id="purOrderL_grid" class="mini-datagrid" style="width:100%;height:100%;"
        allowCellEdit="false" allowCellSelect="true"  allowResize="true" virtualScroll="true"
        multiSelect="true">
</div>
<script>
    // init param
    var ID = "purOrderL_grid";
    var PID = "master_grid";
    //var $grid = $("#" + ID);
    var $parentWidget;
    if(PID != ""){
     $parentWidget = $("#" + PID);
    }
   
    // 离线数据模式
    var isData = false;
    var menuCode = '';
    var objectCode = 'purOrderL';
    var toolbar = 'purOrderL_toolbar';// grid ref toolbar
    var isPaging = eval('true');// is show pagination
    var url = '';// diy grid load data url
    var height = '';// diy grid load data url
  
    var objectJson = '';// object is json
    var fieldsJson = '';// fiedlds is json
    var configJson = '';// config is json

    //alert(objectCode);
    //alert(JSON.stringify(objectJson));
   
   
    if (url == '') {
        url = '/grid/query/' + objectCode;
        if(menuCode != ''){
         url = url + '-' + menuCode;
        }
    }
    var paras = $.getUrlParas();
    // 自动传递所有参数
    // 是否含有关联查询条件
    if(paras && (paras.indexOf('query_') != -1 || paras.indexOf('filter_') != -1)){
     url = url + '?' + paras;
    }
   
// 初始化组件
EovaWidget.init(objectCode, objectJson, fieldsJson, configJson);
    var config = EovaWidget.data.config,
     object = EovaWidget.data.object,
     fields = EovaWidget.data.fields;
    // 当前对象是否允许初始加载数据
    var isFirstLoad = false;
    var isFirstLoadNow = eval('true');
// 必须当前业务和对象都允许加载数据
    if(isFirstLoadNow && object.is_first_load){
     isFirstLoad = true;
    }
   
// 单元格编辑, 自定义开关
    var cols = [];
    // var validators = {};

    // 构建其它列
    //cols = $.table.buildColumn(object, fields, cols);
    cols = $.table.buildMiniUIColumn(object, fields, cols);
    // 构建首列
    //cols = $.table.buildFirstColumn(object, fields, cols);
// 构建表头合并列
/*if(object.config){
  cols = $.table.buildMergeColumn(object.config, cols);
} else {
  cols = [cols];
}*/

var limit = isPaging ? 100 : 5000;

// 分页配置
/*if(object.config && object.config != ''){
  var objectConfig = $.json.toObj(object.config);
  if (objectConfig.limit) {
   limit = objectConfig.limit;
  }
}*/

   
    //-------miniUI----table   
   
mini.parse();
    var grid = mini.get(ID);   
    grid.setColumns(cols);//设置列   
    grid.setUrl(url);
    grid.load();   
    var menu = new ColumnsMenu(grid);
</script>      </div>
     </div>
    </div>
   </div>
     </div>            
</div>
</div>
</body>
</html>

举报

felt

Rank: 8Rank: 8
沙发
发表于 2021-2-7 09:15:31 |只看该作者
为什么表格的id和上面的table的id一样？
你通过id来获取控件，请保持唯一性

举报

leijun_no1

Rank: 1
板凳
发表于 2021-2-7 23:29:05 |只看该作者
本帖最后由 leijun_no1 于 2021-2-8 00:39 编辑
felt 发表于 2021-2-7 09:15
为什么表格的id和上面的table的id一样？
你通过id来获取控件，请保持唯一性

这个代码是通过html标签tag生成的，是使用的同一个tag，所以代码是一样的，但JS执行时，id的具体值是另外赋值了。在我跟踪代码时，只执行了上部分的JS，下部分的代码压根不执行，网页就结束了。
我测试了，将下部分用另外一个tag，给了另外一个ID (SONID)，同样的下部分不能加载。

<!DOCTYPE html>
<html>
<head>
<title>采购订单列表</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<style type="text/css">html{zoom :100%}</style><script>var IMG = "http://127.0.0.1";var FILE = "http://127.0.0.1/data";var ENV = "DEV";var EOVA_FORM = "";var EOVA_ZOOM = "100%";var EOVA_LOCAL = "zh_CN";</script>
<link rel="stylesheet" href="/eova/plugins/layui/dist/css/layui.css?v=3.6.0">
<link rel="stylesheet" href="/eova/plugins/eova/theme/layui/eova.css?v=3.6.0">
<link rel="stylesheet" href="/eova/plugins/eova/css/eova.layout.css?v=3.6.0">
<link rel="stylesheet" href="/eova/plugins/eova/theme/icon/icon.css?v=3.6.0">
<link rel="stylesheet" href="/eova/plugins/ztree/css/metroStyle/metroStyle.css?v=3.6.0">
<link rel="stylesheet" href="/_eova/skin/ele.css?v=3.6.0">
<script type="text/javascript" src="/eova/ui/js/jquery-3.5.1.min.js?v=3.6.0"></script>
<!-- <script type="text/javascript" src="/eova/ui/js/axios.min.js?v=3.6.0"></script> -->
<script type="text/javascript" src="/eova/plugins/layui/dist/layui.js?v=3.6.0"></script>
<script type="text/javascript" src="/eova/plugins/eova/eova.min.js?v=3.6.0"></script>
<script type="text/javascript" src="/eova/ui/ext/eova.layer.js?v=3.6.0"></script>
<script type="text/javascript" src="/eova/ui/js/common.js?v=3.6.0"></script>
<script>
layui.config({
  base: '/eova/plugins/layui/' //静态资源所在路径
}).extend({
});

// 手工获得全局layer,不用use,方便直接使用
var layer;
layui.use('layer', function() {
  layer = layui.layer;
});

</script>
<script type="text/javascript" src="/eova/ui/ext/eova.table.js?v=3.6.0"></script>
<script type="text/javascript" src="/eova/ui/ext/eova.tags.js?v=3.6.0"></script>
<script type="text/javascript" src="/eova/plugins/eova/i18n/zh_CN.js?v=3.6.0"></script>
<script type="text/javascript" src="/eova/plugins/eova/copyright/eova.defense.min.js?v=3.6.0"></script>
<script type="text/javascript" src="/eova/plugins/My97DatePicker/WdatePicker.js?v=3.6.0"></script>
<script type="text/javascript" src="/eova/plugins/format/jsformat.js?v=3.6.0"></script>
<script type="text/javascript" src="/eova/plugins/ztree/js/jquery.ztree.all.min.js?v=3.6.0"></script>
<script type="text/javascript" src="/_eova/config.js?v=3.6.0"></script>
<script src="/scripts/boot.js" type="text/javascript"></script><script src="/scripts/miniui/resource/datagrid/js/ColumnsMenu.js" type="text/javascript"></script>
<script src="/scripts/miniui/locale/zh_CN.js" type="text/javascript"></script>

<style type="text/css">
    html,body
    {
        width:100%;
        height:100%;
        border:0;
        margin:0;
        padding:0;
        overflow:visible;
    }
</style>
</head>
<body>
<div class="mini-fit" >
  <div class="mini-splitter" vertical="true" style="width:100%;height:100%;">
      <div size="40%" showCollapseButton="true">
       <a href="">111</a>
       <div class="mini-fit" >
     <table id="master_grid" lay-filter="master_grid"></table>
     <div id="master_grid" class="mini-datagrid" style="width:100%;height:100%;"
             allowCellEdit="false" allowCellSelect="true"  allowResize="true" virtualScroll="true"
             multiSelect="true">
     </div>
     <script>
         // init param
         var ID = "master_grid";
         var PID = "";
         //var $grid = $("#" + ID);
         var $parentWidget;
         if(PID != ""){
          $parentWidget = $("#" + PID);
         }
         
         // 离线数据模式
         var isData = false;
     
         var menuCode = 'pur_order_vend_001';
         var objectCode = 'purOrderHForVend';
         var toolbar = 'master_grid_toolbar';
         var isPaging = eval('true');
         var url = '';
         var height = '';
      
         var objectJson = '';
         var fieldsJson = '';
         var configJson = '';
      
         if (url == '') {
             url = '/grid/query/' + objectCode;
             if(menuCode != ''){
              url = url + '-' + menuCode;
             }
         }
         var paras = $.getUrlParas();
         
         if(paras && (paras.indexOf('query_') != -1 || paras.indexOf('filter_') != -1)){
          url = url + '?' + paras;
         }
         
      // 初始化组件
      EovaWidget.init(objectCode, objectJson, fieldsJson, configJson);
         var config = EovaWidget.data.config,
          object = EovaWidget.data.object,
          fields = EovaWidget.data.fields;
     
         
         var isFirstLoad = false;
         var isFirstLoadNow = eval('true');
      
         if(isFirstLoadNow && object.is_first_load){
          isFirstLoad = true;
         }
         
         var cols = [];        
         cols = $.table.buildMiniUIColumn(object, fields, cols);
      
      var limit = isPaging ? 100 : 5000;
         //-------miniUI----table   
         mini.parse();
         var grid = mini.get(ID);   
         grid.setColumns(cols);//设置列   
         grid.setUrl(url);
         grid.load();  
         var menu = new ColumnsMenu(grid);
     </script>   
    </div>
     </div>
     
     <div  size="40%" showCollapseButton="true">
      
   <div id="editForm1" style="width:700px;position:relative;">
   
       <a href="">222</a>      
    <div  class="mini-tabs" style="width:100%;height:400px" activeIndex="0">      
                 <div title="采购订单">      
      <div class="mini-fit" >
        <table id="purOrderL_grid" lay-filter="purOrderL_grid"></table>
        <div id="purOrderL_grid" class="mini-datagrid" style="width:100%;height:100%;"
                allowCellEdit="false" allowCellSelect="true"  allowResize="true" virtualScroll="true"
                multiSelect="true">
        </div>
        
        <script>
            // init param
            var SONID = "purOrderL_grid";
            var PID = "master_grid";
            //var $grid = $("#" + ID);
            var $parentWidget;
            if(PID != ""){
             $parentWidget = $("#" + PID);
            }
            
            var isData = false;
        
            var menuCode = '';
            var objectCode = 'purOrderL';
            var toolbar = 'purOrderL_toolbar';
            var isPaging = eval('true');
            var url = '';
            var height = '';
         
            var objectJson = '';
            var fieldsJson = '';
            var configJson = '';
         
            if (url == '') {
                url = '/grid/query/' + objectCode;
                if(menuCode != ''){
                 url = url + '-' + menuCode;
                }
            }
            var paras = $.getUrlParas();
            
            if(paras && (paras.indexOf('query_') != -1 || paras.indexOf('filter_') != -1)){
             url = url + '?' + paras;
            }
            
         EovaWidget.init(objectCode, objectJson, fieldsJson, configJson);
            var config = EovaWidget.data.config,
             object = EovaWidget.data.object,
             fields = EovaWidget.data.fields;        
            
            var isFirstLoad = false;
            var isFirstLoadNow = eval('true');
         
            if(isFirstLoadNow && object.is_first_load){
             isFirstLoad = true;
            }
            
            var cols = [];
            
            cols = $.table.buildMiniUIColumn(object, fields, cols);
            
         var limit = isPaging ? 100 : 5000;
         
            //-------miniUI----table   
            
         mini.parse();
            var songrid = mini.get(SONID);   
            songrid.setColumns(cols);//设置列   
            songrid.setUrl(url);
            songrid.load();
            
            var sonmenu = new ColumnsMenu(songrid);
            
        </script>      
       </div>
     </div>
    </div>
   </div>
     </div>            
</div>
</div>
</body>
</html>


举报

leijun_no1

Rank: 1
地板
发表于 2021-2-8 02:06:44 |只看该作者
felt 发表于 2021-2-7 09:15
为什么表格的id和上面的table的id一样？
你通过id来获取控件，请保持唯一性

发现一个现象：
当我把mini.parse(); 这句，放在上部分JS的最后，则上部分table由于setCloumn方法报错，不显示上部分table；但却可以执行到下部分的<script>标签内的代码，下部分的table就出来了。
这个mini.parse();可以在js执行过程中重复执行吗，它起了什么作用呢？

举报

felt

Rank: 8Rank: 8
5#
发表于 2021-2-8 09:09:33 |只看该作者
leijun_no1 发表于 2021-2-8 02:06
发现一个现象：
当我把mini.parse(); 这句，放在上部分JS的最后，则上部分table由于setCloumn方法报错， ...

不要把js卸载控件结构中间。你这样的结构解析的时候被处理掉了。
把js拎出来放到最下面去，和页面的div分开。

举报

leijun_no1

Rank: 1
6#
发表于 2021-2-8 17:40:08 |只看该作者
felt 发表于 2021-2-8 09:09
不要把js卸载控件结构中间。你这样的结构解析的时候被处理掉了。
把js拎出来放到最下面去，和页面的div分 ...

终于搞定了，就是JS写的位置问题。由于代码是动态的，要重用控件需要改的地方比较多。
始终还是不太明白，按理很多JS在一个网页应该顺序执行，有时可以执行，有时不行。

举报

返回列表 发新帖

Archiver|普加软件

GMT+8, 2024-11-26 18:38 , Processed in 1.057297 second(s), 9 queries .

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部