### Backend Cache Clearing API Example (Node.js/Express) Source: https://context7.com/zhongshaofa/layuimini/llms.txt Provides a backend implementation example for the cache clearing API using Node.js and Express. This endpoint handles GET requests to '/api/clear.json', attempts to clear server-side cache, and returns a JSON response indicating success or failure. ```javascript // 后端接口示例 (Node.js/Express) app.get('/api/clear.json', function(req, res) { // 执行服务端缓存清理逻辑 try { // 清理Redis缓存、文件缓存等 clearServerCache(); res.json({ code: 1, msg: "服务端清理缓存成功" }); } catch (e) { res.json({ code: 0, msg: "清理缓存失败：" + e.message }); } }); ``` -------------------------------- ### Initialize Layui Mini Framework Source: https://context7.com/zhongshaofa/layuimini/llms.txt Renders the backend framework by loading menu data, logo information, and homepage details. It binds events and initializes the system. Dependencies include jquery, layer, miniAdmin, and miniTongji. It takes an options object for configuration. ```javascript layui.use(['jquery', 'layer', 'miniAdmin', 'miniTongji'], function () { var $ = layui.jquery, layer = layui.layer, miniAdmin = layui.miniAdmin, miniTongji = layui.miniTongji; // 框架初始化配置 var options = { iniUrl: "api/init.json", // 初始化接口地址，返回菜单、Logo、首页等数据 clearUrl: "api/clear.json", // 缓存清理接口地址 urlHashLocation: true, // 是否打开URL hash定位，刷新页面保留当前tab bgColorDefault: false, // 主题默认配置，false表示使用默认主题 multiModule: true, // 是否开启多模块（顶部菜单切换） menuChildOpen: false, // 是否默认展开子菜单 loadingTime: 0, // 初始化加载动画时间（秒） pageAnim: true, // 是否开启iframe窗口切换动画 maxTabNum: 20, // 最大允许打开的tab数量 }; // 渲染框架 miniAdmin.render(options); // 退出登录事件绑定 $('.login-out').on("click", function () { layer.msg('退出登录成功', function () { window.location = 'page/login-3.html'; }); }); }); ``` -------------------------------- ### GET /api/clear.json Source: https://context7.com/zhongshaofa/layuimini/llms.txt This endpoint handles the clearing of server-side cache and triggers the local sessionStorage cleanup in the browser. ```APIDOC ## GET /api/clear.json ### Description Clears server-side caches (such as Redis or file caches) and returns a status message indicating success or failure. ### Method GET ### Endpoint /api/clear.json ### Parameters None ### Response #### Success Response (200) - **code** (integer) - Status code (1 for success) - **msg** (string) - Success message #### Response Example { "code": 1, "msg": "服务端清理缓存成功" } ``` -------------------------------- ### Initialize and Configure wangEditor Source: https://github.com/zhongshaofa/layuimini/blob/v2/page/editor.html This snippet demonstrates how to instantiate the wangEditor instance, configure the image upload server, set upload limits, and define custom hooks for handling server responses and errors. ```javascript var E = window.wangEditor; var editor = new E('#editor'); editor.customConfig.uploadImgServer = "../api/upload.json"; editor.customConfig.uploadFileName = 'image'; editor.customConfig.pasteFilterStyle = false; editor.customConfig.uploadImgMaxLength = 5; editor.customConfig.uploadImgHooks = { timeout: function (xhr, editor) { layer.msg('上传超时！') }, customInsert: function (insertImg, result, editor) { console.log(result); if (result.code == 1) { var url = result.data.url; url.forEach(function (e) { insertImg(e); }) } else { layer.msg(result.msg); } } }; editor.customConfig.customAlert = function (info) { layer.msg(info); }; editor.create(); ``` ```javascript layui.use(['layer','wangEditor'], function () { var $ = layui.jquery, layer = layui.layer, wangEditor = layui.wangEditor; var editor = new wangEditor('#editor'); editor.customConfig.uploadImgServer = "../api/upload.json"; editor.customConfig.uploadFileName = 'image'; editor.customConfig.pasteFilterStyle = false; editor.customConfig.uploadImgMaxLength = 5; editor.customConfig.uploadImgHooks = { timeout: function (xhr, editor) { layer.msg('上传超时！') }, customInsert: function (insertImg, result, editor) { console.log(result); if (result.code == 1) { var url = result.data.url; url.forEach(function (e) { insertImg(e); }) } else { layer.msg(result.msg); } } }; editor.customConfig.customAlert = function (info) { layer.msg(info); }; editor.create(); }); ``` -------------------------------- ### Cache Clearing API Response Examples Source: https://context7.com/zhongshaofa/layuimini/llms.txt Defines the JSON response structure for the cache clearing API. It includes a 'code' field (1 for success, 0 for failure) and a 'msg' field for status messages. These responses are used by the frontend to indicate the outcome of a cache clearing request. ```json // 成功响应 { "code": 1, "msg": "服务端清理缓存成功" } // 失败响应 { "code": 0, "msg": "清理缓存失败，请重试" } ``` -------------------------------- ### Initialize IconPickerFa Plugin Source: https://github.com/zhongshaofa/layuimini/blob/v2/page/icon-picker.html Demonstrates how to render the icon picker using the iconPickerFa.render method. It includes configuration for the icon source URL, search functionality, pagination, and callback handlers for click and success events. ```javascript iconPickerFa.render({ elem: '#iconPicker', url: "/lib/font-awesome-4.7.0/less/variables.less", search: true, page: true, limit: 12, click: function (data) { console.log(data); }, success: function (d) { console.log(d); } }); ``` ```javascript layui.use(['iconPickerFa', 'form', 'layer'], function () { var iconPickerFa = layui.iconPickerFa; iconPickerFa.render({ elem: '#iconPicker', url: "../lib/font-awesome-4.7.0/less/variables.less", search: true, page: true, limit: 12, click: function (data) { console.log(data); }, success: function (d) { console.log(d); } }); }); ``` -------------------------------- ### Initialize Layui Form and Components Source: https://github.com/zhongshaofa/layuimini/blob/v2/page/form.html Demonstrates how to use layui.use to load form, layedit, and laydate modules, initialize date pickers, define custom validation rules, and handle form submission events. ```javascript layui.use(['form', 'layedit', 'laydate'], function () { var form = layui.form , layer = layui.layer , layedit = layui.layedit , laydate = layui.laydate; //日期 laydate.render({ elem: '#date' }); laydate.render({ elem: '#date1' }); //创建一个编辑器 var editIndex = layedit.build('LAY_demo_editor'); //自定义验证规则 form.verify({ title: function (value) { if (value.length < 5) { return '标题至少得5个字符啊'; } } , pass: [ /^[\S]{6,12}$/, '密码必须6到12位，且不能出现空格' ] , content: function (value) { layedit.sync(editIndex); } }); //监听指定开关 form.on('switch(switchTest)', function (data) { layer.msg('开关checked：' + (this.checked ? 'true' : 'false'), { offset: '6px' }); layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis) }); //监听提交 form.on('submit(demo1)', function (data) { layer.alert(JSON.stringify(data.field), { title: '最终的提交信息' }) return false; }); //表单初始赋值 form.val('example', { "username": "贤心" , "password": "123456" , "interest": 1 , "like[write]": true , "close": true , "sex": "女" , "desc": "我爱 layui" }); }); ``` -------------------------------- ### Initialize and Configure Layer Popups Source: https://github.com/zhongshaofa/layuimini/blob/v2/page/layer.html Demonstrates how to load the layer module using layui.use and trigger various popup types such as iframes, confirmation dialogs, and custom notice layers. It handles event binding for buttons to trigger specific layer behaviors. ```javascript layui.use('layer', function () { var $ = layui.jquery, layer = layui.layer; var active = { setTop: function () { var that = this; layer.open({ type: 2, title: '当你选择该窗体时，即会在最顶端', area: ['390px', '260px'], shade: 0, maxmin: true, offset: [Math.random() * ($(window).height() - 300), Math.random() * ($(window).width() - 390)], content: '//layer.layui.com/test/settop.html', btn: ['继续弹出', '全部关闭'], yes: function () { $(that).click(); }, btn2: function () { layer.closeAll(); }, zIndex: layer.zIndex, success: function (layero) { layer.setTop(layero); } }); }, confirmTrans: function () { layer.msg('大部分参数都是可以公用的
合理搭配，展示不一样的风格', { time: 20000, btn: ['明白了', '知道了', '哦'] }); }, notice: function () { layer.open({ type: 1, title: false, closeBtn: false, area: '300px;', shade: 0.8, id: 'LAY_layuipro', btn: ['火速围观', '残忍拒绝'], btnAlign: 'c', moveType: 1, content: '
你知道吗？亲！
layer ≠ layui
', success: function (layero) { var btn = layero.find('.layui-layer-btn'); btn.find('.layui-layer-btn0').attr({ href: 'http://www.layui.com/', target: '_blank' }); } }); } }; $('#layerDemo .layui-btn').on('click', function () { var othis = $(this), method = othis.data('method'); active[method] ? active[method].call(this, othis) : ''; }); }); ``` -------------------------------- ### Layui Mini Initialization Data Structure (init.json) Source: https://context7.com/zhongshaofa/layuimini/llms.txt Defines the JSON structure required for framework initialization. It includes home page information, logo configuration, and a hierarchical menu structure. This format supports infinite nesting for menus. ```json { "homeInfo": { "title": "首页", "href": "page/welcome-1.html?t=1" }, "logoInfo": { "title": "LAYUI MINI", "image": "images/logo.png", "href": "" }, "menuInfo": [ { "title": "常规管理", "icon": "fa fa-address-book", "href": "", "target": "_self", "child": [ { "title": "主页模板", "href": "", "icon": "fa fa-home", "target": "_self", "child": [ { "title": "主页一", "href": "page/welcome-1.html", "icon": "fa fa-tachometer", "target": "_self" }, { "title": "主页二", "href": "page/welcome-2.html", "icon": "fa fa-tachometer", "target": "_self" } ] }, { "title": "菜单管理", "href": "page/menu.html", "icon": "fa fa-window-maximize", "target": "_self" }, { "title": "表格示例", "href": "page/table.html", "icon": "fa fa-file-text", "target": "_self" } ] }, { "title": "组件管理", "icon": "fa fa-lemon-o", "href": "", "target": "_self", "child": [ { "title": "图标列表", "href": "page/icon.html", "icon": "fa fa-dot-circle-o", "target": "_self" }, { "title": "文件上传", "href": "page/upload.html", "icon": "fa fa-arrow-up", "target": "_self" } ] } ] } ``` -------------------------------- ### Component: miniMenu.render Source: https://context7.com/zhongshaofa/layuimini/llms.txt Initializes the menu system for the application, supporting both single-module and multi-module layouts. ```APIDOC ## miniMenu.render ### Description Configures and renders the application menu. Supports multi-module (top + left) or single-module (left only) layouts. ### Parameters #### Request Body - **menuList** (array) - Required - Array of menu objects containing title, href, icon, and child nodes. - **multiModule** (boolean) - Optional - If true, enables top + left layout. - **menuChildOpen** (boolean) - Optional - Whether to expand sub-menus by default. ### Request Example { "menuList": [...], "multiModule": true, "menuChildOpen": false } ``` -------------------------------- ### Configure and Render Themes in Layui Mini Source: https://context7.com/zhongshaofa/layuimini/llms.txt Manages the theme configuration and rendering for the Layui Mini framework. It supports initializing with a default theme and listening for manual theme changes. Themes can be built using a provided CSS structure and applied programmatically. Requires the 'miniTheme' module. ```javascript layui.use(['miniTheme'], function () { var miniTheme = layui.miniTheme; // 初始化主题 miniTheme.render({ bgColorDefault: 0, // 默认主题索引 (0-11) listen: true // 是否监听主题切换事件 }); // 手动切换主题 // bgcolorId: 0-经典白色, 1-深色, 2-粉色, 3-青色 // 4-蓝色, 5-黄色, 6-红色, 7-紫色, 8-iView蓝, 9-金色, 10-红黑, 11-紫蓝 miniTheme.buildThemeCss(3); // 切换到青色主题 }); // 主题配色数据结构示例 var themeConfig = { headerRightBg: '#1aa094', headerRightBgThis: '#197971', headerRightColor: 'rgba(255,255,255,.7)', headerLogoBg: '#0c0c0c', headerLogoColor: '#ffffff', leftMenuBg: '#23262e', leftMenuBgThis: '#1aa094', leftMenuColor: 'rgb(191, 187, 187)', leftMenuColorThis: '#ffffff', tabActiveColor: '#1aa094' }; ``` -------------------------------- ### Initialize Layuimini Admin with Options Source: https://github.com/zhongshaofa/layuimini/blob/v2/index.html This JavaScript code initializes the Layuimini admin template using the `miniAdmin.render()` function. It accepts a configuration object that defines various settings such as API endpoints for initialization and cache clearing, hash location, theme defaults, multi-module support, menu behavior, loading times, page animations, and maximum tab numbers. It also integrates Baidu Tongji for analytics on specified domains. ```javascript layui.use(['jquery', 'layer', 'miniAdmin', 'miniTongji'], function () { var $ = layui.jquery, layer = layui.layer, miniAdmin = layui.miniAdmin, miniTongji = layui.miniTongji; var options = { iniUrl: "api/init.json", // Initialize interface clearUrl: "api/clear.json", // Cache clearing interface urlHashLocation: true, // Whether to open hash positioning bgColorDefault: false, // Theme default configuration multiModule: true, // Whether to enable multi-module menuChildOpen: false, // Whether to expand the menu by default loadingTime: 0, // Initialization load time pageAnim: true, // iframe window animation maxTabNum: 20, // Maximum number of tabs opened }; miniAdmin.render(options); // Baidu statistics code, only statistics specified domains miniTongji.render({ specific: true, domains: [ '99php.cn', 'layuimini.99php.cn', 'layuimini-onepage.99php.cn', ], }); $('.login-out').on("click", function () { layer.msg('Logout successful', function () { window.location = 'page/login-3.html'; }); }); }); ``` -------------------------------- ### Initialize Layuimini Framework and Handle Notices Source: https://github.com/zhongshaofa/layuimini/blob/v2/page/welcome-1.html This JavaScript code initializes the Layuimini framework using layui modules like layer and miniTab. It also includes an event listener for clicks on elements with the class 'layuimini-notice' to display system announcements in a modal layer. The functionality allows for custom styling and content presentation within the modal. ```javascript layui.use(['layer', 'miniTab','echarts'], function () { var $ = layui.jquery, layer = layui.layer, miniTab = layui.miniTab, echarts = layui.echarts; miniTab.listen(); /** * 查看公告信息 **/ $('body').on('click', '.layuimini-notice', function () { var title = $(this).children('.layuimini-notice-title').text(), noticeTime = $(this).children('.layuimini-notice-extra').text(), content = $(this).children('.layuimini-notice-content').html(); var html = '
' + '

' + title + '

' + '
' + content + '
' + '
'; parent.layer.open({ type: 1, title: '系统公告'+''+noticeTime+'', area: '300px;', shade: 0.8, id: 'layuimini-notice', btn: ['查看', '取消'], btnAlign: 'c', moveType: 1, content: html, success: function (layero) { var btn = layero.find('.layui-layer-btn'); btn.find('.layui-layer-btn0').attr({ href: 'https://gitee.com/zhongshaofa/layuimini', target: '_blank' }); } }); }); }); ``` -------------------------------- ### Initialize Layui Data Table and Toolbar Events Source: https://github.com/zhongshaofa/layuimini/blob/v2/page/table.html Configures a data table with remote data source, column definitions, and pagination. Includes event listeners for toolbar actions like adding, deleting, and editing rows. ```javascript layui.use(['form', 'table'], function () { var $ = layui.jquery, form = layui.form, table = layui.table; table.render({ elem: '#currentTableId', url: '../api/table.json', toolbar: '#toolbarDemo', cols: [[{type: "checkbox", width: 50}, {field: 'id', title: 'ID'}, {field: 'username', title: '用户名'}, {title: '操作', toolbar: '#currentTableBar'}]], page: true }); form.on('submit(data-search-btn)', function (data) { table.reload('currentTableId', { page: { curr: 1 }, where: { searchParams: JSON.stringify(data.field) } }); return false; }); }); ``` -------------------------------- ### Initialize and Control Multi-Step Form with Layui Source: https://github.com/zhongshaofa/layuimini/blob/v2/page/form-step.html This script initializes the step wizard component with specific dimensions and step labels. It also binds form submission events and navigation buttons to progress through the defined steps. ```javascript layui.use(['form', 'step'], function () { var $ = layui.$, form = layui.form, step = layui.step; step.render({ elem: '#stepForm', filter: 'stepForm', width: '100%', stepWidth: '750px', height: '500px', stepItems: [{ title: '填写入款信息' }, { title: '确认入款信息' }, { title: '完成' }] }); form.on('submit(formStep)', function (data) { step.next('#stepForm'); return false; }); form.on('submit(formStep2)', function (data) { step.next('#stepForm'); return false; }); $('.pre').click(function () { step.pre('#stepForm'); }); $('.next').click(function () { step.next('#stepForm'); }); }); ``` -------------------------------- ### Initialize and Configure Layui TreeTable Source: https://github.com/zhongshaofa/layuimini/blob/v2/page/menu.html This snippet demonstrates how to render a treeTable using the treetable-lay plugin. It includes configuration for tree structure identification, data fetching, and custom column rendering for menu types. ```javascript layui.use(['table', 'treetable'], function () { var $ = layui.jquery; var table = layui.table; var treetable = layui.treetable; layer.load(2); treetable.render({ treeColIndex: 1, treeSpid: -1, treeIdName: 'authorityId', treePidName: 'parentId', elem: '#munu-table', url: '../api/menus.json', page: false, cols: [[{type: 'numbers'}, {field: 'authorityName', minWidth: 200, title: '权限名称'}, {field: 'authority', title: '权限标识'}, {field: 'menuUrl', title: '菜单url'}, {field: 'orderNumber', width: 80, align: 'center', title: '排序号'}, { field: 'isMenu', width: 80, align: 'center', templet: function (d) { if (d.isMenu == 1) { return '按钮'; } if (d.parentId == -1) { return '目录'; } else { return '菜单'; } }, title: '类型' }, {templet: '#auth-state', width: 120, align: 'center', title: '操作'}]], done: function () { layer.closeAll('loading'); } }); $('#btn-expand').click(function () { treetable.expandAll('#munu-table'); }); $('#btn-fold').click(function () { treetable.foldAll('#munu-table'); }); table.on('tool(munu-table)', function (obj) { var data = obj.data; var layEvent = obj.event; if (layEvent === 'del') { layer.msg('删除' + data.id); } else if (layEvent === 'edit') { layer.msg('修改' + data.id); } }); }); ``` -------------------------------- ### Initialize Layarea Province-City-District Picker Source: https://github.com/zhongshaofa/layuimini/blob/v2/page/area.html This snippet initializes the layarea component on a specified HTML element. It uses the Layui module system to load dependencies and provides a callback function to handle the selection results. ```javascript layui.use(['layer', 'form', 'layarea'], function () { var layer = layui.layer , form = layui.form , layarea = layui.layarea; layarea.render({ elem: '#area-picker', change: function (res) { console.log(res); } }); }); ``` -------------------------------- ### Initialize Paigusu Color Picker Source: https://github.com/zhongshaofa/layuimini/blob/v2/page/color-select.html Initializes the Paigusu color picker on elements with the class 'paigusu'. It allows setting an initial color and provides a callback function to handle color selection events. The callback updates the text color of the target element with the selected hex color. ```javascript $(function () { $('.paigusu').paigusu({ color: '#1926dc',//初始色 支持两种配置方案 }, function (event, obj) { console.log(event); console.log(obj); $(event).css('color', '#' + obj.hex) }); }); ``` -------------------------------- ### Initialize Paigusu Color Picker for Background and Input Source: https://github.com/zhongshaofa/layuimini/blob/v2/page/color-select.html Initializes the Paigusu color picker on elements with the class 'test-select-color'. This configuration sets an initial color and uses the callback to update the background color of the target element and set the value of an input field with the name 'test_color' to the selected hex color. ```javascript $(function () { $('.test-select-color').paigusu({ color: '#1aa094',//初始色 支持两种配置方案 }, function (event, obj) { console.log(event); console.log(obj); $(event).css('background-color', '#' + obj.hex); $('input[name="test_color"]') .val('#' + obj.hex); }); }); ``` -------------------------------- ### Data Statistics Display Source: https://github.com/zhongshaofa/layuimini/blob/v2/page/welcome-1.html Demonstrates how to display real-time data statistics for different categories like users, products, and browsing activity. Each statistic shows a count and a description of the current category's total records. ```text 数据统计 实时 ##### 用户统计 1234 ==== 当前分类总记录数 实时 ##### 商品统计 1234 ==== 当前分类总记录数 实时 ##### 浏览统计 1234 ==== 当前分类总记录数 实时 ``` -------------------------------- ### Implementing Layui Button Styles Source: https://github.com/zhongshaofa/layuimini/blob/v2/page/button.html This snippet demonstrates the basic HTML structure for Layui buttons, including themes, sizes, and icon integration. It relies on the Layui CSS framework to apply styles based on specific class names. ```html ``` -------------------------------- ### Handle Form Submission with Layui Source: https://github.com/zhongshaofa/layuimini/blob/v2/page/user-setting.html This snippet demonstrates how to initialize the Layui form module and attach a submit listener to a button. It captures the form data as a JSON string, displays it in an alert, and closes the current tab upon confirmation. ```javascript layui.use(['form','miniTab'], function () { var form = layui.form, layer = layui.layer, miniTab = layui.miniTab; //监听提交 form.on('submit(saveBtn)', function (data) { var index = layer.alert(JSON.stringify(data.field), { title: '最终的提交信息' }, function () { layer.close(index); miniTab.deleteCurrentByIframe(); }); return false; }); }); ``` -------------------------------- ### Create Data Management Page Template with Layui Mini Source: https://context7.com/zhongshaofa/layuimini/llms.txt This template demonstrates a standard admin page layout featuring a search form, a button toolbar, and a data table. It utilizes Layui's modular system to handle table rendering, search filtering, and iframe-based tab navigation for editing and adding records. ```html 数据管理
搜索条件
``` -------------------------------- ### Initialize Login Form and UI Interactions Source: https://github.com/zhongshaofa/layuimini/blob/v2/page/login-3.html This script initializes the Layui form and jQuery components. It includes logic to break out of iframes if the page is loaded within one, toggles password visibility, and validates login form fields before submission. ```javascript layui.use(['form','jquery'], function () { var $ = layui.jquery, form = layui.form, layer = layui.layer; if (top.location != self.location) top.location = self.location; $('.bind-password').on('click', function () { if ($(this).hasClass('icon-5')) { $(this).removeClass('icon-5'); $("input[name='password']").attr('type', 'password'); } else { $(this).addClass('icon-5'); $("input[name='password']").attr('type', 'text'); } }); $('.icon-nocheck').on('click', function () { if ($(this).hasClass('icon-check')) { $(this).removeClass('icon-check'); } else { $(this).addClass('icon-check'); } }); form.on('submit(login)', function (data) { data = data.field; if (data.username == '') { layer.msg('用户名不能为空'); return false; } if (data.password == '') { layer.msg('密码不能为空'); return false; } if (data.captcha == '') { layer.msg('验证码不能为空'); return false; } layer.msg('登录成功', function () { window.location = '../index.html'; }); return false; }); }); ``` -------------------------------- ### Initialize Font Awesome Icon Picker with iconPickerFa.render Source: https://context7.com/zhongshaofa/layuimini/llms.txt Renders a Font Awesome icon picker component. This component allows users to select icons from the Font Awesome library with features like pagination and search. It requires a binding element and optionally a path to the icon variable file. Callback functions are provided for icon selection and successful rendering. ```javascript layui.use(['iconPickerFa', 'form'], function () { var iconPickerFa = layui.iconPickerFa, form = layui.form; // 初始化图标选择器 iconPickerFa.render({ elem: '#iconPicker', // 绑定的input元素 url: 'lib/font-awesome-4.7.0/less/variables.less', // FA图标变量文件路径 search: true, // 是否开启搜索 page: true, // 是否开启分页 limit: 12, // 每页显示数量 cellWidth: '43px', // 图标格子宽度 click: function (data) { // 选择回调 console.log('选中的图标：', data.icon); // 输出: fa-home, fa-user, fa-cog 等 }, success: function (result) { // 渲染成功回调 console.log('图标选择器初始化完成', result); } }); // 动态设置选中图标 iconPickerFa.checkIcon('iconPicker', 'fa-home'); }); ``` -------------------------------- ### ECharts Dashboard Visualization Implementation Source: https://github.com/zhongshaofa/layuimini/blob/v2/page/welcome-2.html Initializes multiple ECharts instances including line charts, rose diagrams, bar charts, and complex datasets. It uses the Layui module system and includes window resize event handling for responsiveness. ```javascript layui.use(['layer', 'echarts'], function () { var $ = layui.jquery, layer = layui.layer, echarts = layui.echarts; var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden'); var optionRecords = { title: { text: '指标名称-报表图' }, tooltip: { trigger: 'axis', axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } } }, legend: { data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'] }, toolbox: { feature: { saveAsImage: {} } }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: [ { type: 'category', boundaryGap: false, data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] } ], yAxis: [ { type: 'value' } ], series: [ { name: '邮件营销', type: 'line', stack: '总量', areaStyle: {}, data: [120, 132, 101, 134, 90, 230, 210] }, { name: '联盟广告', type: 'line', areaStyle: {}, data: [220, 182, 191, 234, 290, 330, 310] }, { name: '视频广告', type: 'line', stack: '总量', areaStyle: {}, data: [150, 232, 201, 154, 190, 330, 410] }, { name: '直接访问', type: 'line', stack: '总量', areaStyle: {}, data: [320, 332, 301, 334, 390, 330, 320] }, { name: '搜索引擎', type: 'line', stack: '总量', label: { normal: { show: true, position: 'top' } }, areaStyle: {}, data: [820, 932, 901, 934, 1290, 1330, 1320] } ] }; echartsRecords.setOption(optionRecords); var echartsPies = echarts.init(document.getElementById('echarts-pies'), 'walden'); var optionPies = { title: { text: '指标名称-玫瑰图', left: 'center' }, tooltip: { trigger: 'item', formatter: '{a}
{b} : {c} ({d}%)' }, legend: { orient: 'vertical', left: 'left', data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'] }, series: [ { name: '访问来源', type: 'pie', radius: '55%', center: ['50%', '60%'], roseType: 'radius', data: [ {value: 335, name: '直接访问'}, {value: 310, name: '邮件营销'}, {value: 234, name: '联盟广告'}, {value: 135, name: '视频广告'}, {value: 368, name: '搜索引擎'} ], emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; echartsPies.setOption(optionPies); var echartsDataset = echarts.init(document.getElementById('echarts-dataset'), 'walden'); var optionDataset = { legend: {}, tooltip: {}, dataset: { dimensions: ['product', '2015', '2016', '2017'], source: [ {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7}, {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1}, {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5}, {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1} ] }, xAxis: {type: 'category'}, yAxis: {}, series: [ {type: 'bar'}, {type: 'bar'}, {type: 'bar'} ] }; echartsDataset.setOption(optionDataset); var echartsMap = echarts.init(document.getElementById('echarts-map'), 'walden'); var optionMap = { legend: {}, tooltip: { trigger: 'axis', showContent: false }, dataset: { source: [ ['product', '2012', '2013', '2014', '2015', '2016', '2017'], ['Matcha Latte', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7], ['Milk Tea', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1], ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5], ['Walnut Brownie', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1] ] }, xAxis: {type: 'category'}, yAxis: {gridIndex: 0}, grid: {top: '55%'}, series: [ {type: 'line', smooth: true, seriesLayoutBy: 'row'}, {type: 'line', smooth: true, seriesLayoutBy: 'row'}, {type: 'line', smooth: true, seriesLayoutBy: 'row'}, {type: 'line', smooth: true, seriesLayoutBy: 'row'}, { type: 'pie', id: 'pie', radius: '30%', center: ['50%', '25%'], label: { formatter: '{b}: {@2012} ({d}%)' }, encode: { itemName: 'product', value: '2012', tooltip: '2012' } } ] }; echartsMap.setOption(optionMap); window.onresize = function () { echartsRecords.resize(); } }); ``` -------------------------------- ### Initialize TableSelect Component Source: https://github.com/zhongshaofa/layuimini/blob/v2/page/table-select.html Basic initialization of the TableSelect component. It requires defining the input element, the unique key for selection, and the table configuration. ```javascript var tableSelect = layui.tableSelect; tableSelect.render({ elem: '#demo', checkedKey: 'id', searchKey: 'keyword', searchPlaceholder: '关键词搜索', height: '400', width: '900', table: { url: '', cols: [[]] }, done: function (elem, data) { // Callback after selection } }); ``` -------------------------------- ### Creating Layui Button Groups Source: https://github.com/zhongshaofa/layuimini/blob/v2/page/button.html This snippet shows how to group multiple buttons together using the layui-btn-group class. It is useful for creating toolbars or related action sets. ```html
``` -------------------------------- ### Initialize zyupload Component for File Uploads Source: https://github.com/zhongshaofa/layuimini/blob/v2/page/upload.html This JavaScript code initializes the zyupload component for handling file uploads. It configures various aspects such as upload URL, file types, size limits, and user interaction options like drag-and-drop, cropping, and deletion. It also includes callback functions for handling events like file selection, deletion, success, failure, and completion of the upload process. The component relies on jQuery. ```javascript $(function () { // Initialize the plugin $("#zyupload").zyUpload({ width: "650px", // Width height: "400px", // Height itemWidth: "140px", // Width of file item itemHeight: "115px", // Height of file item url: "api/upload", // Path to upload files fileType: ["jpg", "png", "txt", "js", "exe"], fileSize: 51200000, // Size of files to upload multiple: true, // Whether multiple files can be uploaded dragDrop: true, // Whether to allow drag and drop file uploads tailor: true, // Whether to allow image cropping del: true, // Whether to allow file deletion finishDel: false, // Whether to delete previews after upload is complete /* External callback interface */ onSelect: function (selectFiles, allFiles) { // Callback function for file selection. selectFile: currently selected file. allFiles: all files not yet uploaded. console.info("Currently selected files:"); console.info(selectFiles); }, onDelete: function (file, files) { // Callback function for deleting a file. file: currently deleted file. files: files after deletion. console.info("Currently deleted file:"); console.info(file.name); }, onSuccess: function (file, response) { // Callback function for successful file upload. console.info("This file uploaded successfully:"); console.info(file.name); console.info("This file uploaded to server address:"); console.info(response); $("#uploadInf").append("

Upload successful, file address is:" + response + "

"); }, onFailure: function (file, response) { // Callback function for failed file upload. console.info("This file upload failed:"); console.info(file.name); }, onComplete: function (response) { // Callback function for upload completion. console.info("File upload complete"); console.info(response); } }); }); ```