原文链接: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' : '' }}>&nbsp;
<input type="radio" name="state{{d.id}}" value="{{d.id}}" title="处理中" lay-filter="lockDemo" {{ d.state==1 ? 'checked' : '' }}>&nbsp;
<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' : '' }}>&nbsp;
<input type="radio" name="state{{d.id}}" value="{{d.id}}" title="处理中" lay-filter="lockDemo" {{ d.state==1 ? 'checked' : '' }}>&nbsp;
<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' : '' }}>&nbsp;
<input type="radio" name="state{{d.id}}" value="{{d.id}}" title="处理中" lay-filter="lockDemo" {{ d.state==1 ? 'checked' : '' }}>&nbsp;
<input type="radio" name="state{{d.id}}" value="{{d.id}}" title="已处理" lay-filter="lockDemo" {{ d.state==2 ? 'checked' : '' }}>
{{# }
}}
</script>

一定要每一组的name值不一样才可以达到单选和修改的效果哦~
最后通过监听单元框的值变化就可以调用ajax异步请求将当前选中的行的id和状态传到后台达到修改的目的!

关于layui表格渲染templet解析单元格的问题的更多相关文章

  1. 解决boostrap-table有水平和垂直滚动条时,滚动条滑到最右边表格标题和内容单元格无法对齐的问题

    问题:boostrap-table有水平和垂直滚动条时,滚动条不高的时候(滚动高度比较大的时候没有问题),滚动条滑到最右边表格标题和内容单元格无法对齐的问题 问题原因:bootstrap-table源 ...

  2. [Xcode 实际操作]五、使用表格-(4)设置UITableView单元格数据库源

    目录:[Swift]Xcode实际操作 本文将演示如何自定义表格的数据来源. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIKit //首先添加 ...

  3. [Xcode 实际操作]五、使用表格-(3)设置UITableView单元格图标

    目录:[Swift]Xcode实际操作 本文将演示如何给表格行设置图标. 打开资源文件夹[Assets.xcassets], 在资源文件夹中导入两张图片:一张彩色,一张灰色,作为单元格的图标. [+] ...

  4. [Xcode 实际操作]五、使用表格-(2)设置UITableView单元格高度

    目录:[Swift]Xcode实际操作 本文将演示如何制作一个自定义行高的表格视图 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIKit //首 ...

  5. [Xcode 实际操作]五、使用表格-(10)插入UITableView单元格

    目录:[Swift]Xcode实际操作 本文将演示如何插入一行单元格. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIKit //首先添加两个协 ...

  6. [Xcode 实际操作]五、使用表格-(9)删除UITableView单元格(手势左滑调出删除按钮)

    目录:[Swift]Xcode实际操作 本文将演示如何删除某一行单元格.手势左滑调出删除按钮. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIK ...

  7. [Xcode 实际操作]五、使用表格-(8)自定义UITableView单元格Accessory样式(附件图标)

    目录:[Swift]Xcode实际操作 本文将演示如何自定义单元格的附件图标. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIKit //首先添 ...

  8. table、tr、td表格的行、单元格等属性说明

    table.tr.td表格的行.单元格等属性说明 <table>标签定义HTML表格.简单的HTML表格由table元素以及一个或多个tr.th或td元素组成. tr元素定义表格行,th元 ...

  9. layui table+复杂表头+合并单元格

    效果图: 问题:行hover效果感觉错乱  所以改为透明色 代码: <!DOCTYPE html> <html lang="en"> <head> ...

随机推荐

  1. 喜欢听DJ的朋友可以自己用下,别传播

    // ==UserScript== // @icon http://djkk.com/favicon.ico // @name DJKK Downloader // @namespace http:/ ...

  2. OSI七层模型非专业简介

    七层模型从下到上分别是:物理层.数据链路层.网络层.传输层.会话层.表示层.应用层. 1.第一层物理层:最简单理解,我们所看到的网线,就是物理层的.物理层是传输媒介,所以无线网络也算是物理层,在线路中 ...

  3. robots.txt文件

    网站通过一个符合Robots协议的robots.txt文件来告诉搜索引擎哪些页面可以爬取.Robots.txt协议全称“网络爬虫排除标准”.一般情况下,该文件以一行或多行User-agent记录开始, ...

  4. nginx代理 tomcat获得真实用户IP

    nginx代理 tomcat获得真实用户IP 2017年04月08日 21:34:17 cf 阅读数 1825更多 分类专栏: nginx html/js/ajax   版权声明:本文为博主原创文章, ...

  5. Spring 的 Bean 管理(XML 方式)

    Spring 的 Bean 管理(XML 方式) 1. 三种实例化 Bean 的方式 使用类构造器实例化(默认无参数) 使用静态工厂方法实例化(简单工厂模式) 使用实例工厂方法实例化(工厂方法模式) ...

  6. spark学习之Lambda架构日志分析流水线

    单机运行 一.环境准备 Flume 1.6.0 Hadoop 2.6.0 Spark 1.6.0 Java version 1.8.0_73 Kafka 2.11-0.9.0.1 zookeeper ...

  7. C#面向对象9 字符串

    1.字符串的不可变性 当你给一个字符串重新赋值之后,老的值并没有销毁,而是重新开辟了一块空间(堆)存储新的值. **当程序结束后,GC扫描整个内存,如果发现有的空间没有被指向,则立即把它销毁. 示意图 ...

  8. 如何解决windows 80端口被占用的情况

    window下如果在安装某个软件或者启动tomcat时 会遇到80端口被占用的情况,通过命令 netstat -ano 查看端口被占用情况 找到占用80端口的进程ID,然后我们在任务管理器当中将这个进 ...

  9. wpf 模板绑定父对象

    有两种方式可以实现在模板中元素绑定到父对象 1.<ContentPresenter Margin=”{TemplateBinding Padding}”/> 2.Color=”{Bindi ...

  10. 09 Python之IO多路复用

    四种常见IO模型 阻塞IO(blocking IO).非阻塞IO(nonblocking IO).IO多路复用(IOmultiplexing).异步IO(asynchronous IO) IO发生时涉 ...