Layui编辑页面的数据回显
首先我
·
Layui数据的回返
以数据表格中的编辑为例(如下图)
user_list(表格数据)页面代码
<table class="layui-hide" id="currentTableId" lay-filter="test"></table>
/*此处是操作功能 */
<script type="text/html" id="currentTableBar">
<a class="layui-btn layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
</script>
<script>
layui.use(['form', 'table', 'layer'], function () {
var $ = layui.jquery,
form = layui.form,
table = layui.table,
layer = layui.layer;
// 监听工具栏事件
table.on('tool(test)', function (obj) {
var data = obj.data;
//console.log(data)
if (obj.event === 'edit') {
var index = layer.open({
title: '编辑用户',
type: 2,
shade: 0.2,
maxmin:true,
shadeClose: true,
area: ['60%', '90%'],
content: './user-edit.html?id=' + data.UserId, //此处?后面的id需要和 getQueryVariable(" ")括号里面的值相同
success: function (obj) {
var data = obj.data;
form.val('From', { //此处要用layui 表格赋值 的方法,最好不要用juqery(例如:$("#userid").val(data.UserId);)赋值的方法
"userid": data.UserId,
"username": data.Name,
"password": data.Password,
"phone": data.Phone,
"email": data.Email,
"usertype": data.UserTypeId
})
}
$(window).on("resize", function () {
layer.full(index);
});
return false;
}
});
</script>
注意:
- content: ‘./user-edit.html?id=’ + data.UserId 此处?后面的id需要和 getQueryVariable(" ")括号里面的值相同
- 进行数据回返时需要通过layui表单赋值进行反值,form.val(‘From’, { })中的"From"即 edit.html页面中的class=“layui-form” 所在元素属性 lay-filter="" 对应的值
getQueryVariable方法编码如下:
// 获取url参数值
function getQueryVariable(key) {
var url = location.search;
var theRequest = new Object();
if (url.indexOf("?") != -1) {
var str = url.substr(1);
strs = str.split("&");
for (var i = 0; i < strs.length; i++) {
theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
}
}
var value = (theRequest[key] == null || theRequest[key] == undefined) ? null : theRequest[key];
return value;
}
getQueryVariable方法用来获取url参数值,即获取layui表格所需编辑内容的id
edit.js编辑页面js代码如下:
var user_id = getQueryVariable("id");
Ajax($, layer, "Get", "http://192.168.0.239:5000/users/GetUserById?user_id=" + user_id, null, function (obj) {
var data = obj.data[0]; // 因为data为数组,所以需要在data后面加一个[]
//data: Array(1)
//0: {UserId: "02", Name: "LZF", Password: "lzf123", Phone: "4673892", Email: "lzf123@qq.com", …}
// length: 1
console.log(data);
form.val("Form", {
"userid": data.UserId,
"username": data.Name,
"password": data.Password,
"phone": data.Phone,
"email": data.Email,
"usertype": data.UserTypeId
})
})
注意: 此处 “http://192.168.0.239:5000/users/GetUserById?user_id=” + user_id 中 ? 后面的值需要和被赋值的值相同 此处则是需要和 user_id 相同
更多推荐
已为社区贡献1条内容
所有评论(0)