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>
  

注意：

1. content: ‘./user-edit.html?id=’ + data.UserId 此处?后面的id需要和 getQueryVariable(" ")括号里面的值相同
2. 进行数据回返时需要通过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 相同