1

使用实例代码

1.jsp代码

<!DOCTYPE html>

<html lang="zh-CN">

<head>

<title>地区管理</title>

<!-- 表格树控件 -->

<link href="${ctxStatic}/treeTable/themes/vsStyle/treeTable.min.css" rel="stylesheet" type="text/css" />

<script src="${ctxStatic}/treeTable/jquery.treeTable.min.js" type="text/javascript"></script>

<!-- Mustache -->

<script src="${ctxStatic}/common/mustache.min.js" type="text/javascript"></script>

<!-- 业务js -->

<script src="${ctx}/views/admin/logistics/logisticsAreaList.js" type="text/javascript"></script>

</head>

<body>

    <table id="treeTable" class="table table-striped table-bordered table-condensed">

        <thead><tr><th>区域名称</th><th>区域编码</th><th>区域类型</th><th>备注</th><shiro:hasPermission name="sys:area:edit"><th>操作</th></shiro:hasPermission></tr></thead>

        <tbody id="treeTableList"></tbody>

    </table>

    <script type="text/template" id="treeTableTpl">

        <tr id="{{row.id}}" pId="{{pid}}">

            <td><a href="${ctxa}/sys/area/form.do?id={{row.id}}">{{row.name}}</a></td>

            <td>{{row.code}}</td>

            <td>{{dict.type}}</td>

            <td>{{row.remarks}}</td>

            <shiro:hasPermission name="sys:area:edit"><td>

                <a href="${ctxa}/sys/area/form.do?id={{row.id}}">修改</a>

                <a href="${ctxa}/sys/area/delete.do?id={{row.id}}" οnclick="return confirmx('要删除该区域及所有子区域项吗？', this.href)">删除</a>

                <a href="${ctxa}/sys/area/form.do?parent.id={{row.id}}">添加下级区域</a>

            </td></shiro:hasPermission>

        </tr>

    </script>

</body>

</html>

2.logisticsAreaList.js

$(document).ready(function() {

        var tpl = $("#treeTableTpl").html().replace(/(\/\/\<!\-\-)|(\/\/\-\->)/g,"");

        var data = ${fns:toJson(list)}, rootId = "";

        addRow("#treeTableList", tpl, data, rootId, true);

        $("#treeTable").treeTable({expandLevel : });

    });

    function addRow(list, tpl, data, pid, root){

        for (var i=; i<data.length; i++){

            var row = data[i];

            if ((${fns:jsGetVal('row.parentId')}) == pid){

                $(list).append(Mustache.render(tpl, {

                    dict: {

                        type: getDictLabel(${fns:toJson(fns:getDictList('sys_area_type'))}, row.type)

                    }, pid: (root?:pid), row: row

                }));

                addRow(list, tpl, data, row.id);

            }

        }

    }

————————————————

版权声明：本文为CSDN博主「cl11992」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/cl11992/article/details/77052471

最近接触使用了 Mustache 模板引擎，发现非常好用，故稍微记录一下我。
mustache的github地址：mustache

mustache用法很简单，大概就以下三步：

1. 拿到渲染模板

var template = $('#tmpl').html();
  • 1
  • 2
2. 将数据渲染到模板上

Mustache.render(template, data);
  • 1
  • 2
3. 将渲染后的模板放到想放的dom中

$dom.html(template)
  • 1
  • 2

很好理解，就是mustache通过内部方法解析html字符串模板，然后将数据渲染上去形成新的html字符串，最后你就可以把它放入页面dom中。

这里记录一些基本语法：

  1. 基本

data:

{

    "name": "Chris",

    "company": "<b>GitHub</b>"

}
  • 1
  • 2
  • 3
  • 4

template

*  {{name}}     {{可以理解为这里面放的是键名}}

*  {{age}}

*  {{company}}

*  {{{company}}}  默认情况下，所有变量都是HTML转义的。如果要渲染未转义的HTML，使用三重括号：{{{}}}

*  {{&company}}   可以使用 ＆ 来取消转义。

*  {{=<% %>=}}  不解析输出

   {{company}}

   <%={{ }}=%>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

output

* Chris

*         （因为不存在 age, 所以这里啥也没有）

* &lt;b&gt;GitHub&lt;/b&gt;

* <b>GitHub</b>

* <b>GitHub</b>

* {{company}}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  1. if 遍历语法
{{ #weather }}

    {{ city }}

{{ /weather }}
  • 1
  • 2
  • 3

这可以看做代替了 if 语法，可以用来遍历数据 （ 相当于 if ( weather ) {…} ）
条件是：weather 存在 且不为 null, undefined, false, 0, ‘’, []

data:

var data = {

    weather: [

        {

            city: '四川',

            sky: '多云'

        },

        {

            city: '河南',

           sky: '晴'

        }

}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

template:

<div>

    查看城市天气:

    {{#weather}}

        {{city}}:{{sky}}<br/>

    {{/weather}}

</div>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

output:

查看城市天气：

        四川：所云

        河南：晴
  • 1
  • 2
  • 3
  1. 与上一个相反，weather为 false, null, undefined, [], 0 显示
{{ ^weather }}

    显示无数据

{{ /weather }}
  • 1
  • 2
  • 3
  1. 遍历 字符串数组
{{ #cities }}

    {{ . }}

{{ /cities }}
  • 1
  • 2
  • 3

data:

var data = {

    cities: ['北京','南京','上海','广东','深圳','西安']

}
  • 1
  • 2
  • 3

template:

<div>

    查看其他城市:

    {{#cities}}

        <a href="javascript:;"> {{.}} </a>

    {{/cities}}

</div>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

output:

 查看其他城市: 北京 南京 上海 广东 深圳 西安
  • 1
  1. 使用函数
    data:
{

     weather: {

         city: '四川',

         weather: '<b>多云</b>',

         min_tempe: 20,

         max_tempe: 30

     }

     tempe: function() {

         return this.min_tempe + '~' + this.max_tempe;

     }

}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

template:

{{#weather}}

    {{tempe}}

{{/weather}}
  • 1
  • 2
  • 3

output:

20 ~ 30
  • 1

网上解释：这里的 function 将在每次迭代时在列表中的当前项的上下文中调用。
我理解的就是 function每次的上下文都要在 渲染时才决定，因此 this 的指向要看具体的执行环境。
这里 temp函数是在 weather中执行的，所以function中的this指向的是 weather

  1. 比较复杂的函数
    网上的例子：
If the value of a section key is a function, it is called with

the section’s literal block of text, un-rendered, as its first argument.

The second argument is a special rendering function that uses the current

view as its view argument. It is called in the context of the current view

object.
  • 1
  • 2
  • 3
  • 4
  • 5

data:

{

  "name": "Tater",

  "bold": function () {

    return function (text, render) {

      return "<b>" + render(text) + "</b>";

    }

  }

}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

template:

{{#bold}}Hi {{name}}.{{/bold}}
  • 1

output:

<b>Hi Tater.</b>
  • 1

没看太懂，应该是在函数中定义render渲染视图方法，至今也没用到过。

还有其他的用法等用到了再记录吧。

JS模板引擎-Mustache模板引擎使用实例1-表格树的更多相关文章

  1. js模板引擎mustache介绍及实例

    在Javascript中 mustache.js是实现mustache模板系统. Mustache是一种没有逻辑的模板语法.它可以应用于HTML.配置文件.源代码等任何地方. 它通过使用散列或对象中提 ...

  2. Javascript模板引擎mustache.js详解

    mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后只有9KB,非常值得在项目中使用.本文总结它的使用方法和一些使用心得,内容不算很高深 ...

  3. Js模板引擎mustache

    mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后只有9KB,非常值得在项目中使用.本文总结它的使用方法和一些使用心得,内容不算很高深 ...

  4. 模板引擎mustache.js

    Javascript模板引擎mustache.js详解   阅读目录 1. 从一个简单真实的需求讲起 2. mustache的用法 3. mustache的思想 4. {{prop}}标签 5. {{ ...

  5. 探究Javascript模板引擎mustache.js使用方法

    这篇文章主要为大家介绍了Javascript模板引擎mustache.js使用方法,mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后 ...

  6. javascript模板引擎Mustache

    Mustache(英文本意:触须,胡须)是基于JavaScript实现的模版引擎,类似于JQuery Template,但是这个模版更加的轻量级,语法更加的简单易用,很容易上手. 下载:https:/ ...

  7. Web模板引擎—Mustache

    Web模板引擎——Mustache 2012年9月12日 BY BELL·12 COMMENTS Web 模板引擎是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,通常是标准的 ...

  8. Mustache模板引擎

    Mustache是一个Logic-Less模板引擎,即:零逻辑引擎,原因在于它只有标签,没有流程控制语句,这是它与其它模板引擎不同的地方. Mustache小巧玲珑,几乎用各种语言都实现了一遍. Mu ...

  9. Node.js学习(14)----EJS模板引擎

    这个入门教程将从以下几个方面来讲解: 1. 引入EJS 2. 创建一个模板 3. 使用视图工具组件 4. 使用错误处理组件 5. 什么情况下应使用EJS 引入EJS 在我们正式开始前,我们先来做点准备 ...

随机推荐

  1. linux设置服务器时间

    在 Linux 机器上有两种时钟: 由内核维持的软件时钟(又称系统时钟)和在机器关机后记录时间的(电池供电的)硬件时钟. 启动的时候, 内核会把系统时钟与硬件时钟同步. 之后, 两个时钟各自独立运行. ...

  2. 最新咕咆+鲁班+图灵+享学+蚂蚁+硅谷+源码 Java架构师资料《Java架构师VIP课程》

    最新的Java架构师完整资料,完整视频+源码+文档. 每一套都是一百多个G的资料,无密. JAVA架构师全套课程 咕泡学院互联网架构师第一期 咕泡学院互联网架构师第二期 咕泡学院互联网架构师第三期 博 ...

  3. 多字节与Unicode

    编码知识 一.Unicode与多字节(ANSI ) (1)Windows中,Unicode也称为宽字节,多字节也称为窄字节; VS中默认使用Unicode编码,在项目属性>>配置属性> ...

  4. js函数的使用+封装+代码复用

    javascript 函数 return 后面没有返回值 代表提早退出语句,return后面的语句都不再执行 此时返回值为undefined <!DOCTYPE html> <htm ...

  5. position定位及实际应用

    position: static;  静态定位 / 常规定位 / 自然定位 忽略top/right/bottom/left/z-index的影响,使元素回到自然流中 <!DOCTYPE html ...

  6. PHP0004：PHP基础3

    php写在 标签里

  7. fqa0

    FQA 0 - Plan 9 简介 0.1 - 什么是 Plan 9 Plan 9 是一个研究操作系统,来自于在 Bell 实验室计算机科学研究中心(CSRC)同样创造了 UNIX 的团队.它出现在2 ...

  8. 通过编写Java代码让Jvm崩溃

    在书上看到一个作者提出一个问题"怎样通过编写Java代码让Jvm崩溃",我看了之后也不懂.带着问题查了一下,百度知道里面有这样一个答案: 1 package jvm; 2 3 pu ...

  9. 初识linux&常用命令&目录文件的浏览和管理

    Linux系统的主要用途:主要用于服器务器,特别是网络服务 Linux命令格式 命令   [选项]  [ 参数] 命令:告诉操作系统做什么,执行什么 选项:说明命令的运行方式(可以改变命令的功能).选 ...

  10. git项目分支管理

    分支管理 创建项目时,会针对不同环境创建两个常设分支(也可以算主分支,永久不会删除): master :生产环境的稳定分支,生产环境基于该分支构建.仅用来发布新版本,除了从 release 测试分支或 ...