jquery.tmpl.js使用[通俗易懂]

全栈程序员站长

发布于 2022-09-08 21:03:49

6540

发布于 2022-09-08 21:03:49

文章被收录于专栏：全栈程序员必看全栈程序员必看

大家好，又见面了，我是你们的朋友全栈君。

juqery的temp插件使用

jquery.tmpl.js使用

juery因丰富的插件曾被广泛使用，这里介绍一下jQuery模板的使用方法，用到jquery.tmpl.js插件。

入门

<head>
    <meta charset="UTF-8">
    <title>temp-demo</title>
    <script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="./third_plugin/jquery.tmpl.min.js"></script>
</head>
<body>
    <div>
    ///3、定义一个容器
        <table border="1px" id="demo_table"></table>
    </div>
    <script type="text/javascript">
        //4、定义一个模板
       var temp = '<tr>' +
                       '<td >${ID}</td>' +
                       '<td >${Name}</td>' +
                       '<td >${Num}</td>' +
                       '<td >${Status}</td>' +
                       '<td >${description}</td>' +
                   '</tr>';
        //5、注册模板
       $.template("temp",temp);
       //6、数据源
       var users = [{ID: 'chuizi', Name: 'Joseph Chan', Num: '1', Status: 1 , description:"这是一个测试代码"}, {
                        ID: 'aCloud',Name: 'Mary ai云', Num: '3', Status: 1 , description:"这是一个测试代码"}, {
                        ID: 'apple',Name: 'Mary 蘋果', Num: '2', Status: 1 , description:"这是一个测试代码"}, {
                        ID: 'mi',Name: 'Mary 小米', Num: '6', Status: 1 , description:"这是一个测试代码"}, {
                        ID: 'huawei',Name: 'Mary 荣耀', Num: '8', Status: 1 , description:"这是一个测试代码"}, ];
        ///7、结果渲染
        $("#demo_table").html($.tmpl("temp",users))
    </script>
</body>

步骤

1.创建一个HTML文件； 2. 引入 jquery-1.7.1.min.js 和 jquery.tmpl.min.js ； 3. 定义一个table容器用于封装模板结果（也可以用其他的容器，我这里复用项目中的代码）； 4. 定义一个模板，我这里赋值给了一个变量，其实也可以放在script标签中，通过id调用； 5. 注册模板，用 $.template() 方法注册； 6.构造一个json格式的数据源； 7. 将数据渲染到目标容器中；