为分组管理添加修改功能

最新推荐文章于 2024-05-15 13:24:16 发布

我是洋葱啊

最新推荐文章于 2024-05-15 13:24:16 发布

阅读量999

点赞数

CC 4.0 BY-SA版权

分类专栏： Javascript HTML+CSS 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/yzn77/article/details/52924403

HTML+CSS 同时被 2 个专栏收录

9 篇文章

订阅专栏

Javascript

7 篇文章

订阅专栏

本文介绍了如何使用JavaScript实现分组管理的修改功能，包括在页面上添加修改按钮，弹出模态框显示待修改信息，利用sessionStorage存储和获取数据，以及通过AJAX调用后台接口更新数据库。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、首先添加“修改”按钮。

找到该页面对应的jsp页面后，发现删除按钮不是在jsp里写的。只在jsp文件中添加表头：“修改”。找到jsp文件引用的js文件（要看它实际引用的是哪个，而不是根据名字去找，一开始改错了地方），找到了删除按钮的代码（他为什么要写在js里呢，为什么不和别的一起写在jsp文件里呢，我现在还不太明白）：

所以，只需要在每一行再添加一个单元，内容为修改按钮：

html += "<tr><td>"+(i+1)+"</td><td>"
+ d[i].name+ "</td><td>"+d[i].desc+"</td><td><a href='' role='button' class='btn btn-mini btn-primary' onclick=confirmDelete2('"+d[i].sid+"',event)>删除</a></td><td><button data-target='#myModalUpdate' class='btn btn-mini btn-primary' onclick=confirmUpdate('"+d[i].sid+"',event)>修改</button></td></tr>";

效果如下：

2、点击修改按钮，弹出一个框，里边显示要改的分组的名字，然后进行修改

所以要先写那个弹出来的框：#myModalUpdate（在别的按钮弹出框的代码基础上改就好了）

<div id="myModalUpdate" class="modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4>修改分组名称</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" >
<div class="control-group" >
<div class="controls" style="margin-bottom:10px;">
<label class="inputGroupLabel" for="dev_name">分组名称</label>
<input type="text" id="updateGroupName" name="updateGroupName" class="form-control inputGroupInput" placeholder="">

</div>
</div>
<div style="margin-left:180px">
<button class="btn" data-dismiss="modal" aria-hidden="true" style="margin-right:30px">关闭</button>
<a href="#" class="btn btn-primary" onclick="updateGroup();" >保存</a>
</div>
</form>
</div>
</div>
</div>
</div>

弹出的框框效果如下：

写完框框怎么让他弹出来呢？

3、让框框弹出来：

点击修改按钮，调用了confirmUpdate函数：

function confirmUpdate(groupId,event)
{
$('#myModalUpdate').modal('show');//弹出框
$('#updateGroupName').val(storage.getItem(groupId));
$('#updateGroupName').data("groupId",groupId);
}

改对应groupId的groupName时，用到了session Storage:

sessionStorage数据的存储仅特定于某个会话中，也就是说数据只保持到浏览器关闭，当浏览器关闭后重新打开这个页面时，之前的存储已经被清除

sessionStorage.getItem(key):获取指定key本地存储的值
sessionStorage.setItem(key,value)：将value存储到key字段
sessionStorage.removeItem(key):删除指定key本地存储的值
sessionStorage.length是sessionStorage的项目数

先用sessionStorage.setItem(key,value)将Id和name一一对应存起来。Id是key，name是value,就可以修改Id对应的name了

4、修改后，点击保存，调用了 updateGroup()：需要修改数据库中对应的分组名，并且，网页上显示的应该也是修改过得数据

---------------------------------------------------------------------------后边都看不大懂了，比猫画虎居然写对了，要抓紧学习啦---------------------------------------------------------------------------------

5、写action
//更新分组名称
@Action(value = "updateGroup", results = { @Result(name = "success", type = "json", params = {"root", "result" }) })
public String updateGroup() {

boolean flag = targetGroupService.updateGroup(groupId, groupName);
JSONArray jsonArray = JSONArray.fromObject(flag);
result = jsonArray.toString();
return SUCCESS;

}

6、在service中声明

public interface TargetGroupService extends IMongoBaseService<TargetGroup, ObjectId>{

·····

public boolean updateGroup(String groupId,String groupName);
}

7、在Impl文件里实现

@Override
public boolean updateGroup(String groupId, String groupName) {
// TODO Auto-generated method stub
try{
Query<TargetGroup> updateQuery = targetGroupDAO.createQuery().field("_id").equal(new ObjectId(groupId.toString()));
UpdateOperations<TargetGroup> ops = targetGroupDAO.createUpdateOperations();
ops.set("name",groupName.trim().toString());//把修改后的分组名传回到数据库的name
targetGroupDAO.update(updateQuery, ops);
}
catch(Exception e){
e.printStackTrace();
return false;
}
return true;
}
8、去数据库查看是否已经更改。