本人前端知识相当于小白,初学地对地导弹时,与了解了layui前端框架,所以开始研究了数据表的增删改查,由于js, ajax知识不是很好,所以百度了相关ajax操作,用以借鉴。希望能帮助有需要的初学者,不喜勿喷,另外有相关不足,希望大家可以指出,谢谢!
注:以下前端代码都是利用layui的框架,后台是导弹
<强>前端:
& lt; %——
由IntelliJ IDEA。
用户:SL
日期:2019/2/26
时间:14:03
改变这个模板使用文件| |设置文件模板。
——%比;
% @ & lt;页面contentType=" text/html; charset=utf - 8”语言=癹ava”%比;
& lt; html>
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; meta name=" viewport "
内容="宽度=设备宽度,user-scalable=不,初始=1.0,最大范围=1.0,最小规模=1.0”比;
& lt; title> layui在线调试& lt;/title>
& lt;链接rel="样式表" href=" https://www.yisu.com/zixun/$ {ctx}/静态/layui/css/layui.css吗?t=1545041465443 " rel="外部nofollow”媒体="所有"比;
& lt;脚本src=" https://www.yisu.com/zixun/$ {ctx}/静态/jquery/jquery-3.3.1.js”祝辞& lt;/script>
& lt; style>
身体{
保证金:10 px;
}
.demo-carousel {
身高:200 px;
行高:200 px;
text-align:中心;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt;表类=" layui-hide " id=把菔尽眑ay-filter=安馐浴弊４? lt;/table>
& lt;脚本type=" text/html " id=癰arDemo”比;
& lt;一个类=" layui-btn layui-btn-primary layui-btn-xs”lay-event=跋附凇钡脑诓榭? lt;/a>
& lt;一个类=" layui-btn layui-btn-xs”lay-event=氨嗉弊４潜嗉? lt;/a>
& lt;一个类=" layui-btn layui-btn-danger layui-btn-xs”lay-event=皑尅弊４巧境? lt;/a>
& lt;/script>
& lt;脚本src=" https://www.yisu.com/zixun/$ {ctx}/静态/layui/layui.js吗?t=1545041465443“charset=" utf - 8 "祝辞& lt;/script>
& lt; !——注意:如果你直接复制所有代码到本地,上述js路径需要改成你本地的——比;
& lt; script>
layui.config ({
版本:‘1545041465443’//为了更新js缓存,可忽略
});
layui。使用([“层”,“表”,“元素”),函数(){
var=layui层。层//弹层
、表=layui。表//表格
、元素=layui。元素//元素操作
,形成=layui.form//监听选项卡切换
element.on(选项卡(演示),函数(数据){
层。技巧(“切换了' +数据。指数+ ':' +。innerHTML, {
小贴士:1
});
});//执行一个表实例
table.render ({
elem:“#演示”
、身高:420
url:“$ {ctx}/新闻/主/的//数据接口
标题:“新闻表”
、页面:真//开启分页
工具栏:“违约”//开启工具栏,此处显示默认图标,可以自定义模板,详见文档
totalRow:真正的//开启合计行
关口:[[//表头
{类型:“复选框”,固定:“左派”}
,{字段:“id”,标题:“新闻编号”,宽度:30日:真的,固定:“左派”}
,{字段:“标题”,标题:“新闻名称”,宽度:180}
,{字段:“总结”,标题:“新闻摘要的,宽度:180}
,{字段:“作者”,标题:“作者”,宽度:70}
,{字段:“createDate”,标题:“创建时间”,宽度:100}
,{固定:“正确”的,宽度:165年,对齐:“中心”,工具栏:“# barDemo”}
]]
});//监听头工具栏事件
table.on(工具栏(测试),函数(obj) {
var checkStatus=table.checkStatus (obj.config.id)
、数据=https://www.yisu.com/zixun/checkStatus.data;//获取选中的数据
开关(obj.event) {
案例'add”:/* layer.msg(“添加”);*/layer.open ({//层提供了5种层类型。可传入的值有:0(信息框,默认)1(页面层)2 (iframe层)3(加载层)4(提示层)
类型:1、
标题:“添加新闻信息”,
面积:[420 px,“330 px”),
内容:$ (" # popAddTest ")//引用的弹出层的页面层的方式加载修改界面表单
});//动态向表传递赋值可以参看文章进行修改界面的更新前数据的显示,当然也是异步请求的要数据的修改数据的获?* setFormValue (obj,数据);*/form.on(提交(submit12),函数(按摩){
. ajax({美元
url:“$ {ctx}/新闻/添加/',
类型:“文章”,
数据类型:json,
contentType:“application/json;charset=utf - 8”,
数据:JSON.stringify ({/* id: JSON.stringify (data.id) */id: data.id,
newtitle: massage.field.newtitle,
newsummary: massage.field.newsummary,
newauthor: massage.field.newauthor
}),
成功:函数(味精){
var returnCode=msg.returnCode;//取得返回数据(刺类型的字符串)的信息进行取值判断
如果(returnCode==200) {
layer.closeAll(“加载”);
layer.load (2);
层。味精(“添加成功”,{图标:6});
setTimeout(函数(){
location.reload();//刷新页面/* layer.closeAll();//关闭所有的弹出层*/}，
1000
);//加载层——风格
其他}{
层。味精(“添加失败”,{图标:5});
}
}
}）
返回false;//假:阻止表单跳转真的:表单跳转
}）
打破;
案例的更新:
如果(数据)。长度===0){
layer.msg(“请选择一行”);
}else if(数据。长度比;1){
layer.msg('只能同时编辑一个');
其他}{
层。alert('编辑(id):“+ checkStatus.data [0] .id);
}
打破;
例“删除”:/*批量删除*/如果(数据)。长度===0){
layer.msg(“请选择需要删除的数据的);
其他}{/* layer.msg(“删除”);*//* var checkStatus=table.checkStatus(“演示”);*/var id=" ";
我(var=0; i< data.length;我+ +){
ids数据[我].id + +=薄ⅰ?
}
警报(ids);
parent.layer.msg(“删除中……阴影”,{图标:16日:0.3,时间:2000});
. ajax({美元
url:“$ {ctx}/新闻/mulDelete/',
类型:“文章”,
数据类型:json,
contentType:“application/json;charset=utf - 8”,
数据:JSON.stringify ({/* id: JSON.stringify (data.id) */id: id
}),
成功:函数(味精){
var returnCode=msg.returnCode;//取得返回数据(刺类型的字符串)的信息进行取值判断
如果(returnCode==200) {
layer.closeAll(“加载”);
layer.load (2);
层。味精(“删除成功”,{图标:6});
setTimeout(函数(){
location.reload();//刷新页面/* layer.closeAll();//关闭所有的弹出层*/}，
1000
);//加载层——风格
其他}{
层。味精(“删除失败”,{图标:5});
}
}
}）
返回false;//假:阻止表单跳转真的:表单跳转
}
打破;
}
；
});//监听行工具事件
table.on(工具(测试),函数(obj){//注:工具是工具条事件名,测试是表原始容器的属性lay-filter=倍杂Φ闹怠?
数据=https://www.yisu.com/zixun/obj.data/var/获得当前行数据
,layEvent=obj.event;//获得lay-event对应的值
如果(layEvent===跋附凇?{
layer.msg('查看操作的);
}else if (layEvent===皑尅? {/*层。确认(“真的删除行么”,函数(指数){
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
