标签：function document 流程 aElements modal var 表单 泛微 弹窗

        本文旨在记录使用泛微OA开发过程中用到的一些模块，会随着深入使用继续补充，分享出来。如有问题欢迎讨论~

1、泛微流程表单新增模态窗

<div>
  <div id="myModal" class="modal">
  	<!-- 弹窗内容 -->
    <div class="modal-content">
      <span class="close">&times;</span>
      <p>弹窗中的文本...</p>
    </div>
  </div>
</div>

<script>

var htmlDom=document.getElementById('testBtn') //根据设置的id改写
var btn=document.createElement('button'); // 创建button元素
btn.innerText="弹窗按钮";   // 设置button的显示文本
  btn.onclick=function() {
    modal.style.display = "block";
}
htmlDom.appendChild(btn); // 在元素中添加一个子元素button
  // 获取弹窗
var modal = document.getElementById('myModal');

// 获取 <span> 元素，用于关闭弹窗
var span = document.querySelector('.close');

// 点击 <span> (x), 关闭弹窗
span.onclick = function() {
    modal.style.display = "none";
}
 
// 在用户点击其他地方时，关闭弹窗
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
</script>

<style>
  /* 弹窗 (background) */
.modal {
    display: none; /* 默认隐藏 */
    position: fixed; /* 固定定位 */
    z-index: 1; /* 设置在顶层 */
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%;
    overflow: auto; 
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.4); 
}

/* 弹窗内容 */
.modal-content {
    background-color: #fefefe;
    margin: 15% auto; 
    padding: 20px;
    border: 1px solid #888;
    width: 80%; 
}

/* 关闭按钮 */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
</style>

2、根据字符串创建Dom结构

//使用字符串创建dom
//params:
//type：外层创建dom的类型
//arg：要创建dom结构的字符串
//返回值：字符串创建的Dom node
function parseDom(type, arg) {
　　var objE = document.createElement(type);
　　objE.innerHTML = arg;
　　return objE.childNodes;
};

3、根据属性值（attributes）查找Dom结点

//根据属性值查找Dom结点
//params:
//tag：欲查找的Html标签名
//dataAttr：欲查找的属性值名称
//reg：正则表达式匹配规则
//返回值：目标属性值结点列表
function getElementByAttr(tag, dataAttr, reg) {
  var aElements = document.getElementsByTagName(tag);
  var aEle = [];
  for(var i = 0; i < aElements.length; i++) {
    var ele = aElements[i].getAttribute(dataAttr);
    if(reg.test(ele)) {
        aEle.push(aElements[i]);
    }
  }
  return aEle;
}

4、表单操作追加按钮

效果图：

function getElementByAttr(tag, dataAttr, reg) {
  var aElements = document.getElementsByTagName(tag);
  var aEle = [];
  for(var i = 0; i < aElements.length; i++) {
    var ele = aElements[i].getAttribute(dataAttr);
    if(reg.test(ele)) {
        aEle.push(aElements[i]);
    }
  }
  return aEle;
}

var divs = getElementByAttr('div', 'ecid', /@qjebvs/);
var submitBtnGroup = divs[divs.length - 1].childNodes[0]
var dropdownBtnSpanDom = submitBtnGroup.childNodes[submitBtnGroup.childNodes.length - 2]

//使用字符串创建dom
function parseDom(type, arg) {
　　var objE = document.createElement(type);

　　objE.innerHTML = arg;
　　return objE.childNodes;

};

var newBtnText = '测试按钮' //按钮名称
var newBtnSpan = '<span style="display: inline-block; line-height: 28px; vertical-align: middle; margin-left: 10px;"><button ecid="_Route@vmt0lk_Comp@upn4fo_Button@2oxqe7@0_button@xq1ea3" title="' + newBtnText + '" type="button" class="ant-btn ant-btn-primary" onclick="testClick()"><div class="wf-req-top-button">' + newBtnText + '</div></button></span>'
var newBtnSpanDom = parseDom('span', newBtnSpan);

var testClick = function() {
  //此处书写代码逻辑
  console.log('测试按钮')
}
submitBtnGroup.insertBefore(newBtnSpanDom[0],dropdownBtnSpanDom);

 （未完待续）

标签：function,document,流程,aElements,modal,var,表单,泛微,弹窗
来源： https://blog.csdn.net/u014241231/article/details/120885128

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。