| 59 | | 用户ID | 60 |姓名 | 61 |年龄 | 62 |地址 | 63 |入学时间 | 64 |状态 | 65 |
|---|
14 | 颜色选择器使用开源项目：paigusu17 | 18 | 27 | 28 |
15 | TableSelect 16 |
29 | $(function () {
30 | $('.paigusu').paigusu({
31 | color: '#1926dc',//初始色 支持两种配置方案
32 | }, function (event, obj) {
33 | console.log(event);
34 | console.log(obj);
35 | $(event).css('color', '#' + obj.hex)
36 | });
37 | });
38 |
39 | 17 | 富文本编辑器使用开源项目：wangEditor22 | 23 |
18 | 具体使用请参考下方官网，以下仅做示例，上传接口请改为实际后端接口
19 | 目前上传接口返回数据是写死在json里面的
20 | wangEditor 21 |
欢迎使用 wangEditor 富文本编辑器
25 |
28 | var E = window.wangEditor;
29 | var editor = new E('#editor');
30 | editor.customConfig.uploadImgServer = "../api/upload.json";
31 | editor.customConfig.uploadFileName = 'image';
32 | editor.customConfig.pasteFilterStyle = false;
33 | editor.customConfig.uploadImgMaxLength = 5;
34 | editor.customConfig.uploadImgHooks = {
35 | // 上传超时
36 | timeout: function (xhr, editor) {
37 | layer.msg('上传超时！')
38 | },
39 | // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
40 | customInsert: function (insertImg, result, editor) {
41 | console.log(result);
42 | if (result.code == 1) {
43 | var url = result.data.url;
44 | url.forEach(function (e) {
45 | insertImg(e);
46 | })
47 | } else {
48 | layer.msg(result.msg);
49 | }
50 | }
51 | };
52 | editor.customConfig.customAlert = function (info) {
53 | layer.msg(info);
54 | };
55 | editor.create();
56 |
57 |
58 | 18 | fa图标选择器根据开源Layui-IconPicker插件修改而来。22 | 23 |
19 | 不同的参数的地方是，去掉了type参数，新增url参数，url参数为fa图标less/variables.less文件路径。
20 | Layui-IconPicker 21 |
40 | iconPickerFa.render({
41 | // 选择器，推荐使用input
42 | elem: '#iconPicker',
43 | // fa 图标接口
44 | url: "/lib/font-awesome-4.7.0/less/variables.less",
45 | // 是否开启搜索：true/false，默认true
46 | search: true,
47 | // 是否开启分页：true/false，默认true
48 | page: true,
49 | // 每页显示数量，默认12
50 | limit: 12,
51 | // 点击回调
52 | click: function (data) {
53 | console.log(data);
54 | },
55 | // 渲染成功后的回调
56 | success: function (d) {
57 | console.log(d);
58 | }
59 | });
60 |
61 |
62 | 14 | 上传组件使用开源项目：zyupload17 | 18 |
15 | zyupload 16 |
19 | // 初始化插件
20 | $("#zyupload").zyUpload({
21 | width: "650px", // 宽度
22 | height: "400px", // 宽度
23 | itemWidth: "140px", // 文件项的宽度
24 | itemHeight: "115px", // 文件项的高度
25 | url: "api/upload", // 上传文件的路径
26 | fileType: ["jpg", "png", "txt", "js", "exe"],// 上传文件的类型
27 | fileSize: 51200000, // 上传文件的大小
28 | multiple: true, // 是否可以多个文件上传
29 | dragDrop: true, // 是否可以拖动上传文件
30 | tailor: true, // 是否可以裁剪图片
31 | del: true, // 是否可以删除文件
32 | finishDel: false, // 是否在上传文件完成后删除预览
33 | /* 外部获得的回调接口 */
34 | onSelect: function (selectFiles, allFiles) { // 选择文件的回调方法 selectFile:当前选中的文件 allFiles:还没上传的全部文件
35 | console.info("当前选择了以下文件：");
36 | console.info(selectFiles);
37 | },
38 | onDelete: function (file, files) { // 删除一个文件的回调方法 file:当前删除的文件 files:删除之后的文件
39 | console.info("当前删除了此文件：");
40 | console.info(file.name);
41 | },
42 | onSuccess: function (file, response) { // 文件上传成功的回调方法
43 | console.info("此文件上传成功：");
44 | console.info(file.name);
45 | console.info("此文件上传到服务器地址：");
46 | console.info(response);
47 | $("#uploadInf").append("上传成功，文件地址是：" + response + "
");
48 | },
49 | onFailure: function (file, response) { // 文件上传失败的回调方法
50 | console.info("此文件上传失败：");
51 | console.info(file.name);
52 | },
53 | onComplete: function (response) { // 上传完成的回调方法
54 | console.info("文件上传完成");
55 | console.info(response);
56 | }
57 | });
58 |
59 |