关于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> ...
随机推荐
- idea标签页多行显示+设置标签页上限
idea标签页多行显示+设置标签页上限 Setting--Editor--General--Editor Tabs
- python之pandas学习笔记-pandas数据结构
pandas数据结构 pandas处理3种数据结构,它们建立在numpy数组之上,所以运行速度很快: 1.系列(Series) 2.数据帧(DataFrame) 3.面板(Panel) 关系: 数据结 ...
- maven运行工程
1.cd到工程目录下,执行打包命令-----mvn package 2.cd到工程的target目录执行运行命令 java -classpath myapp-1.0-SNAPSHOT.jar cn.m ...
- weekly paper read
week9: 查找论文的情况 1.*(reference) title:Improving Performance and Capacity of Flash Storage Devices by E ...
- Linux下查看文件编码及批量修改编码
查看文件编码在Linux中查看文件编码可以通过以下几种方式:1.在Vim中可以直接查看文件编码:set fileencoding即可显示文件编码格式.如果你只是想查看其它编码格式的文件或者想解决用Vi ...
- Spring4学习回顾之路08- FactoryBean配置Bean
建立Student.java package com.lql.srping04; /** * @author: lql * @date: 2019.10.28 * Description: */ pu ...
- luffy前台配置
目录 axios前后台交互 cokies操作 element-ui页面组件框架 bootstrap页面组件框架 前端主页 图片准备 页头组件:components/Header.vue 轮播图组件:c ...
- 转:Git和Github简单教程
转自:https://www.cnblogs.com/schaepher/p/5561193.html Git和Github简单教程 原文链接:Git和Github简单教程 网络上关于Git和Gi ...
- 【转载】linux SUID SGID
作者:sparkdev 出处:http://www.cnblogs.com/sparkdev/ setuid 和 setgid 分别是 set uid ID upon execution 和 set ...
- linux(centos7) 查看磁盘空间大小
命令: df -hl 1 显示: 文件系统 容量 已用 可用 已用% 挂载点 Filesystem Size Used Avail Use% Mounted on /dev/hda2 45G 19G ...