element | 易学教程

js 前端将平级数据转为树形数据的方法

阅读更多关于 js 前端将平级数据转为树形数据的方法

1.js 前端将平级数据转为树形数据的方法转，实测成功 https://segmentfault.com/a/1190000022444269 // 将同级数据转化为树形结构 listToTree(dataSource) { // datasource是平级的数据来源 return dataSource.filter(e => { const pid = e.parentId const resultArr = dataSource.filter(ele => { if (ele.menuId === pid) { if (! ele.children) { ele.children = [] } ele.children.push(e) return true } }) return resultArr.length === 0 }) }, 2. element-ui 树形结构的table，如何改变小箭头所在的列，默认在第一列数据上。 https://segmentfault.com/q/1010000019098934/revision 修改的话，就将第一列的type改为'', 如果你在第三列展开，前面2列全部为空真的搜索了好久才找到办法来源： oschina 链接： https://my.oschina.net/u/4343260/blog/4445372

教你一招：element日期选择器el-date-picker修改指定日期样式

阅读更多关于教你一招：element日期选择器el-date-picker修改指定日期样式

一、概述今天在项目开发中有一个需求，要求日期选择器中，指定的日期标红，并且其他日期不能选择。查阅资料后我们得知，ElementUI在2.12.0版本里，日期选择器的picker-options新增了cellClassName方法，那么我们就来看一下如何实现。二、代码分析 1. 定义一个pickerOptions并绑定给el-date-picker元素上，如下图：代码如下： <el-date-picker class="myDatePicker" v-model="update" type="date" :picker-options="pickerOptions" format="yyyy-MM-dd" :clearable="false" value-format="yyyy-MM-dd" placeholder="监测时间"></el-date-picker> 2. 定义pickerOptions对象，其中disabledDate方法是控制只有给定的日期数组containerVue.notWriteDaily中的日期才可以点击，cellClassName方法是控制指定的日期设置指定的class。如下图：代码如下： pickerOptions:{ //限制日期只能选择给定的日期 disabledDate:function(time){ if(!containerVue

干！垃圾微软！发布我的Netcore跨平台UI框架 CPF

阅读更多关于干！垃圾微软！发布我的Netcore跨平台UI框架 CPF

什么鬼，我的CPF快写好了，你居然也要搞跨平台UI框架？什么Maui？之前怎么不早说要搞跨平台UI框架呢？看到谷歌搞flutter眼红了？明年年底发布？又搞这种追别人屁股的烂事情。什么MVU模式？模仿Dart？用C#代码直接写UI的模式和我的CPF很像啊。当初我考虑过XML，Json来描述UI，但是我感觉这些都是多余的累赘，而且还需要学习语法，感觉Xaml很啰嗦，如果有设计器的话，直接生成对应的UI代码不是更直接？而且用XML、Json需要多消耗解析UI代码的资源。所以一开始我是模仿Winform直接用C#来描述的，不过Winform生成的代码很冗长，直接看这种代码很费劲，所以考虑优化代码结构，看看能否有既可以直接运行生成UI，既可以直观描述结构的 1 new Panel 2 { 3 ToolTip= " 最大化 " , 4 Name= " max " , 5 Width = 30 , 6 Height = " 100% " , 7 Children= 8 { 9 new Rectangle 10 { 11 Width= 14 , 12 Height= 12 , 13 StrokeStyle= " 2 " , 14 StrokeFill = "#fff" 15 } 16 }, 17 Commands = 18 { 19 { 20 nameof(Button

ObjectUtils.java

阅读更多关于 ObjectUtils.java

import lombok.extern.slf4j.Slf4j; import com.donkeycode.core.io.FastByteArrayOutputStream; import java.io.ByteArrayInputStream; import java.io.ObjectInputStream; import java.io.ObjectOutputStream; import java.lang.reflect.Array; import java.lang.reflect.InvocationTargetException; import java.util.*; import org.springframework.cglib.beans.BeanCopier; /** * 对象操作工具类 * * @author nanfeng * @date 2019年12月10日 * @since 0.0.1 */ @Slf4j public class ObjectUtils { /** * 比较两个对象是否相等。<br> * 相同的条件有两个，满足其一即可：<br> * <code> * 1. obj1 == null && obj2 == null; * 2. obj1.equals(obj2) * </code> * * @param obj1 *

越来越少人用JQuery，但你就不学了吗？（2）

阅读更多关于越来越少人用JQuery，但你就不学了吗？（2）

如需要跟多资料请点击下方图片⬇（扫码加好友→备注66） Jquery选择器和使用js操作Dom一样，获取文档中的节点对象是很频繁的一个操作，在jQuery中提供了简便的方式供我们查找|定位元素，称为jQuery选择器，选择器可以说是最考验一个人 jQuery 功力的地方，通俗的讲, Selector 选择器就是"一个表示特殊语意的字符串"。只要把选择器字符串传入上面的方法中就能够选择不同的Dom 对象并且以 jQuery 包装集的形式返回。 jQuery 选择器按照功能主要分为"选择"和"过滤"。并且是配合使用的，具体分类如下。基础选择器掌握即可 ,其他用到再查阅。基础选择器选择器名称举例 id选择器 #id $("#testDiv")选择id为testDiv的元素元素名称选择器 element $("div")选择所有div元素类选择器 .class $(".blue")选择所有class=blue的元素选择所有元素 * $("*")选择页面所有元素组合选择器 selector1,selector2,selectorN $("#testDiv,span,.blue")同时选中多个选择器匹配的元素 <style type="text/css"> .blue{ background: blue; } </style> <body> <div id=

web前端教程：带你揭开BFC神秘的面纱

阅读更多关于 web前端教程：带你揭开BFC神秘的面纱

　　1. 引言　　在前端的布局手段中，一直有这么一个知识点，很多前端开发者都知道有它的存在，但是很多人也仅仅是知道它的存在而已，对它的作用也只是将将说得出来，可是却没办法说得非常的清晰。这个知识点，就是BFC。想要了解BFC的规则，前提必须是熟悉前端网页的多种布局手段，例如盒的显示模式display，三种布局手段标准流(normal)、浮动流(float)、定位流(position)等。你只有熟练掌握了这些布局手段之后，才能很好的理解BFC。今天这篇文章，来大家解析一下BFC，希望对各位新老朋友有所帮助。　　2. 定义　　BFC - Block Formatting Context 块级格式化上下文 BFC的定义，在官方文档到中，是这么介绍BFC的。　　A block formatting context contains everything inside of the element creating it that is not also inside a descendant element that creates a new block formatting context. 　　强行翻译一下吧，简单来说，这句话的意思就是：　　一个BFC区域包含创建该上下文元素的所有子元素，但是不包括创建了新的BFC的子元素的内部元素　　很显然，哪怕强行翻译了

软件设计模式学习（二十七）访问者模式

阅读更多关于软件设计模式学习（二十七）访问者模式

访问者模式是一种较为复杂的行为型设计模式，它包含访问者和被访问元素两个主要组成部分，这些被访问的元素具有不同的类型，且不同的访问者可以对其进行不同的访问操作模式动机对于系统中某些对象，它们存储在同一个集合中，且具有不同的类型。对于该集合中的对象，可以接受一类称为访问者的对象来访问，不同的访问者其访问方式有所不同。在 Java 等面向对象语言中都提供了大量用于存储多个元素的集合对象，集合中存储的对象有时候是同一类型，有时候不是同一类型，或许它们只是具有共同的父类。假如我们要针对一个包含不同类型元素的集合采取某种操作，而操作细节根据元素类型不同而不同，就会出现大量类型判断语句，增大代码复杂度。实际使用时，对相同元素的对象也可能存在多种不同的操作方式，而且可能还需要增加新的操作，此时访问者模式是一个值得考虑的解决方案。模式定义表示一个作用于某对象结构中的各元素的操作，它使我们可以在不改变各元素的类的前提下定义作用于这些元素的新操作。访问者模式是一种对象行为型模式。 Represent an operation to be performedd on the elements of an object structure. Visitor lets you define a new operation without changing the classes of the

开发一个大型后台管理系统，应该用前后端分离的技术方案吗？

阅读更多关于开发一个大型后台管理系统，应该用前后端分离的技术方案吗？

话说这天，我们团队开会讨论了一个问题，不，与其说“讨论”，不如说“争吵”更合适。背景是这样的：我们要开发一个 xxx 后台管理系统，这个系统业务复杂、功能又多，大家的争吵集中在“这个系统是否应该用前后端分离的方案”。这次争吵的问题比较典型，于是我就写了这篇文章。为了大家好理解，把“xxx 后台管理系统”泛化一下，变成：开发一个大型后台管理系统，应该用前后端分离的技术方案吗？先说一下，本文中的观点肯定有人不认同，再加上我对前端技术掌握有限，所以大家批判的看吧。 1. 先审题，冷静的分析一下前后端分离的优点多多，这不需要多说，大家人人都清楚。来，讨论之前，我们先一起好好审审题。结合“ 开发一个大型后台管理系统 ”这个约束条件，冷静的分析一下： • 什么是后台管理系统：首先后台管理系统这个称呼，意味着这是一个 B 端系统。可以小到部门级应用（客户投诉登记系统、办公设备台账系统），大一点可以是大集团级核心系统（500 强保险公司客服、呼叫中心），可以是 ERP、CRM、OA（SAP、用友、泛微协同），可以是一个 B2C 电商的商城后台、支付网关管理控制台，可以是 Saas 的管理后台（Salesforce、Teambition、Jira），可以大到阿里云控制台…… • 什么是大型：我理解大型系统是指功能模块多、交互复杂，而不是访问量、TPS、数据量大。所以 CMS、OA

Flutter RenderBox指南——绘制篇

阅读更多关于 Flutter RenderBox指南——绘制篇

本文基于1.12.13+hotfix.8版本源码分析。 0、大纲 RenderBox的用法通过RenderObjectWidget把RenderBox塞进界面 1、RenderBox 在flutter中，我们最常接触的，莫过于各种各样的widget了，但是，实际负责渲染的RenderObject是很少接触的(它们之间的关联可以看看闲鱼的这篇文章： https://www.yuque.com/xytech/flutter/tge705 )。而作为一名天天向上的程序员，我们自然要去学习一下它的原理，做到知其然且知其所以然。本文会先来看看RenderBox的用法，以此抛砖引玉，便于后面继续深入flutter的绘制原理。首先，RenderBox是RenderObject的子类，它将坐标系转换成我们熟知的笛卡尔坐标系，更便于使用。使用RenderBox进行绘制（本文暂时不讲child），我们需要做三件事：（1）测量第一步，我们需要确定视图大小，并赋值给父类的size属性。测量有两种情况，第一种是size由自身决定，第二种是由parent决定。首先，由自身决定size的情况，需要在performLayout方法中完成测量，通过父类的constraints可得到满足约束的值： @override void performLayout() { size = Size(

富文本编辑器实现从word中复制图片(外挂)

阅读更多关于富文本编辑器实现从word中复制图片(外挂)

1问题　　基于web的富文本编辑器的功能普遍较弱，而word是公认的宇宙第一好用的文档编辑器，所以许多人都习惯先在word中编辑，然后再将内容粘到web富文本编辑器中。　　但是，这种操作有一个问题：图片带不过来，无法显示。如下所示。　　我找到了一个方法来解决这个问题。 2 测试环境 summernote 0.8.18 office 2013 java 8 jsoup 1.7.2 3 原理　　当我们按ctrl+c复制word中的图文内容时，在系统的剪切板中会生成了一个类型为HTML的条目。这个条目的内容类似于: 　　如上图所示，在运行期间word会将图片释放至某个临时目录，src使用的是file协议。　　由于web编辑器可以识别data协议，所以我们可以将img的src由file:改为data:image/png;base64，然后将修改后的新内容复制至剪切板。这样就解决了问题。　　这种方式很像游戏中的外挂。 4 关键代码 1 /** 2 * 3 */ 4 private void handle() { 5 try { 6 // 从剪切板中复制内容 7 Clipboard clipboard = Clipboard.getSystemClipboard(); 8 String html = clipboard.getHtml(); 9 textArea1.setText

订阅 element