关于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' : '' }}>&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>

一定要每一组的name值不一样才可以达到单选和修改的效果哦~
最后通过监听单元框的值变化就可以调用ajax异步请求将当前选中的行的id和状态传到后台达到修改的目的！

巴特西

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

最新文章

热门文章