layui数据表格的td模板

1.常用操作模板

<script type="text/html" id="userbar"> <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
<a class="layui-btn layui-btn-xs" lay-event="change">修改</a>
{{#
var statusBut= function(date){
if(date==0){
return ‘<a class="layui-btn layui-btn-xs" lay-event="edit">配置</a>‘;
}else if(date==1){
return‘<a class="layui-btn layui-btn-xs" lay-event="edit">禁用</a>‘;
}else if(date==2){
return ‘<a class="layui-btn layui-btn-xs" lay-event="edit">启动</a>‘;
}
}
}}
{{ statusBut(d.status)}}
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

2.时间格式转换模板

<script type="text/html" id="TimeTpl">
{{#
var parseDate= function(date){
if(date){
var t=new Date(date);
return t.getFullYear()+"-"+(t.getMonth()+1)+"-"+t.getDate()+" "+t.getHours()+":"+t.getMinutes();
}
}
}}
{{parseDate(d.updateTime)}}
</script>

3.状态转换模板

<script type="text/html" id="statusTpl">
{{#
var statusTxt= function(date){
if(date==0){
return "未配置";
}else if(date==1){
return "启动";
}else if(date==2){
return "禁用";
}
}
}}
{{ statusTxt(d.status)}}
</script>

原文地址:https://www.cnblogs.com/yysbolg/p/8430872.html

时间: 2024-10-16 16:05:24

layui数据表格的td模板的相关文章

关于layui数据表格重载传值的问题

在工作的时候用到了layui的数据表格,需要实现一个重载功能,是搜索框模糊查询的功能,官方示例的文档(官方链接:https://www.layui.com/demo/table/reload.html) 上说的是 传值需要放到一个key:{}里,反复测试这样是不对的,应该去掉外层key:{},直接写where:{id:demoReload.val()},这样后台直接request.getparameter("id")就可以拿到值了. 不知道为什么贤心大神不更正一下这个地方的坑 原文地址

[Javascript] 动态隐藏和显示 Layui 数据表格的列

需求: 设置一个按钮,动态隐藏或展示数据表格的列.默认隐藏部分列,点击按钮进行显示,再次点击就隐藏. 基于 layui 的数据表格. 代码: 绑定按钮事件. 这里需要设置的列比较多,表格字段名格式:d1_roi.d1_ltv.d2_roi.d2_ltv... 原理:先清除每列的 layui-hide 的 class,然后给当前列每个格子加上固定宽度即可. 1 //拓展列切换 2 $(".js-showhide").click(function(){ 3 var roi_key = ''

layui数据表格固定头部和第一列、colspan合并列

刚看到原型图的时候,纳尼?不是跟我开玩笑吧,小女子资历尚浅,还真没做过像这样的功能,然后就是各种找度娘,可是都没有找到合适的,很多都是行合并,真的是头疼呀!再纠结是用VUE实现还是用layui实现好,在最后挣扎下,还是选择了用layui.最后加上从各大神的demo中得到的灵感.在这里记录一下,希望可以帮助到有需要的人啦~ 移动端展示效果如下: 1 <script> 2 3 layui.use('table', function(){ 4 var table = layui.table; 5 /

layui 数据表格使用

//第一个实例 table.render({ elem: '#demo' ,height: 400 ,url: '/My_NewsTest/LookServlet' //数据接口 ,page: true //开启分页 ,limit:5 ,limits:[3,6,10] ,page:true ,parseData: function(res){ //res 即为原始返回的数据 return { "code":0, //解析接口状态 "msg":""

Layui数据表格/搜索重加载/分条件操作/工具条监听

<div class="layui-layout layui-layout-admin" style="padding-left: 20px;"> <div class="layui-row" style="margin-top: 20px;"> //搜索开始 <form class="layui-form" action="" onsubmit="

layui数据表格监听按钮问题

layui官网文档源码 原始容器 <table id="demo" lay-filter="test"></table> 工具栏模板: <script type="text/html" id="toolbarDemo"> <div class="layui-btn-container"> <button class="layui-btn lay

layui数据表格分页加载动画,自己定义加载动画,&quot;加载中...&quot;

记录思路,仅供参考 在表格渲染完成后,在done回调函数中给分页动态加点击事件, 关闭"加载中..."动画也是在 done回调函数中关闭 这是我实现的思路,记录给大家参考. , done: function (res, curr, count) { // 添加分页加载动画的函数 $('.layui-laypage > a').each(function(){ $(this).attr('onclick',"pageLoading(this)"); }) top

layui数据表格中图片无法自适应问题

如图问题,图片只显示了一部分 这时只需要加入样式即可 <style> .layui-table-cell { height: 100px; width: 100px; max-width: 100%; } </style> 高低大小根据实际自行调节 原文地址:https://www.cnblogs.com/wmc1125/p/11391217.html

layui 数据表格自适应高度

添加css .layui-table-cell { height: inherit; } .layui-table-cell { height: inherit;} 原文地址:https://www.cnblogs.com/jasonLiu2018/p/12074768.html