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

2024-10-21html教程
166

在解析单元格的时候自定义列为这样:
{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>
最后通过监听单元框的值变化就可以调用ajax异步请求将当前选中的行的id和状态传到后台达到修改的目的!
The End

相关推荐

layui根据经纬度在弹出层中显示具体位置
我们要实现在layui根据经纬度在弹出层中显示具体位置,具体要怎么操作呢? 1、首先你需要引入百度地图的js,这个ak我们去百度地图开发者平台申请,一定要申请浏览器版的ak. script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0ak=你的ak...
2024-10-24 html教程
152

layui table筛选列实现记忆功能,刷新不丢失
layui table给前端的table字段很多,一两百个,但是每个人关注的字段不同,有些人会设置这个defaultToolbar中的列字段,但是每次进去页面都得重新设置,很麻烦。 想法是,defaultToolbar的filter这个功能中,用户自定义显示列时保存起来,下次进入页面默认加...
2024-10-21 html教程
119

layui表格渲染templet解析单元格的问题
在解析单元格的时候自定义列为这样: {field: 'tpye', title: '所属类别', align:"center",templet:'#typeBar'} 我们通常这样简单的解析像这样也没什么毛病: script type="text/html" id="typeBar" {{# if(d.tpye == 1){ }} 系统优化 {{# }else if(d.tpye==2...
2024-10-21 html教程
166

html表单标签详细介绍以及实例代码
表单用于搜集不同类型的用户输入,表单由不同类型的标签组成,相关标签及属性用法如下: 1、form标签 定义整体的表单区域 action属性 定义表单数据提交地址 method属性 定义表单提交的方式,一般有get方式和post方式 2、label标签 为表单元素定义文字标注 fo...
2024-10-16 html教程
85

Js正则表达式过滤特殊字符、表情
Js正则表达式过滤特殊字符、表情的实例代码: let ret = "12312ffds#¥@¥#%^***(()))*)).`@%@¥@¥", val = this.customDeviceName;//特殊字符过滤let pattern = new RegExp("[`~!@#$^*()=|{}':;',\\[\\]./?~!@#¥……*()——|{}【】‘;:”“'。,、?]...
2022-10-14 html教程
594

让你的HTML5&CSS3网站在老IE中也能正常显示的3种方法
1、htmlshiv.js Remy开发的HTML5shiv工具能利用JavaScript在老式IE里创建main,header,footer等HTML5元素。也就是说使用JavaScript能创建这些本来不存在的HTML5新元素。这是什么原理?你可能花几天也想不明白,但谁在意呢!这个脚本几乎是所有正式网站必用...
2017-04-15 html教程
586