1.下载 xm-select 下拉框 下载地址：https://gitee.com/maplemei/xm-select/releases/tag/v1.2.4 下载后解压，复制 xm-select.js 到项目中。 放在 js 文件夹中。 2.使用 xm-select 下拉框 在项目 layui.js 后面引入 xm-select.js 文件。 顶部搜索中的图书分类下拉框，修改为使用 x
1.回显是否上架 是否上架 div 设置 id 属性：id="status"。 判断是否上架的值，然后拼接单选框按钮字符串，最后把拼接后的字符串设置到 id="status"的 div 中。 运行项目，使用 Chrome 浏览器打开。 点击“更新”按钮，更新图书页面回显了“图书分类”和“是否上架”。 2.更新图书按钮 更新图书按钮设置属性：lay-fi
1.修改更新图书页面 修改图书信息时，“创建时间”不设置默认值。 “图书封面”去掉图片的 class 样式，使图片显示。 “图片上传”后不需要移除 class 样式，直接设置图片地址。 修改“更新图书”按钮和“表单提交”对应的lay-filter="edit"的属性值 edit。 2.更新图书页面回显原来的数据 在“组件”中，选择“弹出层”，然后选择“基础属性”，找到
1.添加成功后关闭添加图书页面 在“组件”中，选择“弹出层”，然后选择“关闭弹层”。 因为添加图书页面是 Iframe 弹出层，所以要使用 Iframe 弹层页面中关闭自身。 复制代码。 粘贴代码。 运行项目，使用 Chrome 浏览器打开。 点击“添加图书”按钮时，添加成功后会关闭“添加图书页面”，但图书列表数据没有刷新。 2.添加成功后刷新图书列表 在“组件”中，选择“弹出层”，然后选
1.图书封面文件上传 添加“图书封面”表单元素。 在“组件”中，选择“上传”，然后选择“拖拽上传”。 点击代码，复制“拖拽上传”代码。 粘贴到“图片封面”代码中。 然后再复制渲染代码。 粘贴到 js 代码中。 2.上传图片 把 url 改成上传文件的 api 接口。 运行项目，使用 Chrome 浏览器打开。 点击上传，选择图片后，图片上传成功就会显示在 img 标签里。 3.隐藏
1.添加图书页面动态获取图书分类 从 api 接口中获取“图书分类”信息，并展示在“图书分类”下拉框中。 首先在添加图书页面显示的时候，请求 api“获取图书分类信息”。 给“图书分类”下拉框添加一个 id="categoryId"的属性。 把 api“获取图书分类信息”的结果拼接成下拉项的 html 字符串，然后将 html 字符串设置到图书分类的位置。 删除默认的“图
1.添加图书页面使用表单组件 使用表单添加图书。在“组件”中，选择“表单组件”，然后选择“方框风格”。 在“方框风格”中点击查看代码，复制整个 form 标签。粘贴到添加图书页面中。 运行项目，使用 Chrome 浏览器打开。点击“添加”按钮，就显示了添加的表单。 2.修改添加图书页面的表单样式 使用 layui 的栅格布局，让表单左右各空出 2 个列的宽度，使表单居中显示。 让表单距
1.头部工具栏事件 在“组件”中，选择“表格”，然后选择“事件”，在“事件”中找 toolbar 头部工具栏事件。 头部工具栏“批量删除”和“添加”按钮添加 lay-event="xx" 属性，点击“批量删除”和“添加”按钮就会触发 toolbar 事件。 代码中编写 toolbar 事件，打印回调函数的参数。 toolbar(filter) 参数 filter 是表格属
1.图书价格列排序 在“组件”中，选择“表格”，然后选择“表头属性”，在“表头属性”中找 sort 属性。 在代码中添加 sort 属性并设置为 true。 运行项目，使用 Chrome 浏览器打开。 2.单元格事件 在“组件”中，选择“表格”，然后选择“事件”，在“事件”中找 tool / toolDouble 事件。 点击打开 tool / toolDouble 事件。 使用 ta
1.添加“操作”列 在“创建时间”列的后面添加一列：“操作”。 2.添加“更新”和“删除”按钮 在组件菜单中，选中按钮组件，复制一个蓝色的迷你按钮的代码。 粘贴代码后，修改文字为“更新”。 后面再添加一个红色的“删除”按钮。 运行项目，使用 Chrome 浏览器打开。 3.添加复选框列 在组件菜单中，选中表格组件，查看综合演示中最左侧的复选框列，点击查看代码。 复制第一列的代码。 代
1.自定义分页 在组件中找到“表格”，右侧选择“基础属性”，设置“page”属性为 object json 对象，来实现自定义分页。 传入“分页”组件 laypage。 2.设置自定义分页的样式 在分页组件属性中，设置各个属性的值。 设置属性如下。 page: { limit: 5 // 每页显示的条数 ,limits: [5, 10, 15, 20] // 每页条数的选择项 ,pre
1.使用表格组件 打开 layui 官网，复制表格组件。 复制表格标签，粘贴到你要显示的位置。 2.表格组件渲染实例 使用 layui 的 table 模块。 创建表格的渲染实例，并开启分页。 3.设置表格的表头 使用 cols 属性，配置对应的表头。 4.设置 url 请求的配置 设置分页请求的参数名称。 5.处理请求后的数据 把 url 获取到的数据处理成 layui 表
1.设置距离顶部的像素 设置顶部外边距为 200px。 2.设置点击按钮后打开新页面 修改按钮显示文字为“图书列表”。 使用 a 标签替换 button 标签，添加 href 属性支持跳转打开新页面；href 设置为 # 是一个占位符不会跳转任何页面，之后新建页面后再修改 # 为新页面的地址。 点击按钮后就跳转到 # 位置。 3.设置按钮的样式 设置按钮尺寸为大型按钮，按钮颜色为蓝色。
1.创建项目 在左侧项目管理器中右键，新建->项目。 选择“普通项目”，选择“基本HTML项目”，输入项目名，“浏览”选择项目路径，最后点“创建”。 一个空项目就创建完成了。 2.下载 layui js 文件 进入 layui 官网：https://layui.dev/docs/2/，下载引用获取 layui。 下载后的 layui 压缩包解压后，把 layui 文件夹放在项目目
Copyright © 2005-2025 51CTO.COM 版权所有 京ICP证060544号
