render.js/demo.html at master · XiaodongTong/render.js · GitHub

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
50
51
52
53
54
55
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>render.js demo</title>
	<meta charset="utf-8" />
</head>
<body>
    <!--html模板-->
    <script id="template" type="text/html">
        <li>
            <span>[rowNum]</span>
            <span>[name]</span>
            <span>[age]</span>
            <span>[desc]</span>
        </li>
    </script>
    <!--需要加载数据的列表-->
    <ul id="list">
        <li id="head">
            <span>编号</span>
            <span>名称</span>
            <span>年龄</span>
            <span>描述</span>
        </li>
    </ul>
    <p>render.js依赖于jquery，使用前请先引入jquery</p>
    <!--END 需要加载数据的列表-->
    <script src="js/jquery.js"></script>
    <script src="js/render.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //需要加载的数据
            var data = [{ name: '小王', age: 15 }, { name: '小李', age: 16 }, { name: '小赵', age: 14 }];

            $('#list').render({
                template:  $('#template').html(),//模板html
                data: data, //json数据
                head: $('#head'), //列表头部的jquery dom对象 （此项可以不写）
                format:function(data){
                    data.name = data.name +'先生';
                    return data;
                },
                extend: function (data,rowNum) {  //每项数据 扩展判断 （此项可以不写）
                    var _desc = data.age > 15 ? '<span>高年级</span>' : '<span>底年级</span>',
                        _row = rowNum;

                    return [{ desc: _desc, rowNum: _row }];
                }
            });

        })
    </script>
</body>
</html>