项目简介

负责写一个广告投放后台管理平台的一个页面。可实现删除、编辑添加等功能,因为原来的管理系统由JSP开发不便更改,所以最后将新写的页面直接嵌入进原来的管理系统,相当于是完全独立出的一个页面。

主要技术

利用layUI框架开发、JSON传送数据、Ajax响应接口。

问题描述

一、
表头和表单元素无法对齐
二、
通过 storage 获得的数据无法用innerHTMl渲染进input框,如代码所示。

 document.getElementById("ad_title").innerHTML= data.title;

三、利用option val()无法获得下拉列表的被选择项。

四、无法获取表格中复选框checkbox被选中项的数据。

五、点击添加按钮,进入弹层界面,页面出现长长地滚动条(不是由内容引起)。
六、利用Ajax请求接口传送数据。

问题分析

一、表头和表单元素无法对齐
因为代码中出现了一个不该出现的“,”。

改过来即可,以下为正确显示结果。

二、通过 storage 获得的数据无法用innerHTMl渲染进input框,如代码所示。

 document.getElementById("ad_title").innerHTML= data.title;

input是单标签,所以用innerHTML无法渲染,必须要用value才可以改变,最后修改如下。

 document.getElementById("ad_title").value= data.title;

三、利用option val()无法获得下拉列表的被选择项。
复选框的被选择项应该通过text获得。

 var statusArray=["启动","禁止"];
 var statusString=$("#ad_action option:selected").text();//状态
 console.log(statusString);

四、checkStatus('adInfo')中开始写的是lay-filter的值,所以无法获取数据,应该使用方法渲染表格定义的id

var checkStatus = table.checkStatus('adInfo'),
data = checkStatus.data,
AD_id = "";


五、这里的编辑界面通过跳转另一个HTML页面实现,运行发现下方总是出现出现长长的滚动条,而里面包含的内容并没有越界,也没有定义其他的样式。
后来经过检查调试工具发现,并不是由layUI自带属性造成的,而是项目开始一个CSS文件中定义了一个width,导致每次盒子的width都超出了范围。
六、发送数据post
请求数据get

七、时间组件简单使用

参考文档

layUI官方文档
layui框架列表监听checkbox选中数据的值
layui加载表格,绑定新增,编辑删除,查看按钮事件
本地存储(Local Storage)

03-05 15:47