本文简介 带尬猴,我是德育处主任 虽然 Fabric.js 提供的基础功能已经很丰富了,但有时难免需要定制一些需求。比如本文要讲的 『自定义控件』。...掌握创建自定义控件这个功能,能够创建更加精美和实用的图形应用程序,提高用户体验和用户满意度。 尽管 Fabric.js 的文档很一般,但 demo 还挺丰富。...如果你对这些代码还不太熟悉的话,推荐阅读一下 《Fabric.js 中文入门教程》 创建删除按钮 创建自定义控件通常有一下2步操作: 创建控件 添加功能事件 Fabric.js 提供了 fabric.Control...Custom controls, render and actions 的代码 前面讲到的就是创建自定义控件的基本方法, Fabric.js 官网收录的 Custom controls, render.../js/fabric.js"> var canvas = this.
基础用法 你可以用v-model指令在表单控件元素上创建双向数据绑定。...它会根据控件类型自动选取正确的方法来更新元素,但v-model本质上不过是语法糖,它负责监听用户的输入事件以更新数据,并特别处理一些极端的例子,v-model 会忽略所有表单元素的value 、checked...text" v-model="message" placeholder="edit me"> {{message}} var app = new Vue({ el: "#example-1", data:{...message" cols="30" rows="10" placeholder="add multiple lines"> <script src="<em>js</em>
我们的技术团队在跟国内外各行各业用户交流的过程中,就曾发现有很多的用户尝试在Node.js的环境下运行SpreadJS 纯前端表格控件,借助该控件,可以在服务器不预装任何Excel依赖项的情况下,收集用户输入的信息...打开Visual Studio后,使用JavaScript> Node.js>Blank Node.js控制台应用程序模板创建一个新应用程序。...err) => { console.log(err); }, { useArrayBuffer: true }); } 完成的文件将如下所示: 以上就是第一篇《从服务端生成Excel电子表格...(Node.js+SpreadJS)》的全部内容。...+SpreadJS更加优秀的性能和稳定性,这就是我们下一篇《从服务端生成Excel电子表格(GcExcel + SpreadJS)》的主要内容,敬请期待。
并不是所有的参数都需要填写或选择,有些需要隐藏起来,然后跟着小单一起提交传递给后台,发送到服务器端 那这个是怎么实现的呢 示例展示 具体示例,可见 https://coder.itclan.cn/fontend/js.../24-hide-input-params/ 01 原生js 对于不显示在界面上的元素,但在提交表单时,却又要携带上去,是有这种需求的,比如用户修改某件商品信息时,商品的id,商品的id并不是用户想要关心的
前言 在h5开发中,很多地方都要用到日历控件,比如生日、出发到达日期等等,今天就来讲讲日历控件数据初始化。 用到了moment插件,moment api地址请点击。
本次调研主要是为了进一步了解市面上的电子表格的功能,为表格优化打基础。...总结:google sheet 和石墨文档的电子表格功能十分强大,支持筛选、选择列、行、以及计算字段。而FineBI和Quick BI 更多的是把表格当做一个可视化的控件,支持电子表格的基本功能。...我们更多的是希望把电子表格作为一个基本控件,所以下文重点讨论quick bi 和 fine bi 1.3 产品流程图 quick bi - 交叉表 ? fine bi - 交叉表 ?...FineBI用于数据分析的可视化组件包括表格、图表、时间控件、文本控件、树控件等等多样化的类型,能够提供给用户丰富的选择。...QuickBI:整体风格方面,QuickBI的电子表格采用了蓝色、白色相结合的UI风格 ;控件选择区罗列出当前支持的图表类型,给用户提供了清晰的界面选择,占界面的大部分的画布区,图表配置完成后,支持拖曳调整大小
Luckysheet是一款纯前端类似excel的在线表格,功能强大、配置简单、完全开源,gitee上是gvp项目,国产的纯JS实现的类似excel的在线表格,先记录一下,后续如果有这方面的业务需求也可以参考一下
如何在js文件中写加载Applet控件(js与jsp分离技术) 我们在写代码的时候,一般喜欢将JSP和JS实现分离开,将页面部分的代码写在.jsp结尾的文件中...那么我们有没有办法将需要写到jsp页面上的代码写到js文件中呢?...我现在举个例子,假如我们的页面上需要加载一个applet控件,但这个applet的加载是有条件的,只有在某种情况下,控件才会加载,而其它情况则不加载(这样子能加载页面的加载速度)。...就好比淘宝的截屏功能,我们在正常聊天的时候,控件是不加载的,只有点击了截屏功能的时候,控件才会被加载和安装。 这种情况,就需要我们预先不加载applet控件,而是在javascript控制加载控件了。...由于js页面不知道jsp在哪个地方加载js文件,所有像原先那样写一个相当位置的div是不大妥当的,而加载一个固定位置的div,则无论jsp在哪个地方加载js文件,都可以保证div想固定的地方显示了。
集成Node.js WebStorm 集成Node.js ,可以运行,编译,测试Node.js App。 4. 集成代码质量工具 集成了JSHint,JSLint,JSCS 等。 5....,Web技术 内嵌Web 技术如JS,HTML及CSS 缺点:效率低 Sublime Text ?...Code 是免费的且可用于多个平台如Linux,Mac OSX,以及Windows,内嵌Git控件。...缺点只能用于Windows 平台 支持 JavaScript 的工具 1.SpreadJS 是一款企业级 JavaScript 电子表格控件,能将电子表格、数据可视化及计算功能集成在 JavaScript...2.Wijmo Enterprise 是为企业应用程序开发而推出的一系列包含HTML5 和JavaScript 的开发控件集。
0x00 概述 本文主要记录moment.js日期控件在vue中的使用; moment可以方便的计算自然月或者自然年份,避免使用固定天数或者月份计算导致结束日期错乱问题。...0x01 安装moment插件 npm install moment --save 在package.json中查看(moment插件安装成功) 在Vue的JS部分导入moment import moment...天 moment("2020-03-25 00:00:00").add(5, "days").format('YYYY-MM-DD HH:mm:ss');//2020-03-30 00:00:00 js...通过Moment.js让数值秒值和时分秒格式相互转化 / / 1、把时分秒格式转化为数值型的秒值 <script src="https://momentjs.com/downloads/moment.<em>js</em>...console.log(time) //3661 // 2、把数值型的秒值转化为时分秒格式 <script src="https://momentjs.com/downloads/moment.js
前言 在用户填写表单时,为了让用户集中精力填写或某一个表单控件,可以通过设置此空间的样式来达到目的 那这样的效果如何实现呢,如下示例所示的 示例展示 (https://coder.itclan.cn/fontend.../js/26-set-form-style/) 原生Js实现 如下是简易的示例代码,要想实现这一个效果,必须要知道onfocus和onblur,前者是聚焦的回调事件,而后者是控件失去焦点的回调 在一个网页里...,永远都只能有一个控件获得焦点,因此需要遍历所有的控件,为它们定义相同的onfocus以及onblur的逻辑 当控件获得焦点时,为它设置独特的边框样式,否则就恢复原有的边框样式 function init...() { var f = document.form[0]; // 获取表单DOM var elements = f.elements; // 获取所有的控件数组 var str...lang="scss" scoped> .wrap { text-align: center; margin: 20px 0 20px 0; } 总结 无论是原生js
在渲染Canvas时,浏览器的每次重绘都是基于代码的,只需要在内存中构建出画布,在JS引擎中执行绘制逻辑,然后遍历整个画布中像素点的颜色直接输出到屏幕就可以了。...除此之外,因为Canvas的绘制是在JS层通过代码控制的,所以在灵活性方面较DOM也有很大的优势。 三、攻克电子表格技术的性能难点 电子表格发展以来,以其便捷性、即时性深深影响了人们的生活。...随着互联网技术的发展,电子表格结合在线系统也成为大多企业呈现分析数据的优选方案,发挥出巨大的作用。...目前业内已经出现了使用Canvas技术绘制画布的前端表格控件。...在线demo体验纯前端表格控件:https://demo.grapecity.com.cn/spreadjs/gc-sjs-samples/index.html
设计思路篇 Excel是我们日常办公中最常用的电子表格程序,不仅可满足报表数据的计算需求,还可提供绘图、数据透视分析、BI和Visual Basic for Applications (VBA)宏语言编程等多项功能...经过数年发展,Excel已具备所有电子表格的基本能力,在满足统计、工程和财务领域的各项数据分析需求的同时,还取代了Lotus 1-2-3成为电子表格的行业标准。...如果说Excel是基于"公式与函数"的特性,成为了职场精英高效工作必备的神兵,那么纯前端表格控件 SpreadJS 也正是依靠这一特性,成为了开发者快速开发企业Web应用的利器。...这些Excel的共同特点是:公式数量在10W~20W以上,表格包含大量逻辑复杂且互相嵌套的公式函数,如果仅依靠JS组件和浏览器处理这些文档,显然会捉襟见肘。...2、仅利用纯前端表格控件SpreadJS来展示页面结果,并实现与用户进行交互。
本文将通过图解的方式,使用纯前端表格控件 SpreadJS 来一步一步实现在线的电子表格产品(例如可构建Office 365 Excel产品、Google的在线SpreadSheet)。...SpreadJS 纯前端表格控件是基于 HTML5 的 JavaScript 电子表格和网格功能控件,提供了完备的公式引擎、排序、过滤、输入控件、数据可视化、Excel 导入/导出等功能,适用于 .NET.../demo.gcpowertools.com.cn/SpreadJS/TutorialSample/external/spreadjs/gc.spread.sheets.all.10.1.0.min.js...,故通过对指定大小限制电子表格的显示范围。...电子表格。
拖拽控件、手写、js创建还是第三方控件(包括js版)? 以前用服务器控件写了一套表单控件,用起来感觉也挺方便的,只是效率太低,太占用服务器的资源。...实现方式: 1、 js + json + 第三方js脚本、控件 2、 json对表单进行描述,比如标题、控件类型、控件大小、下拉列表框的item如何填充等。...4、 Js脚本根据json的描述,创建表单(table形式),创建表单里面的控件(比如文本框),然后对表单和控件进行修饰。 5、 提取用户输入的数据,然后进行验证。...答:搜索了一下js表单控件,没有发现特出名的。当然了肯定有做好的,只是我没有发现。再有也不是完全自己写的,有很多第三方现成的js拿来用的,比如my97。...因为是纯js的表单控件,所以服务器控件形式的在线编辑器是不好用了。 4、 数据验证。这个好像有很多已经很成熟的了,只是一直没时间研究。目前用的是一个比较古老的js脚本,出处已经不记得了。
(附带24套css效果) 3、 Js的方式创建分页UI,不占用服务器资源。 4、 可以通过插件的方式更换各部分js代码。如果自带的js代码不能满足您的需求,那么您自己写的插件实现需要的效果。...因为用js和ajax,所以不支持搜索引擎的收录。 2、 不支持服务器端控件,比如GridView。...虽然属性有很多,但是最低只需要设置两个属性——总记录数和存放分页控件的容器ID。 不设置总记录数,就不知道有多少页,页号导航就做不出来,UI也没法控制。而总记录数又没法设置默认值。 ...存放分页控件的容器ID,简单的说就是DIV的ID,当然也可以放在td里面,只要设置好ID就行。如果要实现上下两个分页UI,那么只需要把这两个ID用半角逗号分割,设置上就行。 2、 设置事件。 ...Js的事件处理真的是太简单了,就跟属性一样。弄个function就可以了。
前言 SpreadJS作为一款性能出众的纯前端电子表格控件,自2015年发布以来,已经被广泛应用于各领域“在线Excel”数据管理项目中。...NPM,作为管理Node.js库最有力的手段,解决了很多NodeJS代码部署的问题。...安装Node.js和NPM 在使用该项目之前,请确保下载并安装Node.js和NPM。 安装项目文件和文件夹 现在已经安装了Node.js和NPM,我们将创建在webpack项目中使用的文件夹和文件。...首先,我们将创建一个webpack.config.js文件。...关于SpreadJS – 可嵌入您系统的在线Excel SpreadJS 纯前端表格控件是基于 HTML5 的 JavaScript 电子表格和网格功能控件,适用于 .NET、Java 、Web 应用程序
SheetJS 适用于浏览器和 Node.js,拥有强大的电子表格解析功能,即使电子表格很大,也可以轻松处理。此外,SheetJS 支持大量的电子表格格式,如 OpenDocument 等。...文件格式 支持文件格式 读和写入许多电子表格文件格式 Format Read Write Excel Worksheet/Workbook Formats :-----: :-----: Excel 2007...Workbook/Worksheet Formats :-----: :-----: Numbers 3.0+ / iWork 2013+ Spreadsheet (NUMBERS) ✔ ✔ WPS 电子表格.../xlsx.full.min.js"> 测试将表数据导出到XLSX <!...许多用户更喜欢使用电子表格软件。SheetJS库通过将程序员友好的JSON转换为用户友好的工作簿来帮助弥合差距。
标签:Python与Excel,Xlsxwriter 在本文中,我们将使用Python创建高保真的Excel电子表格。...“高保真”意味着Python生成的Excel电子表格看起来像是由人创建的真实Excel文件一样,包含值、公式、不同的格式以及图表。...这是本系列的第1部分,这里将使用Python创建一个包含公式的Excel电子表格。 你可能已经熟悉,将某些数据转储到Excel文件中的更简单方法是使用pandas库:pd.to_Excel()。...与以往一样,首先安装该库: pip install xlsxwriter 熟悉xlsxwriter 让我们先建立一个Excel文件,里面有电子表格。
领取专属 10元无门槛券
手把手带您无忧上云