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

朱雀 2022-05-16 05:07 405阅读 0赞

关于表格解析自定义单元格的解析参数请先详细查看官方文档：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" ? "代购" : "私有";
    }},

昨天我遇到的情况比较特殊，不仅是要显示还需要在单元格上进行修改状态：  
效果如下图：  
![这里写图片描述][70]

所以解析的时候需要在判断的时候加入单选按钮框然后还要为其添加不一样的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和状态传到后台达到修改的目的！

--------------------

[70]: /images/20220516/2d000d51325f46d89469753c1b0b4e27.png

发表评论取消回复

表情：

评论列表（有 0 条评论，405人围观）

还没有评论，来说两句吧...

相关阅读

相关 layui表格使用自定义模板templet

前言在前文 [layui+springboot实现表格增删改查][layui_springboot] 中，我们展示了如何使用layui将数据库数据渲染到前端表格中，但现

男娘i/ 2023年10月18日 22:29/ 0 赞/ 143 阅读

相关 layui表格使用templet模板。

table.render(\{ elem: '\test',

客官°小女子只卖身不卖艺/ 2023年07月18日 02:48/ 0 赞/ 12 阅读

相关关于DevExpress XtraReport 表格合并单元格

1、列的合并：如下图操作，其实修改的属性是单元格的Weight属性，属性列表不显示而已。 ![format_png][] ![format_png 1][] 2、行合

女爷i/ 2023年06月23日 13:13/ 0 赞/ 25 阅读

相关 layui表格合并单元格多表_layui如何实现表格单元格合并

![Image 1][] 需求：下面用excel表格大概模拟下需求，左边是原来的，要改成右边这样的： ![Image 1][] 第一步：再生成表格后调用此方法，以合并

灰太狼/ 2022年11月19日 09:50/ 0 赞/ 350 阅读

相关 layui方法渲染复杂表头，合并数据项的单元格

1. 数据类型 [ { amountList: [ {year: "2018", repo

我不是女神ヾ/ 2022年11月16日 10:57/ 0 赞/ 304 阅读

相关 layui表格单元格中插入下拉框

这个实现采用了layui 社区一位大神的代码，在此感谢大神的分享，我自己做个记录，也给使用layui 的小伙伴们做一个分享。思路是这样的 > 可以使用自定义模板返回se

雨点打透心脏的1/2处/ 2022年10月27日 13:54/ 0 赞/ 735 阅读

相关 C# 渲染Word中表格内各个单元格的变量

//渲染Word中表格内各个单元格的变量 foreach (XWPFTable table in document.Tables) { for

我会带着你远行/ 2022年09月08日 15:49/ 0 赞/ 189 阅读

相关 LayUi 之 templet

templet是什么东西？我们都知道LayUi中有模板，就是把我们需要展示的东西放在模板中展示，你就比如我们想要展示一些数据，但是这些数据不是我们想要的数据或者不是我们想要

ゝ一纸荒年。/ 2022年05月20日 04:28/ 0 赞/ 311 阅读

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

关于表格解析自定义单元格的解析参数请先详细查看官方文档：http://www.layui.com/doc/modules/table.html\templet 然后我简单说一

朱雀/ 2022年05月16日 05:07/ 0 赞/ 406 阅读

相关 Layui表格渲染

开发工具与关键技术： Visual Studio 2015 – Layui表格渲染作者：廖亚星撰写时间：2019年5 月15 日下面我用Layui插件来渲染代码

缺乏、安全感/ 2022年01月31日 05:49/ 0 赞/ 570 阅读