表格数据增删改的功能实现通常需要用到父子页面传值,当用户需要用到点击表格某一行查看详情或者编辑当前表格数据时,我们用以下方法便可轻松实现传值:
一:父页面Js
//此处用的bootstrapTable创建表格
{
field:'NAME',
title:'名称',
align:"left",
width : 300,
halign:"middle",
formatter: function (value, row, index) {
//获取表格里的的所有字段数据封装成数据
var params = "";
$.each(row, function(e, i){
params += e + "=" + row[e] + "&";
});
return "<a href=\"javascript:viewInfo('" + params.substring(0, params.length - 1) + "');\">" + value + "</a>";
}
},
//查看详情 layer.js弹窗插件
function viewInfo(params) {
layer.open({
type: 2,
title: '查看详情',
skin: 'layui-layer-rim',
area: ['60%', '80%'],
shadeClose: true,
maxmin: true, //开启最大化最小化按钮
minBtn: 0,
scrollbar: false,
content: 'viewInfo.html?type=Edit¶ms=' + params
})
}
二、子页面Js
function initForm(){
var pstr = window.location.search;
var params = pstr.substring(1, pstr.length).split("&");//截取Url里的字段参数
var key = "", value = "";
$.each(params, function(i, p){
key = p.split("=")[0];//获取字段名
value = p.split("=")[1];//获取字段值
if (value.indexOf("%") >= 0){
//将子页面的id值与所获取的字段保持一致
$("#" + key).html(decodeURI(value));//转码中文字符
} else {
$("#" + key).html(value=="null"?"":value);
}
}
}
三:示例: