layui的数据表格+springmvc实现修改数据功能

柔情只为你懂 2022-05-22 01:21 258阅读 0赞

### layui的数据表格+springmvc实现修改数据功能包括单元格修改和form表单修改： ###

可以看看：

[layui的数据表格+springmvc实现数据显示，分页功能 ][layui_springmvc_]

### [layui的数据表格+springmvc实现搜索功能][layui_springmvc] ###

### [layui的数据表格+springmvc实现增加数据功能][layui_springmvc 1] ###

### 1.单元格修改：通过ajax传数据 ###

js:

if(obj.event === 'edit'){
        layer.prompt({
            formType: 2
            ,value: data.word
        }, function(value, index){
            EidtUv(data,value,index,obj);
    
    
        });
    }

## ##

js全貌：

## ##

springmvc控制层：ajax返回数据到前端页面：

/**
     * 修改敏感词
     * @param sensitive
     * @return
     */
    @RequestMapping("/modiSens")
    @ResponseBody
    public int modiSens(Sensitive sensitive){
        System.out.println("修改敏感词：");
        System.out.println("ss:"+sensitive.toString());
        int result=sensitiveService.updateSensitive(sensitive);
        return result;
    }

![70][]

### 2.form表单修改：通过form表单的action传递数据，然后重定向回到页面 ###

js:

if(obj.event === 'edit'){
            //这里一般是发送修改的Ajax请求
            EidtUv(data,obj);
    }

function  EidtUv(data,obj) {
        $("#id").val(data.id);
        $("#account").val(data.account);
        $("#password").val(data.password);
        $("#name").val(data.name);
        $("#phone").val(data.phone);
        $("#power").val(""+data.power);
        $("#status").find("option[value = '"+data.status+"']").attr("selected","selected");
    
            layer.open({
            title:'修改管理员',
            type:1,
            area:['400px','400px'],
            content:$("#form1")
        });
    }

jsp页面form表单：

<%--修改的弹框--%>
    <form class="layui-form layui-form-pane1" id="form1" name="form1" style="display: none;" action="<%=request.getContextPath()%>/admin/modiAdmin" method="post" lay-filter="first1">
    
        <div class="layui-form-item" style="display: none">
            <label class="layui-form-label">id</label>
            <div class="layui-input-inline">
                <input type="text" name="id" id="id" lay-verify="required|title" required placeholder="请输入账号" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">账号</label>
            <div class="layui-input-inline">
                <input type="text" name="account" id="account" lay-verify="required|title" required placeholder="请输入账号" readonly="readonly" autocomplete="off" class="layui-input">
            </div>
        </div>
    
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-inline">
                <input type="password" name="password" id="password" lay-verify="required|pass" placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-inline">
                <input type="text" name="name" id="name" lay-verify="required|" required placeholder="请输入用户名" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">手机</label>
            <div class="layui-input-inline">
                <input type="tel" name="phone" id="phone" lay-verify="required|number" placeholder="请输入使用者手机号码" lay-verType="tips" autocomplete="off" class="layui-input">
            </div>
        </div>
    
        <div class="layui-form-item">
            <label class="layui-form-label">权限</label>
            <div class="layui-input-inline">
                <select name="power"  id="power" lay-verify="required|" lay-filter="interest-search" lay-search>
                    <option value=""></option>
                    <option value="一般管理员">一般管理员</option>
                    <option value="超级管理员" >超级管理员</option>
    
                </select>
            </div>
        </div>
    
        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-inline">
                <select name="status" id="status" lay-verify="required|" lay-filter="interest-search" lay-search>
                    <option value=""></option>
                    <option value="启用">启用</option>
                    <option value="停用" >停用</option>
    
    
                </select>
            </div>
        </div>
    
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="*">修改</button>
            </div>
        </div>
    </form>

js全貌：

![70 1][]

springmvc控制层：重定向回到页面

/**
     * 修改管理员信息
     * @param admins
     * @return
     */
    @RequestMapping("/modiAdmin")
    public String modiAdmin(Admins admins){
        System.out.println("修改开始");
        int index=adminsService.modiAdmin(admins);
    
        return "redirect:/admin/backAdminsjsp";
    }

/**
     * 跳转到后台管理员页面
     * @return
     */
    @RequestMapping("/backAdminsjsp")
    public  String backContentjsp(){
        return "/backpages/adminslist";
    }

### 我的座右铭：不会，我可以学；落后，我可以追赶；跌倒，我可以站起来；我一定行。 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTIyMDQ3Mg_size_16_color_FFFFFF_t_70][]

[layui_springmvc_]: https://blog.csdn.net/weixin_39220472/article/details/80376468
[layui_springmvc]: https://blog.csdn.net/weixin_39220472/article/details/80659433
[layui_springmvc 1]: https://blog.csdn.net/weixin_39220472/article/details/80663123
[70]: /images/20220522/09ba011e0ab64f248e11e62f89b23dcd.png
[70 1]: /images/20220522/86eed20dac164741b24e6c0a7318a02a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTIyMDQ3Mg_size_16_color_FFFFFF_t_70]: /images/20220522/ec769ac4bb2b4b4eb58d95f88271ffa7.png