基於Layui的頁面傳參及獲取參數

預計實現效果

通過點擊編輯按鈕，能夠把該行數據顯示在表格中

• table.html頁面所屬表格截取一行：
  

• edit.html頁面：
  

實現代碼

• table.html關鍵代碼，傳遞參數

// 監聽更新（編輯）操作
table.on('tool(currentTableFilter)', function (obj) {
      var st_id = obj.data.id;
      var st_username = obj.data.username;
      var st_grade = obj.data.grade;
      var st_department = obj.data.department;
      var st_dorm = obj.data.dorm;
      var st_sex = obj.data.sex;
      var st_phone = obj.data.phone;
      var st_email = obj.data.email;
      if (obj.event === 'edit') { 
            var index = layer.open({
                  title: '編輯用戶',
                  type: 2,
                  shade: 0.2,
                  maxmin: true,
                  shadeClose: true,
                  area: ['55%', '90%'],
                  content: '../table/edit/edit.html?st_id='+st_id+'&st_username='+escape(st_username)+'&st_grade='+st_grade+'&st_phone='+st_phone+
                  '&st_department='+escape(st_department)+'&st_dorm='+escape(st_dorm)+'&st_sex='+escape(st_sex)+'&st_email='+st_email,
            });
      }
}

• edit.html關鍵代碼(js):接收參數並放進輸入框

function getQueryString(name) { 
    var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i'); 
    var r = window.location.search.substr(1).match(reg); 
    if (r != null) { 
        return unescape(r[2]); 
    } 
    return null; 
}

//接收table.html的編輯按鈕傳遞的參數
var phone = getQueryString("st_phone");
var id = getQueryString("st_id");
var username = unescape(getQueryString("st_username"));
var dorm = unescape(getQueryString("st_dorm"));
var grade = getQueryString("st_grade");
var email = getQueryString("st_email");
var department = unescape(getQueryString("st_department"));

//將參數賦值給input輸入框
document.getElementsByName("phone")[0].value = phone;
document.getElementsByName("id")[0].value = id;
document.getElementsByName("username")[0].value = username;
document.getElementsByName("dorm")[0].value = dorm;
document.getElementsByName("email")[0].value = email;
document.getElementsByName("department")[0].value = department;
document.getElementsByName("grade")[0].value = grade;

問題

• 遇到問題①：傳參中文亂碼
  解決方法：在table.html使用escape包裹傳入參數，在edit.html用unescape獲取傳進的參數，列子見上方username、dorm、department參數

• 遇到問題②：彈出的頁面性別一欄固定選中了“男”
  解決方法，因php需要用到name傳參，增加了一個id來區分男女選項，根據傳入的性別修改checked狀態，實現選中對應選項。

<input type="radio" name="sex" value="男" title="男" id="male" checked="">
<input type="radio" name="sex" value="女" title="女" id="female" checked="">

var sex = unescape(getQueryString("st_sex"));
//使彈窗打開可根據傳入性別選中對應選項
if(sex=='男'){
    document.getElementById("male").checked=true;
    document.getElementById("female").checked=false;
}else{
    document.getElementById("male").checked=false;
    document.getElementById("female").checked=true;
}