知识需要总结记录
记录的修改和删除等操作需要绑定id以更好地操作
使用标签保存数据,以便在需要的时候能够获取这些数据:
给标签添加属性:
- 表单组件标签优先使用 value属性,只有value不方便时,使用自定义的属性。
- 如果不是表单的组件,不推荐使用value,推荐使用自定义属性。
获取属性值时:
- 获取表单组件标签的value属性:
- dom对象.value
- jquery对象.val()
- 自定义属性,(不管是什么标签):
-
jquery对象.attr("属性名");
-
关于链接的跳转
下面这个为什么要这样写?有什么用?
href="javascript:void(0);"
给元素添加id属性的技巧(备注阶段)
<!-- 备注 -->
<div id="remarkList" style="position: relative; top: 30px; left: 40px;">
<div class="page-header">
<h4>备注</h4>
</div>
<!-- 备注1 -->
<div class="remarkDiv" style="height: 60px;margin-bottom: 5px;" th:each="remark:${session.activityRemarks}">
<img th:title="${remark.createBy}" th:src="@{/image/user-thumbnail.png}" style="width: 30px; height:30px;">
<div style="position: relative; top: -40px; left: 40px;" th:id="|div_${remark.id}|">
<h5 th:text="${remark.noteContent}">哎呦!</h5>
<!--thymeleaf的行内写法-->
<font color="gray">市场活动</font> <font color="gray">-</font> <b th:text="${session.activity.name}">发传单</b><small style="color: gray;">[[${session.activity.createTime}]] 由 [[${session.activity.createBy}]]</small>
<div style="position: relative; left: 500px; top: -30px; height: 30px; width: 100px; display: none;position: relative;">
<!--给标签绑定数据的方式,这里因为不是表单组件,所以不建议使用value属性绑定数据,我们这里使用了自定义的属性的方式,th:attr="remarkId=${remark.id}" thymeleaf的这个写法nice!-->
<!-- th:href="@{/workbench/activity/deleteRemark.do}" 下面是准备通过局部刷新实现,所以href 属性暂时不考虑使用-->
<a class="myHref" th:attr="remarkId=${remark.id}" name="edit" > <span class="glyphicon glyphicon-edit" style="font-size: 20px; color: #7a7c7a;position:absolute;left:200px;top: 30px;"></span></a>
<a class="myHref" th:attr="remarkId=${remark.id}" name="delete" ><span class="glyphicon glyphicon-remove" style="font-size: 20px; color: #7a7c7a;position:absolute;left:230px;top: 30px;"></span></a>
</div>
</div>
</div>
<div id="remarkDiv" style="background-color: #E6E6E6; width: 870px; height: 90px;">
<form role="form" style="position: relative;top: 10px; left: 10px;">
<textarea id="remark" class="form-control" style="width: 850px; resize : none;" rows="2" placeholder="添加备注..."></textarea>
<p id="cancelAndSaveBtn" style="position: relative;left: 737px; top: 10px; display: none;">
<button id="cancelBtn" type="button" class="btn btn-default">取消</button>
<button type="button" class="btn btn-primary" id="savaRemark">保存</button>
</p>
</form>
</div>
</div>
给每个备注部分的元素添加id,以便后续的操作,如何才能使id不重复且更好滴使用,技巧:使用备注的id div_remarkId,在后期删除操作时将数据成功地从数据库删除页面上的显示时我们不必做刷新整个页面(因为改动的地方只有一个,刷新整个页面的这种做法,虽然可以但是没必要!)通过jQuery的方式将元素(如何定位到该元素就会用到通过 div_"拼上备注的的id")从页面中删除。
<div style="position: relative; top: -40px; left: 40px;" th:id="|div_${remark.id}|">
下面是删除的按钮绑定该记录条数在数据库对应的id,因为删除操作时需要通过id检索到对应的数据才能进行对应的操作。
<a class="myHref" th:attr="remarkId=${remark.id}" name="delete" ><span class="glyphicon glyphicon-remove" style="font-size: 20px; color: #7a7c7a;position:absolute;left:230px;top: 30px;"></span></a>