首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

我的Web开发实战总结(一)写在前面截图快速查询与快递单号我的待办事物办理与信息查询公告通知销售业绩与新客户业绩工作看板排行榜写在最后

快递单号 这个功能其实跟快速查询的功能差不多,无非就是js,css,ajax这些基本的web前端知识,只不过多了一些判断,样式的排版,监听事件而已。...物流信息使用li标签实现的,需要注意的一点是:物流信息左侧的线条是要计算的,每个运单号物流信息量是不同的,不然线条不完整了,因为每条物流信息都是追加上去的,所以可以这样计算: var h = $("ul...我的待办 我的待办也是通过ajax获取数据,用li标签显示,有具体数字表示待办事件的数量,数字为红色,点击进入到具体的事项处理界面,显示具体数据(数据已经自动查询加载),”0“表示无待办事件,数字为黑色...工作看板 刚开始在网上找了一个只是查看日期的简单日历,之后用着才发现里面到处都是bug,于是改啊改啊,改的过程中真有点恶心到我了,改好了这里,那里又出问题了。...ps:因为数据库没加图片,测试数据不够完整,所以图片啥的没有出来,而且sql也没有去重。后续再弄了。 ? 改版后 ?

94110

fullcalendar日历插件的使用并实现增删改查

/static/fullcalendar/js/zh-cn.js'> 在页面中我还使用了bootstrap和layer,所有我还导入了: 中写,在页面初始化的时候就加载运行 $('#calendar').fullCalendar({ //设置头部信息,如果不想显示,可以设置header为false header: { //...,多出去的数据不会将格子挤开,而是显示为 +...more ,点击后才会完整显示所有的数据 eventLimit: true, //设置是否显示周六和周日,设为false则不显示 weekends...start: classCourseDate,//start表示这个event事件放在哪个日期框中 color: 'red',//设置event的背景颜色,若该课次还没上且该班级已经删除则显示为红色...$('#calendar'). fullCalendar ( 'refetchEvents' ); }); //我的添加课次、编辑删除课次弹出框是在body中写的: //添加课次弹出框代码: <div

5.5K40
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    ASP.NET MVC5+EF6+EasyUI 后台管理系统(86)-日程管理-fullcalendar插件用法

    前言 本文分享fullcalendar用法,最后面提供代码下载 说到日程管理,基于JQuery的插件FullCalendar当之无愧,完整的API稳定和调用方式,非常易于扩展!...可以用于系统的个人历程管理,系统的任务日历列表....,这部分辅助我使用的是EasyUI的组件(你可以使用其他弹窗组件来做弹窗) 数据库结构 由于我们使用了数据保存,所以表的建立要根据官方的事件数据来建对应的数据库表用来存储一个日历事件信息的标准对象,其中只有...title和start是必须的 但是我们可以全建来获得完整的数据支持 属性 描述 id 可选,事件唯一标识,重复的事件具有相同的id title 必须,事件在日历上显示的title allDay 可选,...start 必须,事件的开始时间。 end 可选,结束时间。 url 可选,当指定后,事件被点击将打开对应url。 className 指定事件的样式。

    2.7K100

    SSM框架版本的CRM项目实战教程【crm客户管理系统】

    然后要用这个日历控件的话,直接在需要用的地方的class属性后面加上time就行 3.最重要的pageList()方法 image.png 因为查询条件不一定有,所以我们要使用到mybatis的动态sql...4.在pageList.do处理ajax返回值后,加入分页组件(代码直接复制) $("#activityPage").bs_pagination({ currentPage: pageNo, //...5.隐藏域的使用 上面处理完之后,还处在一些问题: 问题1: 在查询框中输入内容,不点击查询按钮 点击分页按钮 结果为查询框中的内容生效了 问题2: 在查询框中输入内容,点击查询按钮 再在查询框中输入内容...,不点击查询按钮 点击分页按钮 结果为新的查询框中的内容生效了 解决上面的问题,就需要使用到隐藏域的内容。...什么时候更新隐藏域? (1)点击查询按钮的时候将查询框中的内容更新(保存内容到)隐藏域。

    1.7K50

    万字长文解析谷歌日历的数据库是怎么设计的!

    引言 这是一篇数据库设计教程,本教程将向大家展示如何为一个非常复杂的实际项目设计数据库表。 我们将设计一个 Google 日历的克隆版,尽可能全面地对与日历直接相关的功能进行建模。...首先我们会构建一个完整的逻辑模型来描述要存储的日历数据。这将占据大部分内容 (约 80% 的文字)。完成逻辑模型后,我们将直接基于它来设计数据库表。...这部分内容需要您对常见数据库有更多了解:如何创建表、有哪些物理数据类型、什么是主键和索引、如何查询表以及如何插入和更新数据。...在本节中我们不需要处理时区问题。 对于实际日历中的大多数事件,开始日期和结束日期可能是相同的 (大多数事件是单日事件)。我们将在两个属性中存储相同的日期。...对于多选一属性,我们在 “示例值” 列中显示所有可能值的完整列表。

    50610

    Wijmo 更优美的jQuery UI部件集:发现 Wijmo

    不同类型的选择器列举如下: jQuery 元素选择器 在 jQuery 中,你可以使用CSS选择器来选择特定的DOM元素,例如: $(this) 选择当前的DOM元素。...例如: $(document).ready(function(){ // 在文件准备完成后做一些事情。 }); 如果你喜欢,可以使用一个缩短版本的$(document).ready 函数代替。...该wijcalendar 具有选项设置的预定义的配置,所以在你初始化完成后可以立即使用。...如果你现在通过浏览器打开你的工程,你将发现一个功能完整的日历部件,如下图所示: 但是如果该工程希望制定今天之前以及随后的几个月的日期不显示在日历上,应当如何做呢?显然删除它们不是一个明智选择。...: false }); 在web浏览器中打开你的工程,可以看到其他月份的天不再出现在日历上,它看起来就像这样: 你可以向一个部件传递多个参数。

    2.7K90

    前端一些需要掌握的简单知识点

    冒泡排序,快速排序,深度克隆,深度冻结,数组操作,本章都有。 走遍大江南北,还是原生javaScript最美 感冒给大家更新,希望大家多多点赞,谢谢!...,完美版' 判断对象是否一个数组的条件是: Array.isArray(),这个在安卓的浏览器中兼容性一般 arr instanceof Array 这个兼容性不错,可以使用 还有就是arr....'这里使用了递归,还有Object原型上的方法,执行上下文栈先进后出的知识。'...' Node.js中的事件轮询机制 Event loop 'Node.js的事件轮询机制外还有同步代码,微任务, 要想彻底弄懂Node的代码执行,得结合下面的微任 务一起学习。'...可是在Node中,先执行的是微任务,只有微任务如果有多层,先执行最顶层,再往下依次执 行)执行完后才能去执行宏任务,微任务有两种,一种是process.nextTick() 中的函数,一种是Promise.then

    1.1K10

    【你不知道的事】JavaScript 中用一种更先进的方式进行深拷贝:structuredClone

    } kitchenSink.circular = kitchenSink // 以上都会被克隆 const clonedSink = structuredClone(kitchenSink) 为什么不使用对象扩展运算符进行克隆呢...嵌套日期和数组仍然是两者之间的共享引用,如果我们想编辑它们,认为我们只是更新复制的日历事件对象,这可能会导致重大问题。 为什么不使用JSON.parse(JSON.stringify(x)) ?...例如,使用 getter,结果值会被克隆,但不会克隆 getter 函数本身(或任何其他属性元数据): structuredClone({ get foo() { return 'bar' } }) /...更简单地说,任何不在下面列表中的东西都不能克隆: JS 内置类型:Array, ArrayBuffer, Boolean, DataView, Date, Error types (those specifically...不过在 Web worker 中,目前支持是比较有限的。

    34010

    自学记录鸿蒙API 13:Calendar Kit日历功能从学习到实践

    Calendar Kit让我感受到了一种与传统开发完全不同的体验——它提供的不只是简单的日历功能,而是一套集创建、查询、更新、删除等强大能力于一体的日程管理服务。...第一部分:构建基础——获取日历管理器每个优秀的应用都有一个强大的核心,在Calendar Kit中,这个核心就是CalendarManager。它是我们与日历和日程打交道的桥梁。...第二部分:管理日历——从创建到配置在获得CalendarManager对象后,我们可以通过它创建和管理多个日历。一个日历是管理日程的容器,因此,为不同的用途创建独立的日历是非常有必要的。...代码实现:创建日历以下代码展示了如何使用createCalendar方法创建一个日历:const calendarAccount: calendarManager.CalendarAccount = {...代码实现:添加日程以下代码展示了如何向日历中添加一个会议事件:const event: calendarManager.Event = { title: '团队会议', type: calendarManager.EventType.NORMAL

    17820

    前端开发,从草根到英雄(下)

    这篇文章是"前端开发,从草根到英雄系列"的第二部分,在第一部分,你学到了如何使用HTML和CSS创建布局的最佳实践。...Ajax 通过以上的文章和指南,你应该注意到了Ajax,Ajax是一项可以使用JavaScript和服务器交互的技术。...当你在Twitter上发送一条微博,你的Twitter客户端发送了一条HTTP请求给Twitter的API服务器,并且使用服务器返回的数据更新页面。 你可以看下什么是Ajax获得更多Ajax的知识。...更完整的学习AngularJs指南可以在Tim Jacobi的Github仓库中查找。...一旦你全部完成,你可以进入更复杂的教程:如何使用React,Redux和Immutable.js创建一个Todo应用,并使用Flux和React建立一个微博应用 保持更新 和其他前端开发一样,JavaScript

    95910

    前端练级攻略(第二部分)

    我将它们分组在本节中,因为它们对于理解如何构建更复杂的前端系统是必要的。一旦你进入框架部分,你将更好地理解并使用它们。 语言 当你使用JavaScript进行更多工作时,你将遇到一些更高级别的概念。...Ajax 在这些文章和教程中,你可能已经多次看到 Ajax 这个术语。Ajax 是一种允许 web 页面使用 JavaScript 与服务器交互的技术 ?...当你在Twitter 上发布一条 tweet 时,你的 witter 客户机向 Twitter 的服务器 API 发出 HTTP 请求,并使用服务器响应更新页面。...首先,在TodoMVC上查看最终结果。第一步是在本地创建一个新项目,并首先建立 MVC 的三个组件。由于这是一个复杂的实验,请参考 Github 存储库中的完整源代码。...使用Angular构建一个Etsy克隆,Stamplay 将教你如何使用 Angular 构建一个 web 应用程序,如何使用 api 构建接口,以及如何构造大型项目。

    3.8K00

    FullCalendar日历插件

    FullCalendar是一个jQuery日历插件,它使用Ajax来获取每一个月的日历事件并能够配置成使用自己的日历事件来源比如从GoogleCalendar获取事件。...支持拖放日历中的事件,自定义点击和拖放事件。在很多项目中都会用到这个控件。 (一)方法 1. 把日历绑定到一个id的东西上 $('#id').fullCalendar('render'); 2....该方法也可以使用单参数的方式调用,传递一个javascript的Date对象. 5.格式化日期:$.fullCalendar.formatDate(date,formatString[, options...$("#calendar").fullCalendar('renderEvent', term, true); }); }); //把从后台取出的数据进行封装以后在页面上以...background color just forfun $(this).css('background-color', '#F5DEB3'); $("#waitModal").modal("show"); $.ajax

    5.2K40

    纪念基于JavaScript 实现的后台桌面 UI 设计

    下方显示视频的原文地址,这里我们是选择存储在腾讯云上。最下方是视频播放器,这是我们改造后的腾讯超级播放器后的效果,从视频中我们可以看到关键字讲解词。...3、其它功能链接:如开始菜单、快捷访问、如何使用桌面系统的功能链接,还设置了一个“下次 不再显示”的个性化功能。...技术调用服务端静态方法保存到个人配置表中。...附件小程序 这个可以后续进行插件更新,目前提供了两个实用的小程序,计算器、日历与任务。...该功能显示如下图: 界面的左侧显示日历,右侧显示任务设置面板,点击日历即可赋值在开始时间,再次点击将赋值到结束时间里,同时我们还可以设置提前提醒的时间量,最后点击保存设置即可完成任务的设置。

    13310

    俄罗斯著名商业CMS DataLife Engine v16.0

    先进的 AJAX 技术可以减少服务器上的流量和资源以及访问者的流量,更不用说访问者在网站上使用该技术的易用性了。...DataLife Engine 具有以下特点: 一般特征: – 使用 MySQL 存储数据 – 最小的数据库负载 – 使用 AJAX 先进技术 – 显示新闻、文章和您想要的任何内容 – 支持用户友好的...多亏了这一点,搜索引擎中的索引会更好(需要 modrewrite) – 您可以禁用用户友好的 URL – 一般网站统计 – 附加字段支持(不仅可以使用简短而完整的新闻文章,还可以创建任意数量的各种附加字段来输入信息...) – 你可以写几页的文章 – 防洪 – 评论中的自动词过滤器 – 类别支持 – 您可以创建任意数量的嵌套类别 – 每个类别可以有一个单独的模板 – 自动剪切评论中的长词 – 文章评分 – 日历 – 在包括附加字段的文章中搜索...– 禁止用户 – 使用工具直接在管理面板中创建和编辑模板 – 调整时间 – 调整出版日期 – 在指定时间自动发布文章 – 关闭日历和档案(以节省资源) – 修复新闻(无论日期如何,始终处于领先地位) –

    94920

    Web前端开发推荐阅读书籍、学习课程下载

    前言 学校里没有前端的课程,那如何学习JavaScript,又如何使自己成为一个合格的前端工程师呢? 除了在项目中学习和跟着有经验的同事学习,读书也是必不可少的。...实战 AJax与PHP基础教程 Ajax中文手册 W3School全套教程.CHM web前端标准在各浏览器中的差异 Web前端开发规范手册 编写高质量代码-Web前端开发修炼之道 高性能网站建设进阶指南...视频教程-传智播客 第一部分 Ajax是什么 Ajax原理图 无刷新验证用户名 返回XML如何处理 返回JSON如何处理 省市联动实例 黄金价格实时图实例 阶段小结 WEB版QQ多人聊天,带离线留言功能...第二部分 AJAX概述与IntelliJ安装 使用IntelliJ开发Web项目 用IntelliJ部署Web项目 准备AJAX服务器端环境 准备AJAX客户端程序环境 使用FireBug调试javascript...闭包 操作iframe 对象引用 韩雪冬轮播图 华为轮播图 快速排序 联动日历1 枚举算法 妙味课堂官网百叶窗效果 瀑布流布局 声明与表达式 事件委托 数码时钟 网页进度条 微博登录suggest 微博发布框

    12.8K71

    20道前端高频面试题(附答案)_2023-03-02

    之后再使用Promise.all来执行这个函数,执行的时候,看到一秒之后输出了1,2,3,同时输出了数组1, 2, 3,三个函数是同步执行的,并且在一个回调函数中返回了所有的结果。...-- 注意:对于需要使用输入法(如中文、日文、韩文等)的语言,你将会发现v-model不会再输入法 组合文字过程中得到更新 --> <!...break; } node = node.parentNode; } }, false); 二分查找--时间复杂度 log2(n) 题目描述:如何确定一个数在一个有序数组中的位置...NaN在===中是不相等的,而在Object.is中是相等的 2. +0和-0在===中是相等的,而在Object.is中是不相等的 实现代码如下: Object.is = function (...以下是两种实现思路 // 以下是不完整代码,着重于思路 非 Promise 写法 let successCount = 0 let errorCount = 0 let datas = [] ajax(

    47840

    外行学 Python 第十一篇 数据可视化

    在 外行学 Python 爬虫 第九篇 读取数据库中的数据 中完成了使用 API 从数据库中读取所需要的数据,但是返回的是 JSON 格式,看到的是一串的字符串数据不是很好理解,这篇将介绍如何将数据进行可视化...实际上此时即可在 Flask 中使用 pyecharts 了,但是根据 pyecharts 文档中的介绍,在实际使用过程中遇到了以下错误 jinja2.exceptions.TemplateNotFound.../templates")) 将该配置从代码中删除,重新运行程序即可看到完整的图标信息。 爬虫数据可视化 在这里将完成从数据库中读取各生产商所生产各类元件的数据,通过 Echarts 进行可视化的操作。...来响应 select 标签的改变事件,通过 ajax 向服务端提交当前选中的生产商,同时从服务器获取该厂商的信息。...将相应的数据填入 pyecharts 的 Bar 对象中回传给 ajax 请求。 至此,执行程序在浏览器中即可看到在文章开头所看到的页面,选择不同的生产商图标将实时更新到该生产商的信息。

    2.1K30

    AJAX 前端开发利器:实现网页动态更新的核心技术

    AJAX AJAX是开发者的梦想,因为你可以: 在不重新加载页面的情况下更新网页 在页面加载后请求来自服务器的数据 在页面加载后接收来自服务器的数据 在后台向服务器发送数据 HTML页面 AJAX应用程序可能使用XML传输数据,但以纯文本或JSON文本传输数据同样常见。 AJAX允许通过在幕后与Web服务器交换数据,异步更新Web页面。...GET比POST更简单更快,并且在大多数情况下都可以使用。 但是,在以下情况下始终使用POST请求: 无法使用缓存文件(更新服务器上的文件或数据库)。 向服务器发送大量数据(POST没有大小限制)。...建议将在 "txtHint" 元素中显示。 AJAX 数据库示例 AJAX可用于与数据库进行交互式通信。...以下示例演示了如何使用AJAX从数据库获取信息: 示例 选择一个客户: 选择客户

    13400
    领券