Layui(一) 表格嵌套时间、下拉菜单、徽章

最新推荐文章于 2024-07-17 15:36:21 发布

宗乐平

最新推荐文章于 2024-07-17 15:36:21 发布

阅读量1.5k

点赞数

分类专栏： layui 文章标签： Layui

本文链接：https://blog.csdn.net/qq_42142258/article/details/103458342

版权

这篇博客介绍了如何在Layui表格中实现嵌套时间显示、下拉菜单选择和徽章状态展示。作者强调了在JS渲染过程中，通过添加'selected'属性来设定下拉菜单的默认选中状态，并提供了部分代码片段供读者实践操作。

摘要由CSDN通过智能技术生成

注：① 第六点附上部分代码，请自行添加css和js以及模块加载脚本，自行动手会理解的更好，同时为自己做个使用记录！

② 特殊字段没有写<script>,因为和普通字段是一样的，就当是练习题咯。

③ 由于本人不太熟练JS，因此只能用笨方法写script渲染，下拉菜单只要在判断正确时，标签中添加 selected 即是默认选中状态还不会更改下拉菜单的顺序，（你可以试试不添加，对比下结果）

这是效果图：

1、先定义表格, lay-filter——过滤器，能够准确定位是哪个页面标签触发事件，在表格渲染 JS中会使用

 <table class="layui-hide" id="door-status" lay-filter="demoEvent"></table>

2、嵌套时间 id="dateTpl" 对应表格cols中的 field: 's_time', title: '状态起始时间', width: 230, templet: "#dateTpl",

，目的是为了告诉表格，此字段用户使用自定义模板渲染数据

<script type="text/html" id="dateTpl">
    {
  {#  if(d.s_time !=''){ }}
    <input type="text" class="layui-input layui-input-date" value="{
  {d.s_time}}">
    {
  {#  } else { }}
    <input type="text" class="layui-input layui-input-date" placeholder="HH:mm">
    {
  {#  } }}
</script>

3、嵌套下拉菜单

<script type="text/html" id="selectTpl">
    <!--<div class="layui-input-block">-->
    <select name="interest" id="s_status">
        {
  {# if(d.status == 1){ }}
        <option value=0>无效</option>
        <option value={
  {d.status}} selected>无状态
        </option>
        <option value=2>打开</option>
        <option value=3>加密</option>
        <option value=4>关闭</option>
        {
  {# } else if(d.status == 2) { }}
        <option value=0>无效</option>
        <option value=1>无状态</option>
        <option value={
  {d.status}} selected>打开</option>
        <option value=3>加密</option>
        <option value=4>关闭</option>
        {
  {# } else if(d.status == 3) { }}
        <option value=0>无效</option>
        <option value=1>无状态</option>
        <option value=2>打开</option>
        <option value={
  {d.status}} selected>加密</option>
        <option value=4>关闭</option>
        {
  {# } else if(d.status == 4) { }}
        <option value=0>无效</option>
        <option value=1>无状态</option>
        <option value=2>打开</option>
        <option value=3>加密</option>
        <option value={
  {d.status}} selected>关闭</option>
        {
  {# } else { }}
        <option value={
  {d.status}} selected>无效</option>
        <option value=1>无状态</option>
        <option value=2>打开</option>
        <option value=3>加密</option>
        <option value=4>关闭</option>
        {
  {# } }}
    </select>
</script>

4、嵌套徽章（1、解释下为什么看起来代码很冗余，因为本人并不熟练js，只能根据data做判断；

2、若字段值=0则不变色，字段值=1则是选中状态，同时更改class）

<script type="text/html" id="weekend">
    {
  {#  if(d.nomal_w6 == 0){ }}
    <span class="layui-badge sel-dategrp layui-bg-gray"
          lay-event="set_select" value={
  {d.nomal_w6}}>日</span>
    {
  {#  } else { }}
    <span class="layui-badge sel-dategrp layui-bg-blue"
          lay-event="set_select" value={
  {d.nomal_w6}}>日</span>
    {
  {#  } }}

    {
  {#  if(d.nomal_w0 == 0){ }}
    <span class="layui-badge sel-dategrp layui-bg-gray"
          lay-event="set_select" lay-href="data" value={
  {d.nomal_w0}}>一</span>