1

专家

我的要求是保留/存储用户正在针对该字段编辑的值，并且编辑的值应该在用户下次打开该特定字段的同一页面时保留。

目前我的页面显示注册用户总数与字段总注册。最初，totalcount 数据从数据库中获取，针对字段 Total Registration Im 显示以下图像以显示最初的数据 在此处输入图像描述 现在当用户想要编辑 Registration 的总数时，用户可以单击铅笔图像并可以编辑总注册 No . 现在单击软盘图像时，编辑的计数应该保存在本地的数据结构中，下次用户再次访问该页面时， 在此处输入图像描述 用户应该会看到最后编辑/更新的值。我的代码库如下 1> 显示总注册值的 DIV 是 

<div class="row-fluid">
        <div class ="span2">

        <label><spring:message code="registration.total"></spring:message>:&nbsp; </label>
        </div>
        <div class = "span3">
        <div class="input-mini">    
            <div class="textVal ">
             <div class = "span3">${regStatusForm.total} </div> 
             </div>
            <div id="pencil" class="span3">
            <img src="/static/img/pencil.png" alt="Edit" >
             </div>
            <div id="save" class="span3">
            <img src="/static/img/save.png" alt="Save" >
            </div>
            <div id="close" class="span3">
            <img src="/static/img/close.png" alt="Close" >
            </div>
        </div>  
        </div>

2> 使其可编辑的 JQuery 代码是 

  var textValue = "";
    $('#pencil').on('click', function(){
        textValue =  $('.textVal').text();
        $('.textVal').html("<input type='textbox' id='textVal' value='" + textValue + "' />");
        $(this).hide();
        $('#save, #close').show();
    });

$('#save').on('click', function(){
    $('.textVal').text($('#textVal').val());
    $(this).hide();
    $('#close').hide();
    $('#pencil').show();
});

$('#close').on('click', function(){
    $('.textVal').text(textValue);
    $(this).hide();
    $('#save').hide();
    $('#pencil').show();
});

3> CSS 代码是 

<style type="text/css">
.textbox {
    height:24px;
    width:90px;
    line-height:22px;
    padding:3px

}
#textVal {
    width:35px;
    margin-right:5px
}
.icons {
    float:left;
    width:20px;
    height:20px;
}
#save, #close {
    display:none;
    width:20px;
    height:20px;
    float:left
}
.textVal {
    float:left;
    width:35px;
    height:20px;
    margin-right:5px
}
#pencil {
    display:block
}
</style>

请提出一个合适的方法来实现这一点。

4

1 回答 1

1

你基本上有两个选择。提交表单后将其存储在服务器中，或者在用户输入一些文本并离开该字段后将其存储在客户端上。

在第一种情况下，您可以创建一个存储输入 id 和值的表，并在渲染它们后填充字段。我可以想象，使用修改响应的 servletfilter 很有可能做到这一点。

第二个可以更简单地使用 jquery 和 localstorage 实现。只有当数据只能存在于一个浏览器中并且使用另一台机器时，您才能做到这一点，您将从头开始。我说得更容易，因为在页面加载时，您在所有输入上运行 jquery 并用本地存储中的值填充它们。

于 2013-07-18T14:55:32.920 回答