layui 表格内容写temple函数_layuiadmin（官方）知识点

动态模板

layuiAdmin 的视图是一个“动静结合”的载体，除了常规的静态模板，你当然还可以在视图中存放动态模板，因此它可谓是焦点中的焦点。

定义模板

在视图文件中，通过下述规则定义模板：

下面是一个简单的例子：

当前 layuiAdmin 的版本是：{{ layui.admin.v }}

路由地址：{{ layui.router().href }}

在不对动态模板设定数据接口地址的情况下，它能读取到全局对象。但更多时候，一个动态模板应该是对应一个接口地址，如下所示

我叫：{{ d.data.username }}

{{# if(d.data.sex === '男'){ }}

公的

{{# } else { }}

母的

{{# } }}

模板中的 d 对应的是你接口返回的 json 转化后的一维对象，如：

{

"code": 0

,"data": {

"username": "贤心"

,"sex": "男"

}

}

那么，上述动态模板最终输出的结果就是：

我叫：贤心

公的

模板基础属性

lay-url

用于绑定模板的数据接口地址，支持动态模板解析，如：

lay-type

用于设定模板的接口请求类型(默认：get)，如：

lay-data

用于定义接口请求的参数，其值是一个 JavaScript object 对象，同样支持动态模板解析，如：

lay-headers

用户定义接口请求的 Request Headers 参数，用法与 lay-data 的完全类似，支持动态模板解析。

lay-done

接口请求完毕并完成视图渲染的回调脚本，里面支持写任意的 JavaScript 语句。事实上它是一个封闭的函数作用域，通过给 Function 实例返回的函数传递一个参数 d，用于得到接口返回的数据：

很多时候，你在动态模板中可能会放入一些类似于 layui 的 form 元素，而有些控件需要执行 form.render() 才会显示，这时，你可以对 lay-done 赋值一个全局函数，如：

layui.data.done = function(d){

layui.use(['form'], function(){

var form = layui.form;

form.render(null, 'LAY-filter-demo-form'); //渲染该模板下的动态表单

});

};

如果模板渲染完毕需要处理过多的交互，我们强烈推荐你采用上述的方式定义一个全局函数赋值给 lay-done，会极大地减少维护成本。

无需担心该全局函数的冲突问题，该函数是一次性的。其它页面即便声明了一个同样的函数，也只是用于新的视图，丝毫不会对之前的视图造成任何影响。

layui.data.done 中的 done 可以随意命名，但需与 lay-done 的赋值对应上。

view 模块

view(id)

获取指定容器，并返回一些视图渲染的方法，如：

//渲染视图，viewPath 即为视图路径

view('id').render(viewPath).then(function(){

//视图文件请求完毕，视图内容渲染前的回调

}).done(function(){

//视图文件请求完毕和内容渲染完毕的回调

});

//直接向容器插入 html，tpl 为 模板字符；data 是传入的数据。该方法会自动完成动态模板解析

view('id').send(tpl, data);

另外，render 方法支持动态传参，以用于视图内容接受。如：

admin.popup({

id: 'LAY-popup-test1'

,success: function(){

view(this.id).render('视图文件所在路径', {

id: 123 //这里的 id 值你可以在一些事件中动态获取(如 table 模块的编辑)

});

}

});

那么，在视图文件中，你可以在动态模板中通过 {{ d.params.xxx }} 得到传入的参数，如：

配置了接口的动态模板，且接口动态获取了 render 传入的参数：{{ d.params.id }}

也可以直接获取：

而如果是在 JS 语句中去获取模板传递过来的变量，可以借助动态模板的 lay-done 属性去实现，如：

然后在 JS 语句中通过执行动态模板 lay-done 中对应的方法得到对应的参数值：

//定义一个 lay-done 对应的全局方法，以供动态模板执行

layui.data.sendParams = function(params){

console.log(params.id) //得到传递过来的 id 参数(或其他参数)值

//通过得到的参数值，做一些你想做的事

//…

//若需用到 layui 组件，layui.use 需写在该全局方法里面，如：

layui.use(['table'], function(){

var table = layui.table;

table.render({

elem: ''

,url: 'url?id='+ params.id

});

});

};

视图中加载 JS 模块

在视图文件中，除了写 HTML，也可以写 JavaScript 代码。如：

Hello layuiAdmin

layui.use('admin', function(){

var $ = layui.jquery;

admin.popup({

content: $('#LAY-demo-hello').html()

});

});

如果该视图对应的 JS 代码量太大，我们更推荐你在 controller 目录下新增一个业务模块，并在视图中直接 layui.use 去加载该模块。下面以控制台主页 index.html 为例：

html区域

//加载 controller 目录下的对应模块

/*

小贴士：

这里 console 模块对应 的 console.js 并不会重复加载，

然而该页面的视图可能会重新插入到容器，那如何保证脚本能重新控制视图呢？有两种方式：

1): 借助 layui.factory 方法获取 console 模块的工厂(回调函数)给 layui.use

2): 直接在 layui.use 方法的回调中书写业务代码，即:

layui.use('console', function(){

//同 console.js 中的 layui.define 回调中的代码

});

这里我们采用的是方式1。其它很多视图中采用的其实都是方式2，因为更简单些，也减少了一个请求数。

*/

layui.use('console', layui.factory('console'));

当视图被渲染后，layui.factory 返回的函数也会被执行，从而保证在不重复加载 JS 模块文件的前提下，保证脚本能重复执行。