layui表格templet_关于layui表格渲染templet解析单元格的问题

本文探讨了layui表格templet的使用,特别是自定义列模板时遇到的问题和解决方案。通过示例展示了如何根据单元格内容动态生成单选按钮,并确保不同选项的name值唯一,以实现状态修改功能。同时,提到了表格滚动条导致的对齐问题及Bootstrap-table的调整方法。
摘要由CSDN通过智能技术生成

原文链接: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'}

我们通常这样简单的解析像这样也没什么毛病:

{{# if(d.tpye == 1){ }}

系统优化

{{# }else if(d.tpye==2){ }}

使用中问题

{{# }else { }}

使用中问题

{{# } }}

但是如果你的解析类别只有两类的话还可以直接在行内简单一点写:

{field: 'ordertype', title: '订单类型', align:'center',templet:function(d){

return d.ordertype == "elvan" ? "代购" : "私有";

}},

昨天我遇到的情况比较特殊,不仅是要显示还需要在单元格上进行修改状态:

效果如下图:

所以解析的时候需要在判断的时候加入单选按钮框然后还要为其添加不一样的name值,代码如下:

{{# if(d.state == '0'){ }}

{{# } else if(d.state == '1') { }}

{{# } else { }}

{{# }

}}

一定要每一组的name值不一样才可以达到单选和修改的效果哦~

最后通过监听单元框的值变化就可以调用ajax异步请求将当前选中的行的id和状态传到后台达到修改的目的!

解决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表格的行.单元格等属性说明

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

效果图: 问题:行hover效果感觉错乱  所以改为透明色 代码:

随机推荐

CentOS7 下ifconfig command not found解决办法

今天尝鲜用VMWare安装了CentOS7,选择了最小安装包模式,安装完毕之后想查看一下本机的ip地址,发现报错 # ifcon -bash: ifconfig: command not found ...

set[c++]

#include  using namespace std; #include  int main(int argc, const char * ...

arcgisserver

http://www.cnblogs.com/hll2008/archive/2008/11/14/1333828.html

CSS3学习之圆角box-shadow,阴影border-radius

最近经常玩腾讯微博,出来职业习惯,看看它的CSS,里面运用了大量的css3的东东,有一处用到了Data URI,还有css e­xpression有争议的地方,对png24图片的处理也是用滤镜,类似( ...

java常见的输入和输出流案例研究(一个)

字节输入和输出流 1.FileInputStream[文件字节输入流]->读取文件内容 用途:从文件系统中的文件获得输入字节.经常使用于读取图像.声音等原始字节流,读取字符流可考虑使用FileR ...

iOS应用的几个阶段

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launc ...

Microsoft Visual Studio调试监视器(MSVSMON.EXE)未能启动

在启动VS2010项目时,遇到如图所示"Microsoft Visual Studio调试监视器(MSVSMON.EXE)未能启动"的问题. 原因是VS2010安装路径(我的是D: ...

[MySQL]增加约束键

增加约束键 ALTER TABLE Persons ADD UNIQUE (P_Id) 创建表时加入约束键 CREATE TABLE Persons ( P_Id int NOT NULL, Last ...

卷积神经网络(CNN)代码实现(MNIST)解析

在http://blog.csdn.net/fengbingchun/article/details/50814710中给出了CNN的简单实现,这里对每一步的实现作个说明: 共7层:依次为输入层.C1 ...

selenium中动作链的使用

一.问题 我们有时候在使用selenium的时候,会遇到悬停后点击元素的操作,因此需要一个动作链来完成这个功能. 二.解决 从selenium的包中导入actionchains函数,利用xpath找到 ...

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值