jeecg之弹窗插件lhgdialog小结

痛定思痛。 2023-06-01 03:24 5阅读 0赞

# [jeecg之弹窗插件lhgdialog小结][jeecg_lhgdialog] #

说到弹窗，在jeecg中弹窗用到最多的地方无非是新增/编辑的弹窗。

1.列表页面新增编辑按钮触发的弹窗即lhgdialog，不论是add/update，最终走的都是curdtools.js中的createwindow

核心代码：``

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> 
    <div>
      10 
    </div> 
    <div>
      11 
    </div> 
    <div>
      12 
    </div> 
    <div>
      13 
    </div> 
    <div>
      14 
    </div> 
    <div>
      15 
    </div> 
    <div>
      16 
    </div> 
    <div>
      17 
    </div> 
    <div>
      18 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>var mydialog = $.dialog({ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>content:&nbsp;</code> 
      <code>'url:'</code> 
      <code>+addurl,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>lock :&nbsp;</code> 
      <code>true</code> 
      <code>,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>zIndex: getzIndex(),</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>width:width,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>height:height,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>title:title,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>opacity :&nbsp;</code> 
      <code>0.3</code> 
      <code>,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>cache:</code> 
      <code>false</code> 
      <code>,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>ok: function(){ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>iframe =&nbsp;</code> 
      <code>this</code> 
      <code>.iframe.contentWindow;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>saveObj();</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>return</code>&nbsp; 
      <code>false</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>},</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>okVal: $.i18n.prop(</code> 
      <code>'dialog.submit'</code> 
      <code>),</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>cancelVal: $.i18n.prop(</code> 
      <code>'dialog.close'</code> 
      <code>),</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>cancel:&nbsp;</code> 
      <code>true</code>&nbsp; 
      <code>/*为true等价于function(){}*/</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>});</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

可以查阅官方api了解每个参数的意义：[http://www.lhgdialog.com/api/][http_www.lhgdialog.com_api]

此处只解释一个属性：content: 'url:'+addurl

如果addurl传入的地址指向了一个页面，那么这个新的页面内容会以iframe的形式加载出来（需要注意的是弹窗本身并非iframe）,那么正题来了，既然他的真面目是iframe，那么涉及iframe的传值、方法调用用在此处均可。

a.父页面调用子页面的方法 $("\#iframeId")\[0\].contentWindow.childMethod(); 通过获取iframe的js对象调用其contentWindow.子页面的方法

b.子页面调用父页面的方法 parent.parentMethod();

其实查阅lhgdialog api可以发现类似的的调用方法：

2.说完JS接下来需要探索一下css的修改，因为此弹窗的样式被改造过，所以按照官方文档可能有时达不到想要的效果，

1）每种风格有不同的样式效果，查看baseTag代码，可知每种风格下会引入哪些样式。

2）找到对应base中引入的skin-css，修改样式：

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> 
    <div>
      10 
    </div> 
    <div>
      11 
    </div> 
    <div>
      12 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>/**此样式为弹窗title的颜色*/</code> 
     </div> 
     <div> 
      <code>.ui_lt, .ui_rt, .ui_lb, .ui_rb, .ui_t, .ui_b { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>background: #18a689!important;</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
     <div> 
      <code>/**此样式为弹窗确认按钮的样式*/</code> 
     </div> 
     <div> 
      <code>input.ui_state_highlight { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>background: #18a689 none repeat scroll&nbsp;</code> 
      <code>0</code>&nbsp; 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border: 1px solid #18a689;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>color: #fff;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>text-shadow:&nbsp;</code> 
      <code>0</code>&nbsp; 
      <code>-1px 1px #1c6a9e;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>height: 30px;</code> 
     </div> 
     <div> 
      <code>}　</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

3）插件位置：新版jeecg中lhgdialog被移至jeecg-common-plugin-ui项目中去了，也就是说在jeecg项目中无法直接修改lhgdialog相关的js/css。

转载于:https://www.cnblogs.com/Jeely/p/11309966.html

[jeecg_lhgdialog]: https://www.cnblogs.com/jeecg158/p/10039596.html
[http_www.lhgdialog.com_api]: http://www.lhgdialog.com/api/