zoukankan      html  css  js  c++  java
  • 关于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和状态传到后台达到修改的目的!

  • 相关阅读:
    CF 986A Fair——多源bfs
    poj3539 Elevator——同余类bfs
    poj3463 Sightseeing——次短路计数
    poj2262 Goldbach's Conjecture——筛素数
    Kruskal算法
    Prim算法
    离散化
    最短路(hdu2544)
    最短路径问题
    Servlet
  • 原文地址:https://www.cnblogs.com/bluealine/p/11451168.html
Copyright © 2011-2022 走看看