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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值