LayUi数据表格自定义赋值方式


Posted in Javascript onOctober 26, 2019

官方写的非常抽象,反正我是没看懂,可能还没到能看懂前端的级别

自己也是百度的

一开始想去实现一个

用的是

定义表头参数:

{field: 'status', title: '状态', width: 150, templet:'#manager_status',align:'center'}

然后js部分:

<script type="text/html" id="manager_status">
  {{# if(d.status ==1 ){ }}
  <span class="layui-btn layui-btn-xs" style="background: green">启用</span>
  {{# } else { }}
  <span class="layui-btn layui-btn-xs" style="background: red">禁用</span>
  {{# } }}
</script>

但是我发现这个并不友好,比如说我php给他传值,我想用<?=$v['status']?>,你会发现你传到前端的数据都在layui给你定义好的参数data里面,这时候你的data又是死的所以只能通过前端来做变化

LayUi数据表格自定义赋值方式

,{field: 'services', title: '开通服务', width:150, sort: true,align:'center',
  templet:function(d)
  {
    if (d.managerServices.length != 0) {
      services = '';
      // 1:文章,2:问答,3:音频,4:视频'
      $.each(d.managerServices, function (k, v) {
        if (v.service_type == 1){
          services += '文章';
        }
        if (v.service_type == 2){
          services += '/问答';
        }
        if (v.service_type == 3){
          services += '/音频';
        }
        if (v.service_type == 4){
          services += '/视频';
        }
      });
      return services;
    } else {
      return '未开通任何服务';
    }
  }}

以上这篇LayUi数据表格自定义赋值方式就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript版DateAdd和DateDiff函数代码
Mar 01 Javascript
js实现上传图片预览的方法
Feb 09 Javascript
jquery 表单验证之通过 class验证表单不为空
Nov 02 Javascript
JS鼠标拖拽实例分析
Nov 23 Javascript
基于javascript实现图片懒加载
Jan 05 Javascript
Bootstrap模块dropdown实现下拉框响应
May 22 Javascript
JavaScript判断浏览器及其版本信息
Jan 20 Javascript
vue.js树形组件之删除双击增加分支实例代码
Feb 28 Javascript
JS身份证信息验证正则表达式
Jun 12 Javascript
随机生成10个不重复的0-100的数字(实例讲解)
Aug 16 Javascript
Windows下Node.js安装及环境配置方法
Sep 18 Javascript
layui 数据表格+分页+搜索+checkbox+缓存选中项数据的方法
Sep 21 Javascript
layui实现数据表格自定义数据项
Oct 26 #Javascript
layui 数据表格 根据值(1=业务,2=机构)显示中文名称示例
Oct 26 #Javascript
使用 JavaScript 创建并下载文件(模拟点击)
Oct 25 #Javascript
js前端如何写一个精确的倒计时代码
Oct 25 #Javascript
对layui数据表格动态cols(字段)动态变化详解
Oct 25 #Javascript
layui实现数据表格隐藏列的示例
Oct 25 #Javascript
关于在LayUI中使用AJAX提交巨坑记录
Oct 25 #Javascript
You might like
Zerg建筑一览
2020/03/14 星际争霸
从网上搜到的phpwind 0day的代码
2006/12/07 PHP
攻克CakePHP系列一 连接MySQL数据库
2008/10/22 PHP
php实现的百度搜索某地天气的小偷代码
2014/04/23 PHP
Codeigniter+PHPExcel实现导出数据到Excel文件
2014/06/12 PHP
php中eval函数的危害与正确禁用方法
2014/06/30 PHP
PHP之预定义接口详解
2015/07/29 PHP
基于jquery的下拉框改变动态添加和删除表格实现代码
2020/09/12 Javascript
js 一个关于图片onload加载的事
2013/11/10 Javascript
JavaScript动态添加style节点的方法
2015/06/09 Javascript
跟我学习javascript创建对象(类)的8种方法
2015/11/20 Javascript
相册展示PhotoSwipe.js插件实现
2016/08/25 Javascript
详解angular中如何监控dom渲染完毕
2017/01/03 Javascript
AngularJS的依赖注入实例分析(使用module和injector)
2017/01/19 Javascript
js中的触发事件对象event.srcElement与event.target详解
2017/03/15 Javascript
JavaScript运动框架 多物体任意值运动(三)
2017/05/17 Javascript
zTree节点文字过多的处理方法
2017/11/24 Javascript
vue-cli常用设置总结
2018/02/24 Javascript
关于js的三种使用方式(行内js、内部js、外部js)的程序代码
2018/05/05 Javascript
JavaScript之实现一个简单的Vue示例
2019/01/17 Javascript
用原生 JS 实现 innerHTML 功能实例详解
2019/04/03 Javascript
vue组件中watch props根据v-if动态判断并挂载DOM的问题
2019/05/12 Javascript
jquery实现二级导航下拉菜单效果实例
2019/05/14 jQuery
vue-router 按需加载 component: () =&gt; import() 报错的解决
2020/09/22 Javascript
Python查找函数f(x)=0根的解决方法
2015/05/07 Python
机器学习之KNN算法原理及Python实现方法详解
2018/07/09 Python
python读取TXT每行,并存到LIST中的方法
2018/10/26 Python
python tkinter控件布局项目实例
2019/11/04 Python
python 实现提取log文件中的关键句子,并进行统计分析
2019/12/24 Python
What's the difference between Debug and Trace class? (Debug类与Trace类有什么区别)
2013/09/10 面试题
网络编辑岗位职责范本
2014/02/10 职场文书
高三毕业典礼主持词
2014/03/27 职场文书
2014年社会实践活动总结范文
2014/04/29 职场文书
社区精神文明建设汇报材料
2014/08/17 职场文书
2014党的群众路线教育实践活动学习心得体会
2014/10/31 职场文书
MySQL Innodb索引机制详细介绍
2021/11/23 MySQL