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. MYSQL使用group by,如何查询出总记录数

    比如有这样一条SQL,根据t.user_id,t.report_date两个字段统计 这样前端页面能展示数据,但往往需要一个总记录数,在有分页的情况下用到 一种解决方法是在外面套一层,然后对其coun ...

  2. Appium超详细环境搭建for Mac

      兜兜转转试用了一圈自动化框架后,回归到appium,与一年之前相比,appium有了很大的改变:1.iOS 9 之前一直以 instruments 下的 UIAutomation为驱动底层技术(弊 ...

  3. datagridview 如何显示记载中

    要实现如下效果,有何思路?

  4. React HOC（高阶组件）

    一.定义 高阶函数:函数接受函数作为输入,或者输出一个函数. 高阶组件:接受React组件作为输入,或是输出一个组件.即hocFactory:: W: React.Component => E: ...

  5. Anaconda切换工作目录盘符

    先回到C盘符的根目录再切换到其他盘符

  6. EF Core For Oracle11中Find FirstOrDefault等方法执行失败

    问题描述 最近在使用ef core连接oracle的发现Find.FirstOrDefault.Skip Task分页等等方法执行失败.使用的是docker安装的oracle11,错误如下图: 解决办 ...

  7. C#常见基础算法

    namespace 面试常见算法 { class Program { static void Main(string[] args) { ); Console.WriteLine(n1); Test2 ...

  8. AT1219 歴史の研究[回滚莫队学习笔记]

    回滚莫队例题. 这题的意思大概是 设 \(cnt_i\) 为 l ~ r 这个区间 \(i\) 出现的次数 求\(m\) 次询问 求 l~r 的 max {\(a_i\) * \(cnt_i\)} \ ...

  9. dsu on tree[树上启发式合并学习笔记]

    dsu on tree 本质上是一个 启发式合并 复杂度 \(O(n\log n)\) 不支持修改 只能支持子树统计 不能支持链上统计- 先跑一遍树剖的dfs1 搞出来轻重儿子- 求每个节点的子树上有 ...

  10. Mybatis Dao接口与Xml文件不匹配的问题：Invalid bound statement (not found)

    <!-- 如果不添加此节点mybatis的mapper.xml文件都会被漏掉. --> <resources> <resource> <directory&g ...