html点击按钮获取列表数据传递到页面,随笔:ajax传递数组,layui父子页面传值,下来菜单赋值,父页面数据获取,表格数据替换为字符串...
一.Ajax向后台传递数组问题:(声明前台我使用的layui框架)
例:我们要多前台一个数据表格进行批量删除操作,我们通过复选框选中数据id,将id存入一个数组中,然后利用ajax传递给后台,完成批量删除,再过程中我们需要加上traditional : true
代码如下:
function batchDel() {
var datas;
var ids = new Array();// 声明数组
layui.use(‘table‘, function() {
var table = layui.table;
var checkStatus = table.checkStatus(‘encryptionTable‘);// 声明复选框
datas = checkStatus.data;
for ( var i in datas) {
ids[i] = datas[i].id;// 得到复选框的值
}
if (ids.length != 0) {
$.ajax({
url : "/admin/encryption/delete.json",
type : "post",
traditional : true,// 这里设置为true,不然后台接收到的参数会带上[],导致数据无法正常接收
data : {
"ids" : ids
},
success : function(data) {
alert("删除成功");
table.reload("encryptionTable");
layer.close(index);
}
});
} else {
layer.open({
title : ‘操作提示‘,
content : ‘请至少选择一行数据要删除数据..‘
});
}
});
}
二.Layui父页面给子页面传值
例如:我们需要获取父页面table中的数据id然后子页面需要根据这个id取查询此行数据的详细信息进行展示,完成查看的逻辑,此时我们就需要用到layui父页面值给子页面,子页面进行接收,我们需要在弹出子页面时url中将已经拿到的id传过去
代码:
弹出层:
var id=data.id;
//创建一个HTML 对象
var html = "see.html";
var url = "/admin/encryption/seeEncryption/"+html+".do?id="+id;
parent.layer.open({
title: [‘文件系统资源明细‘, ‘font-size:16px;background-color:#5FB878‘],
type: 2,
resize: false, // 禁止拉伸
move: true,
maxmin: false, // 开启最大化最小化按钮
skin: ‘layui-layer-rim‘, //样式类名
area: [‘740px‘, ‘300px‘],
content:url,
btn : [ "确定", "取消" ],
skin : ‘layui-layer-molv‘,
yes : function(index,layero) {
parent.layer.close(index)
},
end : function() { //iframe销毁后触发的函数
}
});
子页面中获取id,利用ajax传递给后台在获取后台返回的数据,然后根据id赋值给input表单中
layui.use(‘table‘, function() {
var id = ${parameter.id}; //从父页面取到传过来的id,用ajax请求后台进行操作
$.ajax({
url : "/admin/encryption/see.json",
type : "post",
dataType : "json",
data : {
"id" :id
},
success : function(data) {
if(data!=null){
$("#edName").val(data.data.edName);
$("#edIdentification").val(data.data.edIdentification);
$("#edPlain").val(data.data.edPlain);
$("#edAlgorithm").val(data.data.edAlgorithm);
$("#edSecretKey").val(data.data.edSecretKey);
}else{
alert("查询数据为空...");
}
}
});
});
三.父页面如何获取子页面的数据
例:例如我们的子页面中input文本框,select下拉选项框,还单选或多选的按钮,我们在父页面如何拿到这些输入的或是选中的参数
代码:
var edName = parent.layer.getChildFrame(‘#edName‘,index).val();
var edPlain = parent.layer.getChildFrame(‘#edPlain‘,index).val();
var edAlgorithm = parent.layer.getChildFrame(‘#edAlgorithm option:selected‘,index).val();//获取下拉菜单选中的值
var edSecretKey = parent.layer.getChildFrame(‘#edSecretKey‘,index).val();
var encryptionOutput = parent.layer.getChildFrame(‘#encryptionOutput input:checked‘,index).val();
var encryptionInput = parent.layer.getChildFrame(‘#encryptionInput input:checked‘,index).val();//获取选中按钮的值
四.Layui中表格数据的替换
例:我们在数据库中获取的状态status信息为0和1的形式,我们怎么能让他在前台显示是以“已发布”“已停用”形式的字符展示,前提我们
代码:
{
field : ‘edStatus‘,
title : ‘状态‘,
toolbar :‘#statusDemo‘,
width : 110,
fixed : ‘left‘
}
{{#if (d.edStatus == 0) { }}
已发布
{{# }else if(d.edStatus == 1){ }}
已停用
{{# } }}
五.如何拿到后台数据将其动态赋值给前台select下来菜单中
例:我们从后台数据中获取到了各种服务,需要将其赋值给下拉菜单
代码:
initSelect:function(){
$.ajax({
url : ‘/admin/configure/servnames.json‘,
dataType : ‘json‘,
type : ‘POST‘,
success : function(data) {
$("#serviceName").append(‘请选择服务‘);
$.each(data.data, function(index, item) {
$("#serviceName").append(‘‘
+ item.serviceName + ‘‘);
});
form.render(‘select‘);//下拉菜单渲染 把内容加载进去
}
});
}
六.Layui中子页面的子页面怎么弹出
代码:
parent.layer.open({
title : ‘算法方案添加提示‘,
content : ‘请将方案数据新增成功,是否继续添加?‘
});
原文:http://blog.51cto.com/13501268/2308936
html点击按钮获取列表数据传递到页面,随笔:ajax传递数组,layui父子页面传值,下来菜单赋值,父页面数据获取,表格数据替换为字符串...相关推荐
- 微信小程序开发——点击按钮获取用户授权没反应或反应很慢的解决方法
微信小程序开发--点击按钮获取用户授权没反应或反应很慢的解决方法 参考文章: (1)微信小程序开发--点击按钮获取用户授权没反应或反应很慢的解决方法 (2)https://www.cnblogs.co ...
- ajax里数组添加数据,小笔记(一):ajax传递数组及将ajax返回数据赋值
当使用ajax传递数据时,有可能传递多个数据,这是使用以下方法传递数据就会显得数据过多且混杂 $.ajax({ type:'post', url:url, data:{data:data,conten ...
- jq点击按钮获取php的值删除,通过jquery怎么移除点击事件
通过jquery移除点击事件的方法:首先在html里添加一个按钮:然后使用jquery来为按钮添加上click的点击事件:最后使用jquery的unbind方法来移除事件就行了. 本教程操作环境:wi ...
- ajax传递多参数类型,Ajax传递不同类型的参数
1.目录结构: 1.传递普通的参数 2.传递对象 3.传递List 4.传递数组 1.1 前端页面 前端页面.png 1.2 HTML代码 注意:需要引入layui噢 button{ margin-t ...
- 公众号如何跳转到页面php,图文详解微信公众号开发自定义菜单跳转页面并获取用户信息实例...
这篇文章主要介绍了微信公众号开发 自定义菜单跳转页面并获取用户信息实例详解的相关资料,需要的朋友可以参考下 微信公众号开发 自定义菜单 请先读完本文再进行配置开发 请先前往微信平台开发者文档阅读&qu ...
- 点击按钮获取listview网上数据
//activity_main <?xml version="1.0" encoding="utf-8"?> <LinearLayout xm ...
- Android中点击按钮获取string.xml中内容并弹窗提示
场景 AndroidStudio跑起来第一个App时新手遇到的那些坑: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/103797 ...
- html网页获取点击按钮获取当前时间
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- Android中点击按钮获取星级评分条的评分
场景 效果 注: 博客: https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书.教程推送与免费下载. 实现 将布局改为Lin ...
最新文章
- 清华博士接亲被要求现场写代码,网友:真是面向对象编程!
- 分治法求数组中的最大最小元素
- Windows phone7 开发-Zune software is not launched 【转】
- oracle ebs 数据源,Oracle EBS环境下查找数据源(Form篇)
- python方向键键值_python字典键值对的添加和遍历方法
- C/C++ queue队列的理解以及使用
- Nginx 下部署 HTTPS 与安全调优
- python接口自动化(十六)--参数关联接口后传(详解)
- 利用机器学习的排名模型,提升你在英雄联盟的排名
- 华为机试HJ12:字符串反转
- 在一个字符串中找到第一个只出现一次的字符,并返回它的位置
- 很酷的CSS3仿Facebook登录表单
- python模拟足球比赛_博客园仿真足球竞赛平台Python版SDK
- 企业全面运营管理沙盘模拟心得_企业经营沙盘模拟心得总结【精选】
- 递归下降文法C语言实验报告,编译原理实验报告:实验二编写递归下降语法分析程序...
- 避坑外连腾讯云服务器redis 6379
- ue4风格化材质_ue4商城资源Stylized Terrain Pack of 50 Materials50种材质风格化地形包
- 网站建设视频教程,史上最精,最全。
- 5个酷毙的 Python 神器工具
- 梦江湖获取服务器信息,《一梦江湖》6月5日更新公告