javascript --- 利用Sortable实现一个可视化公式编辑器

Sortable的依赖引入和简单使用参见:https://blog.csdn.net/piano9425/article/details/90437182
先简单的介绍一下可视化公式编辑器的功能(样式没有调,毕竟每个人的需求都不一样):
在这里插入图片描述
首先会有2个需要计算的(我称为操作数)A_XiangRaoZuWenSheng和AYKZQ_CS,以及两个操作符ADD(加法),TAVG(时间平均值)
可以把需要计算的操作数移到操作区,并配上相应的操作符:然后预览操作区:
在这里插入图片描述
可以看到操作数和符号生成了相应的公式.
点击生成操作数
在这里插入图片描述
可以看见刚才的2个操作数和1个操作符合并成了一个(level2)操作数.
可以把这个2级操作数放到暂存区,然后在操作区再生成一个2级操作数
在这里插入图片描述
这次用TAVG生成了一个2级操作数.
下面将2个操作数进行加运算.
得到最终需要的表达式:
在这里插入图片描述
注：
1.用于拖拽的操作数和操作符使用的是Sortable克隆功能,(这些操作数和操作符可以根据实际自己生成);
2.有一个全部添加到操作区,用于将所有的操作数和操作符添加到操作区,(实际中可能数据很多,一个一个拖拽不方便)
3.可以把暂时用不到的放到暂存区,生成错的或以后用不到的全部放入会收区.

下面附上相应的代码(主要是逻辑实现,根据具体的环境的不同,若复制粘贴不一定能实现):

// drag.html (格式部分使用了layui,可以根据个人喜欢和实际需求自己选择)<div class="layui-colla-item"><h2 class="layui-colla-title">编辑操作数</h2><div class="layui-colla-content layui-show"><div class="content"><div class="layui-col-md3"><button ng-click="drag.addAll2Op('operator1')">添加全部到操作区</button></div><!-- <div class="layui-col-md3"><button ng-click="drag.addAll2Op('operator2')">添加全部到操作数2</button></div> --><ul id="operator" class=" layui-col-md12 " tyle=" border:1px solid black;height:76px;"><li class="operator-style">A_XiangRaoZuWenSheng</li><li class="operator-style">AYKZQ_CS</li><li class="operator-style">ADD</li><li class="operator-style">TAVG</li></ul><div class="layui-col-md12">操作区预览:{{drag.operator1}}</div><ul id="operator1" class="layui-col-md12" onFocus="drag.getFocus('operator1')" style="height:37px; border:1px solid black"><button ng-click="drag.preOp('operator1')">预览操作区</button><button ng-click="drag.genOp('operator1')">生成操作数</button></ul><ul id="operator2" class="layui-col-md12 " style="height:37px; border:1px solid black;margin-top:15px;">暂存区</ul><input id="operator3" class="layui-col-md12 " style="height:74px; border:1px solid black;margin-top:15px;" placeholder="回收区"><button ng-click="showExpr()">显示表达式</button><ul>{{expression}}</ul></div></div></div>


// drag.js代码,Sortable.create(operator, {group: {name: "computePoint",pull: 'clone'},sort: true,})// 操作区Sortable.create(operator1, {group: 'computePoint',sort: true,})// 暂存区Sortable.create(operator2, {group: 'computePoint',sort: true,})// 回收区Sortable.create(operator3, {group: {name: "computePoint",pull: false,},sort: false,})// 对drag页面的操作;this.$scope.drag = {operator1: '', // 操作数1预览// 添加所有操作数, 放到操作数列表.addAll2Op: (id) => {let list = $('#operator').children('li');let len = list.length;if (len > 0) {for (let i = 0; i < len; i++) {let item = list[i];$('#' + id).append(item);}}},// 预览操作数preOp: (id) => {this.$scope.drag.operator1 = '';let op = this.$scope.drag.handleOp(id);this.$scope.drag.operator1 = op;},// 处理操作数handleOp: (id) => {let len = $('#' + id).children('li').length;if (len < 1) {return '';}if (len === 1) {let op = $('#' + id).children('li')[0].innerHTML;return op;} else {let expr = ''; // 表达式初始化为空let list = $('#' + id).children('li');let type = ''; // 判断是ADD类型还是MAX类型for (let i = 0; i < len; i++) {let item = list[i].innerHTML;if (item === 'MAX' || item === 'MIN' || item === 'AVG' ||item === 'TAVG' || item === 'TMIN' || item === 'TMAX') {type = "MAX";break;}if (item === 'ADD' || item === 'MINUS' || item === 'MULT' ||item === 'DIV') {type = "ADD";break;}}if (type === '') {return '缺少操作符!'} else if (type === 'MAX') {for (let i = 0; i < len; i++) {let item = list[i].innerHTML; // 获取当前li的值if (item === 'MAX' || item === 'MIN' || item === 'AVG' ||item === 'TAVG' || item === 'TMIN' || item === 'TMAX') {expr = item + "(" + expr;} else if (i !== len - 1) {expr += item + ',';}if (i === len - 1) {expr = expr + item + ')';}}} else { // ADD类型expr += '('for (let i = 0; i < len; i++) {let item = list[i].innerHTML;if (item === 'ADD') {item = ' + '}if (item === 'MINUS') {item = ' - ';}if (item === 'MULT') {item = ' x ';}if (item === 'DIV') {item = ' ÷ ';}expr += item;if (i === len - 1) {expr += ')';}}}return expr;}},// 生成操作数genOp: (id) => {let op = this.$scope.drag.handleOp(id);let list = $('#' + id).children('li');let len = list.length;if (len > 0) {for (let i = 0; i < len; i++) {let item = list[i];$('#operator3').append(item);}}let option = '<li class="operator-style" draggable="false" style="width:200px;">' + op + '</li>';$('#' + id).append(option);}}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/251278.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

使用uni-app搭建微信小程序

使用uni-app搭建微信小程序

0 问题待解决 import { } 与否为什么要封装对齐问题每次重启项目&#xff0c;sitemap就会消失动态修改标题失效图片问题多多 &#xff1a;高度自适应 改成image固定高度&#xff0c;mode&#xff1a;aspectFill微信小程序文档b站视频链接后端接口文档 一、知识点 uni-app 是…
阅读更多...
HttpTomcat

HttpTomcat

本节内容&#xff1a; Http协议Tomcat服务器下面开始的一系列内容都是JavaEE的内容&#xff0c;主要的内容见下图。JavaEE主要是做服务器端开发。 JavaEE全部规范&#xff1a;有13门技术&#xff0c;主要做web开发的需要学习servlet和jsp。其他技术&#xff0c;像EJB、 JNDI、J…
阅读更多...
python---线程与进程

python---线程与进程

一 线程 1.1 概述 线程是操作系统能够进行运算调度的最小单位。它被包含在进程之中&#xff0c;是进程中的实际运作单位。一条线程指的是进程中一个单一顺序的控制流&#xff0c;一个进程中可以并发多个线程&#xff0c;每条线程并行执行不同的任务。 Threading用于提供线程相关…
阅读更多...
javascrpt --- 使用jquery添加dom元素和Angular ng-repeat生成select性能比较

javascrpt --- 使用jquery添加dom元素和Angular ng-repeat生成select性能比较

今天用两种方法实现了动态的给select添加option的功能. 第一种是用jquery. // html <select id"drag-pointList"></select> // js $(#drag-pointList).children(option).remove(); // 清空之前的option let list res.data.list ; // res是ajax请…
阅读更多...
【C语言及程序设计】项目2-15：模块化的简单银行系统设计

【C语言及程序设计】项目2-15：模块化的简单银行系统设计

问题描述&#xff1a; https://edu.csdn.net/course/play/456/4808 // 银行系统.cpp: 定义控制台应用程序的入口点。 //#include "stdafx.h" #include <stdlib.h> #pragma warning (disable: 4996)int PassTest(); void ibalance(); void withdraw(); void de…
阅读更多...
Android 6.0 动态权限申请

Android 6.0 动态权限申请

1. 概述 Android 6.0 (API 23) 之前应用的权限在安装时全部授予&#xff0c;运行时应用不再需要询问用户。在 Android 6.0 或更高版本对权限进行了分类&#xff0c;对某些涉及到用户隐私的权限可在运行时根据用户的需要动态授予。这样就不需要在安装时被强迫同意某些权限。 2. …
阅读更多...
el-input输入金额，保留两位小数

el-input输入金额，保留两位小数

需求&#xff1a;“只允许输入金额保留两位小数”&#xff0c;有2种实现方法 方法一&#xff08;通过正则控制&#xff09;&#xff1a; html&#xff1a; <el-inputv-model"inputTable.amount"input"formatNum(form.amount, amount)" ></el-i…
阅读更多...
斜率DP总结

斜率DP总结

chunlvxiong的博客 T1&#xff1a;防御准备 三个月后第一次写博客&#xff0c;我们从这个题开始&#xff1a;http://www.lydsy.com/JudgeOnline/problem.php?id3156。 这道题DP方程比较好写&#xff1a;用dp[i]表示1到i全部被控制的最小代价&#xff0c;那么dp[i]min{dp[j](i-…
阅读更多...
前端使用react-intl-universal进行国际化

前端使用react-intl-universal进行国际化

一、国际化 / i18n 目前国际化&#xff0c;就是开发者写对象&#xff0c;一个key关联若干语种的翻译。相比于浏览器自带的翻译功能&#xff0c;语义更加准确。 “国际化”的简称&#xff1a;i18n&#xff08;其来源是英文单词 internationalization的首末字符i和n&#xff0c;…
阅读更多...
2021前端面试题

2021前端面试题

基础知识与素养 JS基本功训练与思考 程序设计的渗透与应用 业务技巧的积累与训练 生产力转换 项目的组织架构 转换专业人才的全面生产力 什么样的技术水平决定了你应该学习什么样的知识与技术&#xff0c;什么样的知识与技术水平决定了你到什么样的公司&#xff0c;到什么样的公…
阅读更多...
glog日志库使用笔记

glog日志库使用笔记

日志能方便地诊断程序原因、统计程序运行数据&#xff0c;是大型软件系统必不可少的组件之一。glog 是google的开源日志系统&#xff0c;相比较log4系列的日志系统&#xff0c;它更加轻巧灵活。 在Github上下载glog&#xff0c;解压后用CMake生成VS2017工程&#xff08;默认生成…
阅读更多...
elementPlus关闭弹窗，页面原先滚动条消失

elementPlus关闭弹窗，页面原先滚动条消失

一开始以为是弹窗内容超过一屏引起&#xff0c;改为一屏内也不能解决。 打开控制台&#xff0c;发现弹窗后自动给body标签加上了类el-popup-parent–hidden&#xff0c;关闭后也没去除&#xff0c;因此手动删除该类。 document.getElementsByTagName(body)[0].className ;
阅读更多...
在Windows下如何创建虚拟环境（默认情况下）

在Windows下如何创建虚拟环境（默认情况下）

很多小伙伴平时在使用Python的时候&#xff0c;有的项目需要使用Python2来进行开发&#xff0c;有的项目则是需要Python3来进行开发。当不清楚怎么分开环境的时候&#xff0c;此时两个环境开始打架&#xff0c;彼此傻傻分不清楚。虚拟环境作为隔离的利器应运而生&#xff0c;其…
阅读更多...
selenium python 入门-元素定位

selenium python 入门-元素定位

环境搭建 安装教程 http://www.testclass.net/selenium_python/install-selenium/ chrome浏览器 还需要下载chrome driver 把下载的chromedriver .exe放到chrome安装目录下的Application目录下和 python所在的安装目录下&#xff0c;比如我的目录是C:\Program Files (x86)\Goog…
阅读更多...
DPDK helloworld 源码阅读

DPDK helloworld 源码阅读

在 DPDK Programmers Guides 中的 EAL 一篇中有一个图可以很清晰地看到一个DPDK的应用程序的大致执行思路&#xff1a; 初始化检查CPU支持、微架构配置等完成后&#xff0c;执行main()函数。 第一步是 rte_eal_init()&#xff0c;核心初始化和启动。其中线程使用的是pthread库&…
阅读更多...
看了吗网址链接

看了吗网址链接

sklearn实战-乳腺癌细胞数据挖掘&#xff08;博主亲自录制视频&#xff09; https://study.163.com/course/introduction.htm?courseId1005269003&utm_campaigncommission&utm_sourcecp-400000000398149&utm_mediumshare # -*- coding: utf-8 -*- ""&qu…
阅读更多...
JMeter 性能测试进阶实战

JMeter 性能测试进阶实战

课程简介 本课程制作的主要目的是为了让大家快速上手 JMeter&#xff0c;期间穿插了大量主流项目中用到的技术&#xff0c;以及结合当今主流微服务技术提供了测试 Dubbo 接口、Java 工程技术具体实施方案&#xff0c;注重实践、注意引导测试思维、拒绝枯燥的知识点罗列、善于用…
阅读更多...
JavaScript高级程序设计阅读笔记

JavaScript高级程序设计阅读笔记

2020-11-15 通过初始化指定变量类型 数字-1 对象null和null的比较&#xff08;不理解&#xff09;使用局部变量将属性查找替换为值查找&#xff08;算法复杂度&#xff09;循环的减值迭代&#xff0c;降低了计算终止条件的复杂度switch快多个变量声明逗号隔开使用数组和对象字面…
阅读更多...
windows任务计划程序 坑

windows任务计划程序 坑

转载于:https://www.cnblogs.com/kaibindirver/p/8109041.html
阅读更多...
javascript --- 类、class、事件委托的编程风格

javascript --- 类、class、事件委托的编程风格

类风格: // 父类 function Widget(width, height) {this.width width || 50;this.height height || 50;this.$elem null; } Widget.prototype.render function($where) {if(this.$elem) {this.$elem.css({width: this.width "px",height: this.height "p…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023