关于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> ...
随机推荐
- mysql数据库查找数据的方法。
今日内容 1.外键的变种 唯一索引:关键字 unique(num) 作用:使指定的列,中的属性不能重复,并且加速查找案例:create table t5(id int,num int,unique(n ...
- 【VS开发】CListCtrl控件使用
为何调用了CListCtrl的InsertColumn却什么效果都没有?这个问题以前发现过,今天才清楚,那就是要把它的Style指定为LVS_REPORT. 具体做法如下: 假 ...
- 微信扫码无法直接下载APP的apk的解决办法
PHP的处理方式:http://blog.sina.com.cn/s/blog_4cd978f90102wx92.html
- python 指定文件夹下所有文件(包括子目录下的文件)拷贝到目标文件夹下
#!/usr/bin/env python3 # -*- coding:utf8 -*- # @TIME :2018/9/17 9:02 # @Author:dazhan # @File :copyf ...
- spring_mvc入门项目的小总结
1.先搭建一个maven的web项目 ,然后把文件夹完善一下,创建一个java的文件夹和resource的问件夹,并指定他们各自的功能. 导入pom.xml文件的依赖 <properties&g ...
- yum方式安装mono
https://blog.csdn.net/qq_21153619/article/details/81459359 这样应该比较简单 yum方式按照mono rpm --import "h ...
- SQL SERVER GETDATE() 函数
定义: GETDATE() 函数从 SQL Server 返回当前的时间和日期. 语法: GETDATE() 返回值: datetime型数据 例: 声明:本文是本人查阅网上及书籍等各种资料,再加上 ...
- 虚拟机(Vmware)安装ubuntu18.04和配置调整(三)
三.ubuntu安装软件 1.安装常用软件 python程序员: $ sudo apt install ipython $ sudo apt install ipython3 $ sudo a ...
- springboot2.0application.在yml文件中添加自定义配置
1. 在application.yml文件中添加自定义配置 app: platform: version: code: '1.0.0' 2. 定义bean类 具体格式: 其中的成员变量名称需要与配 ...
- MySQL8在CentOS7上的安装
Install_CentOS7_MySQL8_binary.sh #!/bin/bash MySQL_Package=mysql-8.0.16-linux-glibc2.12-x86_64.tar.x ...