礼盒商城管理系统（二）

一、内容介绍

该部分介绍内容主要是介绍数据统计、班级管理、教师管理、打卡任务四部分里面用到的一些插件方法介绍。

二、数据统计

（1）外部插件的引入（包括js css外部文件的引入）

（2）获得数据后的处理

1、简单数据写入与数字位数保留。（可采用对应位置利用,text方法进行数据写入。小数位数保留针对需要的数据对其使用tofixed进行位数保留）

2、图表信息配置。获取到数据以后，对图表进行样例设置，同时再进行数据的选择。进行数据渲染（有环形图 条形图）

3、轮播图的设置（主要在于插件的配置与css的配置，轮播图不仅由js进行配置，搭配css进行外观设置，设计出不同的效果）

4、对引入的图片要能够保证动态适应。（窗口宽度变化，会引起图表拉伸的变化，因此要设置resize，动态适应）

通过设置resize，保证在宽度变化的情况下，表格能自动适应，不会拉伸，导致出现大片空白。

三、班级管理

（1）搜索功能

1、通过点击搜索按钮触发搜索函数。输入对应的参数，触发搜索。

2、具体的搜索逻辑

分为时间搜索和普通搜素。

（1）针对时间搜索全部转换为时间戳进行比较，同时要判断是毫秒级时间戳还是秒级时间戳，如果格式都不对，返回false，表示搜索的时间格式不对。同时要保证搜寻的日期在开始时间和结束时间之间。满足上述条件后，输出对时间的搜索结果。

（2）针对其他文字类搜索。利用filter进行过滤搜索，同时还要保证判断的为字符串。否则格式不一致，无法进行判断。最后通过indexof的判断关键字的搜索位置，结果不等于-1 表示结果结果存在，输出结果进行显示。

（2）表格数据渲染的优化

1、显示数据为空的表格渲染。数据为0、空数组、null的情况下，都可以渲染表示暂无数据。

2、添加边界判断。点击最后一页时如果超出最后页数，则跳转到最后一页，防止页面溢出，数据无法正常显示。点击最后一页时，小于最后一页（超出时），则跳转到显示第一页。

3、最后表格显示全部利用div，不再使用tbody thead。防止与富文本的调用出现冲突，同时也方便进行调整（tbody thead 调整限制较多，不易调整。）

四、教师管理

（1）时间插件的使用

1、插件的引入 一个js 两个css

2、插件调用

需要注意的地方：

（1）elem为需要设置的元素

（2）range范围 可现实左右两边的时间范围选择。有的需要单独某一个时间选择 ，有些需要时间范围选择（根据项目要求进行设置）

（3）min max 时间最大值 最小值的设置。不需要利用时间戳进行时间转换，直接利用数字进行日期推算，正数表示时间往后，负数表示时间往前。

（4）done为回调函数，表示选择完时间，插件触发对应操作。注意：是选择完时间才进行的效果，不是实时变化进行回调。

（2）图片上传的优化

通过设置自定义属性id，使得每一个图片上传区域有独特的寻找标志，防止出现在一个页面当中出现，点击一个图片上传区域后，其余图片上传区域也上传图片的情况。

通过onchange event 只点击触发当前的图片上传区域

1、图片上传

根据自定义属性upload-id获取图片上传输入框的信息，进行图片上传。图片上传成功后，利用自定义属性upload-id和closest find 方法找到对应的img元素，进行图片属性替换。实现某一个特定上传区域图片变化，防止多个图片同时上传变化。

2、图片删除、预览。通过点击事件。event事件触发，阻止事件冒泡。通过closest、find、attr的方法寻找到对应图片属性。进行图片预览 图片删除等功能。（主要是如何通过方法寻找到点击的对应的img元素）

五、打卡任务

（1）打卡插件的引入（js文件 css文件）

1、设置每一条颜色任务一条颜色

（1）编写函数清空日历事件，对每个任务重新分配索引，然后重新渲染新的事件，设置颜色。其中清空和渲染的方法为日历插件中自带。

2、任务分配索引号，方便后续颜色上传。

3、设置颜色数组，针对任务索引进行颜色渲染

图示如下：每一天的任务颜色不同，方便分辨查看。

（2）针对日历打卡的一些限制要求

1、不能为过去时间设置任务。

通过时间判断，如果是过去的日期，点击之后显示错误提示不能为过去时间设置任务。

2、设置不能对过去的内容进行操作，只能查看。通过css进行设置即可

3、每天最多设置四个任务，且在跨天当中，也需要计算。

通过clickedDate 设置为当天开始或者结束，然后对当天的事件数进行过滤，通过.length进行判断，事件长度大于等于4的时候，显示已经达到上限。不能再继续添加任务

以上是针对板块的功能优化，如有不足之处还请大家指正。