请问下layui表单怎么回显数据

问题遇到的现象和发生背景

请问下layui表单怎么回显数据,里面有单选框,输入框,后台用的java,页面代码如下,代码贴上去显示不全,放个截图

img


img

问题相关代码,请勿粘贴截图
运行结果及报错内容
我的解答思路和尝试过的方法
我想要达到的结果

想要的效果是,刷新页面后,表单能获取到数据库中的数据并展示,然后也可以修改并保存,刷新后就展示最新的数据

你每次刷新 都去请求后端的接口 然后反显判断?

你的代码放全一些,

你的ajax请求放出来 改一下,
单选的话 获取一下 dom 节点 变更一下 写个if判断
if(radio=='1'){
$('#radio1')attr('checked',true)
$('#radio2')attr('checked',false)
}else{
$('#radio1')attr('checked',false)
$('#radio2')attr('checked',true)
}

其他的文本框内容 res.data.xxx 获取到内容 去赋值就可以

$('#id').val('res.data.xxx')

form.val 提交也可以?

$(xxx).value 去获取节点内容也可以

最后别忘了
form.render()一下

表单这个submit 事件里面有个 data.field 就是对应的name的控件值 对象

img

1。页面初始化写一个function 通过ajax调用jave接口 ,获取返回的数据,通过对应的数据 展示在表单上,这个需要用到dom绑定了。2.点击保存,直接用formdata提交,或者ajax接口参数调用保存接口,接口调用完毕,刷新页面,调用初始化方法即可。



  //表单赋值
    form.val('example', {
      "username": "贤心" // "name": "value"
      ,"password": "123456"
      ,"interest": 1
      ,"like[write]": true //复选框选中状态
      ,"close": true //开关状态
      ,"sex": "女"
      ,"desc": "我爱 layui"
    });
  
  //表单取值
  layui.$('#LAY-component-form-getval').on('click', function(){
    var data = form.val('example');
    alert(JSON.stringify(data));
  });
  

https://www.layuiweb.com/demo/form.html

将 【实例结构体】 和 回调的【数据结构体】 保持一致。或者 将回调 数据进行二次 解析成 你的实例结构体


<script type="text/javascript">
    $(function () {
        layui.use("form", function () {
            var form = layui.form;

            form.on('submit(save)', function (data) {
                $.ajax({
                    type: "post", 
                    url: "/URL ",//改成自己的
                    data: {
                        "query": JSON.stringify(data) //这里用了json给后台传表单,data是表单数据。
                    },
                    dataType: "json",
                    success: function (data) {//后台处理后返回,data是返回数据
                        alert(data);
                    },
                    error: function (xhr) {                      
                        alert("保存失败!<br\>" + xhr.status + "<br\>" + xhr.statusText);
                    }
                });
               
            });
        });
    });
</script>
  1. 刷新页面后,表单能获取到数据库中的数据并展示
    保存完成后,请求查询详情的接口,然后通过 form.val("xxx", data); 回显数据( xxx是lay-filter的值)
  2. 然后也可以修改并保存,刷新后就展示最新的数据
    修改就是正常修改,然后保存,请求详情数据,与1一样回显数据

img

图片详细代码如下所示,能实现需求


<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../static/css/layui.css">
    <link rel="stylesheet" href="../static/css/layer.css">
    <link rel="stylesheet" href="../static/css/laydate.css">
</head>
<body>

    <!--搜索条件开始-->
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;" >
        <legend>查询条件</legend>
    </fieldset>

    <form class="layui-form" action="" method="post" id="formTest">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">学号</label>
                <div class="layui-input-inline">
                    <input type="text" name="学号" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-inline">
                    <input type="text" name="姓名" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">邮箱</label>
                <div class="layui-input-inline">
                    <input type="text" name="邮箱" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">单选框</label>
                <div class="layui-input-block">
                    <input type="radio" name="性别" value="男" title="男" checked="">
                    <input type="radio" name="性别" value="女" title="女">
                </div>
            </div>

        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">开始时间</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" name="start_time" readonly="readonly" id="start_time" placeholder="yyyy-MM-dd">
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">结束时间</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" name="endtime" readonly="readonly" id="endtime" placeholder="yyyy-MM-dd">
                </div>
            </div>
        </div>

        <div class="layui-form-item" style="text-align: center;">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn layui-btn-normal layui-btn-sm layui-icon layui-icon-search" id="doSubmit" lay-submit="" lay-filter="demo1">查询</button>
                <button type="reset" class="layui-btn layui-btn-warm layui-btn-sm layui-icon layui-icon-refresh" id="doReset">重置</button>
            </div>
        </div>

    </form>

    <!--搜索条件结束-->


    <!--数据表格开始-->
    <div type="text/html" style="display: none" id="userToolBar">
        <a type="submit" class="layui-btn layui-btn-xs" lay-filter="add" lay-event="add">添加</a>
        <a type="submit" class="layui-btn layui-btn-xs" id="batch_del" lay-filter="batch_del" lay-event="batch_del">批量删除</a>
    </div>

    <div id="userBar" style="display: none;">
        <a class="layui-btn layui-btn-xs" lay-event="edit" id="modify">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </div>

    <table class="'layui-hide" id="userTable" lay-filter="userTable"></table>
    <!--数据表格结束-->

    <!--添加和修改弹出层开始-->
        <div style="display:none;padding: 20px" id="addnewdata">
            <form class="layui-form" action="" method="post" lay-filter="dataFrm" id="dataFrm">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">学号</label>
                            <div class="layui-input-inline">
                                <input type="text" name="学号" autocomplete="off" class="layui-input">
                            </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">姓名</label>
                        <div class="layui-input-inline">
                            <input type="text" name="姓名" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">邮箱</label>
                        <div class="layui-input-inline">
                            <input type="text" name="邮箱" autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-inline">
                        <label class="layui-form-label">城市</label>
                        <div class="layui-input-inline">
                            <input type="text" name="城市" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">性别</label>
                    <div class="layui-input-block">
                        <input type="radio" name="性别" value="男" title="男" checked="">
                        <input type="radio" name="性别" value="女" title="女">
                    </div>
                </div>

                <div class="layui-form-item" style="text-align: center;">
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn layui-btn-normal layui-btn-sm layui-icon layui-icon-release" id="dosubmit1" lay-submit="" lay-filter="dosubmit1">提交</button>
                        <button type="reset" class="layui-btn layui-btn-warm layui-btn-sm layui-icon layui-icon-refresh" id="doclose" lay-submit="" lay-filter="doclose" lay-event="doclose">重置</button>
                    </div>
                </div>
            </form>
        </div>
    <!--添加和修改弹出层结束-->

    <script src="../static/css/layui.js"></script>
    <script type="text/javascript">
        layui.use(["jquery",'form','element','layer','table','laydate'],function() {
            let $ = layui.jquery;
            let form = layui.form;
            let element = layui.element;
            let layer = layui.layer;
            let table = layui.table;
            let laydate = layui.laydate;

            laydate.render({
                elem: '#start_time',
                type: 'datetime',
                calendar: 'True'
            });

            laydate.render({
                elem: '#endtime',
                type: 'datetime',
                calendar: 'True'
            });

            //渲染数据表格
            var tableIns = table.render({
                elem: '#userTable', //渲染的目标对象
                data: [],
                initSort: {
                    field: '学号',
                    type: 'asc'
                },
                title: '用户数据登录表',//数据导出的标题
                page: true,//是否启动分页
                toolbar: "#userToolBar",//表格的工具条
                defaultToolbar: ['filter', 'exports', 'print'],
                hight: "full-300",
                down: function (res, curr, count) {
                    alert(res);//后台url返回的json串
                    alert(curr);//当前页
                    alert(count);//数据总条数
                },
                //totalRow:true,//开启合并行
                limit: 30,//设置每页显示的条数,默认为10
                //limits:[20,40,60,80],
                loading: true,
                //text: {
                //    none: "未查询到数据"  //默认无数据
                //},
                cols: [
                    [{title: '数据表格增删改查', align:'center', colspan: 15}],
                    [ //列表数据
                    {type: 'checkbox', fixed: 'left'},
                    {field: '学号', title: '学号', sort: true}, //field设定字段名,title设定标题名称,sort排页面已有数据
                    {field: '姓名', title: '姓名', edit: true, align: 'center'},//edit可编辑
                    {field: '邮箱', title: '邮箱', align: 'center', edit: 'text', width: 300},
                    {field: '性别', title: '性别', align: 'center', edit: 'text', sort: true},
                    {field: '城市', title: '城市', align: 'center'},
                    {fixed: 'right', title: '操作', align: 'center', toolbar: "#userBar"}
                ]]

            });

        })

    </script>
</body>