1,重置功能
<head>
<script type="text/JavaScript">
//清空查询条件
function clearQueryCondition(){
//设置所有的input标签且typy为text的内容为空
$("input[type=text]").val("");
//设置所有的下拉框选择第一个 两个方法根据情况选择 都可以
$('select').prop('selectedIndex', 0);
}
</script>
</head>
<body>
<table>
<tr>
<td>
<input type="button" value="重置" onclick="clearQueryCondition();">
</td>
</tr>
</table>
</body>
2.后台传一个string[]的数组knowledgeBaseForm.tagsId,一个list<map<key,value>>的list集合tagNameList
<c:forEach var="tag" items="${tagNameList}">
<c:forEach var="tagList" items="${tag}">
<input type="checkbox" name="tagsId" value="<c:out value="${tagList.key}"/>"
<c:forEach var="tagsId" items="${knowledgeBaseForm.tagsId}">
<c:if test="${tagsId eq tagList.key}">checked</c:if>
</c:forEach> onclick="return false;" />
<c:out value="${tagList.value}" />
</c:forEach>
</c:forEach>
如今的显示结果是
遍历结果集,将tagsId里的值勾选出来。
因为是回显,且不允许改动,所以要将没被勾选的隐藏,方便观看。经过思路的死路(将没被选择的隐藏,失败了),终于找到了解决的办法,将tagsId里有的显示并选中。
<c:forEach var="tag" items="${tagNameList}">
<c:forEach var="tagList" items="${tag}">
<c:forEach var="tagsId" items="${knowledgeBaseForm.tagsId}">
<c:if test="${tagsId eq tagList.key}">
<input type="checkbox" name="tagsId" value="<c:out value="${tagList.key}"/>" checked onclick="return false;" />
<c:out value="${tagList.value}" />
</c:if>
</c:forEach>
</c:forEach>
</c:forEach>
这其实就是一个思路的转变。
3.对于选择时,一定要用label标签!!!
label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
4.返回功能的编写
后台:预先写好返回所执行的方法。前台:
function goback(){
var backUrl='<%=(String)request.getSession().getAttribute("backUrl")%>';
if(backUrl!=''&&backUrl!='null'){
this.window.location=backUrl;
}else{
history.go(-1);
}
}
5.前台使用ckeditor富文本编辑器,传到后台的数据为,前端为了防止攻击,将格式符号都转换成<等,使得回显时无法显示格式。解决办法form中添加一句encType="multipart/form-data"就可以了
6.块级元素(block)特性:
- 总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示;
- 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
内联元素(inline)特性:
- 和相邻的内联元素在同一行;
- 宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变,就是里面文字或图片的大小;
块级元素主要有:
- address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li
内联元素主要有:
- a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var
可变元素(根据上下文关系确定该元素是块元素还是内联元素):
- applet ,button ,del ,iframe , ins ,map ,object , script
CSS中块级、内联元素的应用:
利用CSS我们可以摆脱上面表格里HTML标签归类的限制,自由地在不同标签/元素上应用我们需要的属性。
主要用的CSS样式有以下三个:
- display:block -- 显示为块级元素
- display:inline -- 显示为内联元素
- display:inline-block -- 显示为内联块元素,表现为同行显示并可修改宽高内外边距等属性
我们常将<ul>元素加上display:inline-block样式,原本垂直的列表就可以水平显示了。
7.
对于 CSS 里的 visibility 属性,通常其值被设置成 visible 或 hidden。
visibility: hidden 相当于 display:none,能把元素隐藏起来,但两者的区别在于:
- 1、display:none 元素不再占用空间。
- 2、visibility: hidden 使元素在网页上不可见,但仍占用空间。
然而,visibility 还可能取值为 collapse 。
当设置元素 visibility: collapse 后,一般的元素的表现与 visibility: hidden 一样,也即其会占用空间。但如果该元素是与 table 相关的元素,例如 table row、table column、table column group、table column group 等,其表现却跟 display: none 一样,也即其占用的空间会释放。
在不同浏览器下,对 visibility: collapse 的处理方式不同:
- 1、visibility: collapse 的上述特性仅在 Firefox 下起作用。
- 2、在 IE 即使设置了 visibility: collapse,还是会显示元素。
- 3、在 Chrome 下,即使会将元素隐藏,但无论是否是与 table 相关的元素,visibility: collapse 与 visibility: hidden 没有什么区别,即仍会占用空间。
8.前台遍历map<list>,并一行存4项
<th align="center" nowrap width="15%">标签</th>
<td colspan="3">
<table>
<tr>
<c:forEach var="tag" items="${tagNameList}" varStatus="status">
<c:forEach var="tagList" items="${tag}" >
<c:if test="${status.count eq 1 || (status.count-1) % 4 eq 0}">
<tr >
</c:if>
<td >
<label>
<input type="checkbox" name="tagsId" value="<c:out value="${tagList.key}"/>"
<c:forEach var="tagsId" items="${knowledgeBaseForm.tagsId}">
<c:if test="${tagsId eq tagList.key}">checked</c:if>
</c:forEach> />
<c:out value="${tagList.value}"/>
</label>
</td>
<c:if test="${status.count % 4 eq 0 || status.count eq 4}">
</tr>
</c:if>
</c:forEach>
</c:forEach>
</tr>
</table>
</td>
JSTL核心标签库中c:forEach 的 varStatus属性
varStatus属性 类型:String 描述:循环的状态信息,可以取值index\count\first\last\current 不可以使用EL表达式
我们常使用<c:forEach>标签来遍历需要的数据,为了方便使用,varStatus属性可以方便我们实现一些与行数相关的功能,如:奇数行、偶数行差异;最后一行特殊处理等等。
count:当前这次迭代从 1 开始的迭代计数