关于layui表格渲染templet解析单元格的问题
原文链接:https://blog.csdn.net/wyp_comeon/article/details/81735951
关于表格解析自定义单元格的解析参数请先详细查看官方文档:http://www.layui.com/doc/modules/table.html#templet
然后我简单说一下 templet - 自定义列模板 我在项目中遇到的解析问题:
在解析单元格的时候自定义列为这样:
{field: 'tpye', title: '所属类别', align:"center",templet:'#typeBar'}
我们通常这样简单的解析像这样也没什么毛病:
<script type="text/html" id="typeBar">
{{# if(d.tpye == 1){ }}
系统优化
{{# }else if(d.tpye==2){ }}
使用中问题
{{# }else { }}
使用中问题
{{# } }}
</script>
但是如果你的解析类别只有两类的话还可以直接在行内简单一点写:
{field: 'ordertype', title: '订单类型', align:'center',templet:function(d){
return d.ordertype == "elvan" ? "代购" : "私有";
}},
昨天我遇到的情况比较特殊,不仅是要显示还需要在单元格上进行修改状态:
效果如下图:
所以解析的时候需要在判断的时候加入单选按钮框然后还要为其添加不一样的name值,代码如下:
<script type="text/html" id="stateBar">
{{# if(d.state == '0'){ }}
<input type="radio" name="state{{d.id}}" value="{{d.id}}" title="已提交" lay-filter="lockDemo" {{ d.state==0 ? 'checked' : '' }}>
<input type="radio" name="state{{d.id}}" value="{{d.id}}" title="处理中" lay-filter="lockDemo" {{ d.state==1 ? 'checked' : '' }}>
<input type="radio" name="state{{d.id}}" value="{{d.id}}" title="已处理" lay-filter="lockDemo" {{ d.state==2 ? 'checked' : '' }}>
{{# } else if(d.state == '1') { }}
<input type="radio" name="state{{d.id}}" value="{{d.id}}" title="已提交" lay-filter="lockDemo" {{ d.state==0 ? 'checked' : '' }}>
<input type="radio" name="state{{d.id}}" value="{{d.id}}" title="处理中" lay-filter="lockDemo" {{ d.state==1 ? 'checked' : '' }}>
<input type="radio" name="state{{d.id}}" value="{{d.id}}" title="已处理" lay-filter="lockDemo" {{ d.state==2 ? 'checked' : '' }}>
{{# } else { }}
<input type="radio" name="state{{d.id}}" value="{{d.id}}" title="已提交" lay-filter="lockDemo" {{ d.state==0 ? 'checked' : '' }}>
<input type="radio" name="state{{d.id}}" value="{{d.id}}" title="处理中" lay-filter="lockDemo" {{ d.state==1 ? 'checked' : '' }}>
<input type="radio" name="state{{d.id}}" value="{{d.id}}" title="已处理" lay-filter="lockDemo" {{ d.state==2 ? 'checked' : '' }}>
{{# }
}}
</script>
一定要每一组的name值不一样才可以达到单选和修改的效果哦~
最后通过监听单元框的值变化就可以调用ajax异步请求将当前选中的行的id和状态传到后台达到修改的目的!
关于layui表格渲染templet解析单元格的问题的更多相关文章
- 解决boostrap-table有水平和垂直滚动条时,滚动条滑到最右边表格标题和内容单元格无法对齐的问题
问题:boostrap-table有水平和垂直滚动条时,滚动条不高的时候(滚动高度比较大的时候没有问题),滚动条滑到最右边表格标题和内容单元格无法对齐的问题 问题原因:bootstrap-table源 ...
- [Xcode 实际操作]五、使用表格-(4)设置UITableView单元格数据库源
目录:[Swift]Xcode实际操作 本文将演示如何自定义表格的数据来源. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIKit //首先添加 ...
- [Xcode 实际操作]五、使用表格-(3)设置UITableView单元格图标
目录:[Swift]Xcode实际操作 本文将演示如何给表格行设置图标. 打开资源文件夹[Assets.xcassets], 在资源文件夹中导入两张图片:一张彩色,一张灰色,作为单元格的图标. [+] ...
- [Xcode 实际操作]五、使用表格-(2)设置UITableView单元格高度
目录:[Swift]Xcode实际操作 本文将演示如何制作一个自定义行高的表格视图 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIKit //首 ...
- [Xcode 实际操作]五、使用表格-(10)插入UITableView单元格
目录:[Swift]Xcode实际操作 本文将演示如何插入一行单元格. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIKit //首先添加两个协 ...
- [Xcode 实际操作]五、使用表格-(9)删除UITableView单元格(手势左滑调出删除按钮)
目录:[Swift]Xcode实际操作 本文将演示如何删除某一行单元格.手势左滑调出删除按钮. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIK ...
- [Xcode 实际操作]五、使用表格-(8)自定义UITableView单元格Accessory样式(附件图标)
目录:[Swift]Xcode实际操作 本文将演示如何自定义单元格的附件图标. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIKit //首先添 ...
- table、tr、td表格的行、单元格等属性说明
table.tr.td表格的行.单元格等属性说明 <table>标签定义HTML表格.简单的HTML表格由table元素以及一个或多个tr.th或td元素组成. tr元素定义表格行,th元 ...
- layui table+复杂表头+合并单元格
效果图: 问题:行hover效果感觉错乱 所以改为透明色 代码: <!DOCTYPE html> <html lang="en"> <head> ...
随机推荐
- python列表展开的方法
只有一层嵌套的常见方法: # 普通方法 list_1 = [[1, 2], [3, 4, 5], [6, 7], [8], [9]] list_2 = [] for _ in list_1: list ...
- 关于js中this指向的问题
this的绑定规则有4种 默认绑定 隐性绑定 显性绑定 new绑定 this绑定优先级 new 绑定 > 显性绑定 > 隐性绑定 > 默认绑定 1.如果函数被new 修饰 this绑 ...
- [转帖]socks5 协议简介
socks5 协议简介 http://zhihan.me/network/2017/09/24/socks5-protocol/ 什么是socks5 或许你没听说过socks5,但你一定听说过Shad ...
- Java MyBatis逆向工程,自动生成pojo,mapper
生成xml文件,文件名generator.xml <?xml version="1.0" encoding="UTF-8"?><!DOCTYP ...
- H2内嵌数据库的使用
H2内嵌数据库的使用 H2是一个开源的嵌入式数据库引擎,采用java语言编写,不受平台的限制. 同时H2提供了一个十分方便的web控制台用于操作和管理数据库内容. H2还提供兼容模式,可以兼容一些主流 ...
- SQLite进阶-9.别名
我们可以暂时给表或者列重命名为另一个名字,称为别名,重命名只是临时运行时改变,不会改变数据库中的实际的名字. -- 语法 SELECT column_name AS column_alias_name ...
- c++练习—实现简单的4则运算
#pragma once class Counter { public: void setExp(const char* exp);//设置表达式 void cleanExp(); //清除表达式 v ...
- E.XKC's basketball team(The Preliminary Contest for ICPC Asia Xuzhou 2019)
https://nanti.jisuanke.com/t/41387 解: 离散化+线段树. #define IOS ios_base::sync_with_stdio(0); cin.tie(0); ...
- Linux就该这么学——新手必须掌握的命令之常用的系统工作命令
echo命令 含义:echo命令用于在终端输出字符串或变量提取后的值,格式为 : echo [字符串|$变量] 示例: 将”Linuxprobe.com”输出到终端屏幕的命令为: [root@linu ...
- import xxx和from xxx import xx中修改被导入模块里面的变量的坑
现在有如下几个模块: A.py 功能:定义全局变量,供其他模块使用 name = "张三" lists = [1, 2, 3, 4, 5] B.py 功能:打印A.py中的变量 f ...