通达OA通用版V12的表单js定制开发,良好实践总结-持续更新

本文主要是介绍通达OA通用版V12的表单js定制开发,良好实践总结-持续更新,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

通达OA通用版V12的表单js定制开发的良好实践总结-持续更新

  • 良好实践总结
    • 在表单中的js区域标准代码
    • 2023年10月19日
      • 获取地址栏:协议、域名/IP地址+端口号
      • 获取地址栏的参数,比如run_id、flow_id等
      • 向表单中追加自定义css、js文件

良好实践总结

  • 在webroot下的static目录下新建目录,比如tdoa_erkai,用于存放定制过程用到的额外的css文件、js文件。

在表单中的js区域标准代码

//向html中的head元素,追加标签
var headadd = document.getElementsByTagName("head")[0];
//追加link标签,引入css样式
var links = document.createElement('link');
links.href = '/static/tdoa_erkai/layui/css/layui.css';
links.rel = 'stylesheet';
links.type = 'text/css';
//追加script标签,引入js
var scripts = document.createElement("script");
scripts.src = "/static/tdoa_erkai/layui/layui.js";
scripts.type = "text/javascript";
headadd.appendChild(scripts);setTimeout(function(){var scripts = document.createElement("script");scripts.src = "/static/tdoa_erkai/erkai.js";scripts.type = "text/javascript";headadd.appendChild(scripts);
},1000);

这样做的好处,可以避免多次反复保存表单,刷新预览表单。
其中

  1. tdoa_erkai为自定义目录
  2. erkai.js为与当前表单交互的自定义的js文件。
    编写完erkai.js,保存后,在表单预览页面,刷新看效果。

2023年10月19日

获取地址栏:协议、域名/IP地址+端口号

var pro = window.location.protocol;//http或https
var host = window.location.host;//域名或ip地址+端口号
var url = pro + "//" + host;

获取地址栏的参数,比如run_id、flow_id等

//自定义 解析地址栏的数据 的函数
function getUrlData() {var href= window.location.href;//读取地址栏var hrefArr=href.split('?');var data=[];if(hrefArr.length>1){//地址栏中存在?,且有参数data=hrefArr[1].split('&');//地址栏中即时没有&,这里也不会报错。}var obj = {};var tmp_arr=[];var tmp_str = "";for (var i = 0; i < data.length; i++) {tmp_arr = data[i].split('=');tmp_str = tmp_arr[0].toLowerCase();obj[tmp_str] = tmp_arr[1];}return obj;
}

预览表单时的效果如下图:
在这里插入图片描述

向表单中追加自定义css、js文件

//向html中的head元素,追加标签
var headadd = document.getElementsByTagName("head")[0];
//追加link标签,引入css样式
var links = document.createElement('link');
links.href = '/static/tdoa_erkai/layui/css/layui.css';
links.rel = 'stylesheet';
links.type = 'text/css';
headadd.appendChild(links );
//追加script标签,引入js
var scripts = document.createElement("script");
scripts.src = "/static/tdoa_erkai/layui/layui.js";
scripts.type = "text/javascript";
headadd.appendChild(scripts);

这篇关于通达OA通用版V12的表单js定制开发,良好实践总结-持续更新的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/243927

相关文章

Agent开发核心技术解析以及现代Agent架构设计

《Agent开发核心技术解析以及现代Agent架构设计》在人工智能领域,Agent并非一个全新的概念,但在大模型时代,它被赋予了全新的生命力,简单来说,Agent是一个能够自主感知环境、理解任务、制定... 目录一、回归本源:到底什么是Agent?二、核心链路拆解:Agent的"大脑"与"四肢"1. 规划模

SpringBoot简单整合ElasticSearch实践

《SpringBoot简单整合ElasticSearch实践》Elasticsearch支持结构化和非结构化数据检索,通过索引创建和倒排索引文档,提高搜索效率,它基于Lucene封装,分为索引库、类型... 目录一:ElasticSearch支持对结构化和非结构化的数据进行检索二:ES的核心概念Index:

Python数据验证神器Pydantic库的使用和实践中的避坑指南

《Python数据验证神器Pydantic库的使用和实践中的避坑指南》Pydantic是一个用于数据验证和设置的库,可以显著简化API接口开发,文章通过一个实际案例,展示了Pydantic如何在生产环... 目录1️⃣ 崩溃时刻:当你的API接口又双叒崩了!2️⃣ 神兵天降:3行代码解决验证难题3️⃣ 深度

C++ move 的作用详解及陷阱最佳实践

《C++move的作用详解及陷阱最佳实践》文章详细介绍了C++中的`std::move`函数的作用,包括为什么需要它、它的本质、典型使用场景、以及一些常见陷阱和最佳实践,感兴趣的朋友跟随小编一起看... 目录C++ move 的作用详解一、一句话总结二、为什么需要 move?C++98/03 的痛点⚡C++

C# List.Sort四种重载总结

《C#List.Sort四种重载总结》本文详细分析了C#中List.Sort()方法的四种重载形式及其实现原理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友... 目录1. Sort方法的四种重载2. 具体使用- List.Sort();- IComparable

SpringBoot项目整合Netty启动失败的常见错误总结

《SpringBoot项目整合Netty启动失败的常见错误总结》本文总结了SpringBoot集成Netty时常见的8类问题及解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参... 目录一、端口冲突问题1. Tomcat与Netty端口冲突二、主线程被阻塞问题1. Netty启动阻

SpringBoot整合Kafka启动失败的常见错误问题总结(推荐)

《SpringBoot整合Kafka启动失败的常见错误问题总结(推荐)》本文总结了SpringBoot项目整合Kafka启动失败的常见错误,包括Kafka服务器连接问题、序列化配置错误、依赖配置问题、... 目录一、Kafka服务器连接问题1. Kafka服务器无法连接2. 开发环境与生产环境网络不通二、序

Python+wxPython开发一个文件属性比对工具

《Python+wxPython开发一个文件属性比对工具》在日常的文件管理工作中,我们经常会遇到同一个文件存在多个版本,或者需要验证备份文件与源文件是否一致,下面我们就来看看如何使用wxPython模... 目录引言项目背景与需求应用场景核心需求运行结果技术选型程序设计界面布局核心功能模块关键代码解析文件大

C++多线程开发环境配置方法

《C++多线程开发环境配置方法》文章详细介绍了如何在Windows上安装MinGW-w64和VSCode,并配置环境变量和编译任务,使用VSCode创建一个C++多线程测试项目,并通过配置tasks.... 目录下载安装 MinGW-w64下载安装VS code创建测试项目配置编译任务创建 tasks.js

python3中正则表达式处理函数用法总结

《python3中正则表达式处理函数用法总结》Python中的正则表达式是一个强大的文本处理工具,用于匹配、查找、替换等操作,在Python中正则表达式的操作主要通过内置的re模块来实现,这篇文章主要... 目录前言re.match函数re.search方法re.match 与 re.search的区别检索