转自开源中国社区:http://www.oschina.net/code/snippet_94055_21640
经常做jsp开发的朋友可能遇到一个情况，显示列表数据不是table，而是div或者其他很多标签做的一种更漂亮的样式列表。如果采用ajax更新列表数据，可能有些朋友采用“html代码拼接”的方式，比如："<a>"+json.name+"</a>"这样的方法。
下面我提供一个思路，可以不需要拼接html代码，并且适用任何复杂的列表。
代码说明：
1. 适用于ajax获取数据然后需要通过拼接html代码的方式实现数据列表展现的需求/功能
2. html模板最好有一个父元素, 因为最后clone的模板都是插入在父元素内部后面
3. 代码中最关键的部分当然是js的实现. 理解js部分主要是clone、each、append、replace这几个方法的理解和应用
// 希望对大家有用
[1].[代码] html代码示例 跳至 [1] [2]
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<
div
class
=
"modal-body"
style
=
"height: 300px; overflow: auto"
>
<
ul
class
=
"thumbnails"
>
<!--
注意id='template'
这里定义一个数据模板. id为template
然后里面需要显示值的地方用#key#的形式占位, 可以出现多次. key与json返回的对象的name保持一致.
刚开始编写模板的时候, 可以不设置 display: none; 方便查看模板样式.
测试的时候, 设置目标 display: none;
-->
<
li
class
=
"span1"
id
=
'template'
style
=
'display: none;'
>
<
a
href
=
"javascript:;"
class
=
"thumbnail"
>
<
label
for
=
"#id#"
>
<
img
src
=
"${pageContext.request.contextPath }/resource/image/#logo#"
alt
=
""
>
</
label
>
</
a
>
<
p
style
=
"text-align: center"
><
input
id
=
"#id#"
type
=
"checkbox"
value
=
"#id#"
style
=
"opacity: 1;"
>#name#</
p
>
</
li
>
<!--
数据为空的时候显示的提醒信息. 不是必须.
需要的朋友主要是了解下javascript部分关键代码实现思路就可以了,
了解后随便怎么写都OK...
-->
<
li
class
=
"span1"
id
=
'template_nodata'
style
=
'display: none;'
>
吖! 人呢? (没有可供选择的用户)
</
li
>
</
ul
>
</
div
>
|
[2].[代码] js实现模板复制和数据填充 跳至 [1] [2]
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
function
demo() {
$.post(
'${pageContext.request.contextPath}/demo/getData.htm'
,
function
(data) {
if
(data.list.length > 0) {
var
hasHandler =
typeof
(valHandler) ==
'function'
;
// 是否有定义val额外处理的函数
var
template = $(
'#template'
);
// 循环json格式对象
$.each(data.list,
function
(i, obj) {
// 克隆当前数据模板, 清除id, 设置显示
// jQuery也有removeAttr()方法可以清除id, 看个人习惯
// 之所以清除id, 是为了保持id的唯一性, 并且模板id不能重复
// clone(true)是把事件一起clone
var
temp = template.clone(
true
).attr(
'id'
,
''
).show();
var
html = temp.html(), regx;
// 取模板里的html字符串; 定义正则变量
// obj为json中的对象; key对应json对象的属性, val就是json的val值
$.each(obj,
function
(key, val) {
if
(hasHandler) {
// 对'指定属性'的value进行特殊处理, 如value为空需指定默认值
val = valHandler(key, val);
}
// 动态创建正则
// 例如：#name#/g 替换所有 #name#
regx =
new
RegExp(
'#'
+key+
'#'
,
'g'
);
html = html.replace(regx, val ||
''
);
// 将占位符替换成实际值, 如果 val为null, 将原有的#name#占位符替换成''
});
// temp.html(html)是把html字符有替换回去
// 然后追加到目标的父容器的后面
template.parent().append(temp.html(html));
});
// $.each
}
else
{
$(
'#template_nodata'
).show();
}
});
// ajax获取数据
}
// valHandler必须定义,
// 如果不定义, 上述代码var hasHandler = typeof(valHandler) == 'function';部分会报错为定义对象
// 该函数的意义是针对需要二次处理的字段进行处理
function
valHandler(key, val) {
if
(key ==
'logo'
&& !val) {
// 如果logo为空, 路径改成默认logo路径
val =
'defaultLogo.png'
;
}
return
val;
}
|