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

时间：2024-10-21

在解析单元格的时候自定义列为这样：

{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和状态传到后台达到修改的目的！

上一篇：html表单标签详细介绍以及实例代码 下一篇：没有了

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

相关文章