jQuery MiniUI

标题: 用mini-splitter分隔的上下两个表格，为啥下部表格始终不加载 [打印本页]

作者: leijun_no1 时间: 2021-2-6 12:23:57 标题: 用mini-splitter分隔的上下两个表格，为啥下部表格始终不加载

本帖最后由 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 时间: 2021-2-7 09:15:31

为什么表格的id和上面的table的id一样？
你通过id来获取控件，请保持唯一性

作者: leijun_no1 时间: 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/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 时间: 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 时间: 2021-2-8 09:09:33

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

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

作者: leijun_no1 时间: 2021-2-8 17:40:08

felt 发表于 2021-2-8 09:09
不要把js卸载控件结构中间。你这样的结构解析的时候被处理掉了。
把js拎出来放到最下面去，和页面的div分 ...

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

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