Layui后端模板之分类管理（附HTML源码）

这篇笔记是一个关于Layui编写的后端页面，在开发这个页面的时候波波主要用在了后端文章的分类管理。使得后端编辑人员在添加文章的时候方便添加或修改不存在的分类。

效果预览：

Layui后端模板之分类管理

特别说明：

1、页面中修改分类每次仅限修改一个，不支持多个批量修改。修改完成后鼠标离开输入框后就会自动更新修改的内容。

2、页面同时支持新增分类、修改分类、删除分类。

3、无论新增还是修改，操作之后左侧下拉框会实时更新。

4、本页面模板尤其适合Tp-admin后端框架。由于是纯html，因此需要的小伙伴也可以自行修改。

页面源码：

  1. {extend name='extra@admin/content'}
  2. {block name="content"}
  3. <!-- 新增分类 开始 -->
  4. <form class="layui-form layui-form-pane form-search" action='{:url("$classuri/addcate")}'  method="post" data-auto="true">
  5.     <div class="layui-form-item layui-inline">
  6.         <label class="layui-form-label">分类名称</label>
  7.         <div class="layui-input-inline">
  8.             <input name="name" value="" placeholder="请输入分类名称" required class="layui-input">
  9.         </div>
  10.     </div>
  11.     <div class="layui-form-item layui-inline">
  12.         <button class="layui-btn layui-btn-primary" type="submit"><i class="fa fa-plus"></i> 添 加</button>
  13.     </div>
  14. </form>
  15. <!-- 新增分类 结束 -->
  16. <div class="hr-line-dashed" style="margin: 10px 0px"></div>
  17. <form onsubmit="return false;" data-auto="true" method="post">
  18.     {if empty($list)}
  19.     <p class="help-block text-center well">暂 无 分 类！</p>
  20.     {else}
  21.     <input type="hidden" value="resort" name="action"/>
  22.     <table class="layui-table" lay-skin="line" lay-size="sm">
  23.         <thead>
  24.         <tr>
  25.             <th class='list-table-check-td'>
  26.                 <input data-none-auto="" data-check-target='.list-check-box' type='checkbox'/>
  27.             </th>
  28.             <th class='text-center'>ID</th>
  29.             <th class='text-center'>分类名称</th>
  30.             <th class='text-center'>状态</th>
  31.             <th class='text-center'>操作</th>
  32.         </tr>
  33.         </thead>
  34.         <tbody>
  35.         {foreach $list as $key=>$vo}
  36.         <tr>
  37.             <td class='list-table-check-td'>
  38.                 <input class="list-check-box" value='{$vo.id}' type='checkbox'/>
  39.             </td>
  40.             <td class='text-center'>{$vo.id}</td>
  41.             <td class='text-center'>{$vo.name|default="<span style='color:#ccc'>分类名称缺失</span>"}</td>
  42.             <td class='text-center'>{if $vo.is_deleted and $vo.is_deleted eq 1}
  43.                 <a data-update="{$vo.id}" data-field="is_deleted" data-value="0" data-action='{:url("$classuri/delcate")}' data-confirm="确定要开启该分类？"><span style="color: #cc0000">已禁用</span></a>
  44.                 {else /}
  45.                 <a data-update="{$vo.id}" data-field="is_deleted" data-value="1" data-action='{:url("$classuri/delcate")}' data-confirm="确定要禁用该分类？"><span style="color: #00B83F">使用中</span></a>
  46.                 {/if}
  47.             </td>
  48.             <td class='text-center nowrap'>
  49.                 {if auth("$classuri/addcate")}
  50.                 <span class="text-explode">|</span>
  51.                 <a href="javascript:void(0)" onclick="editcate(this)">修改</a>
  52.                 {/if}
  53.                 <span class="text-explode">|</span>
  54.                 {if auth("$classuri/delcate") and $vo.is_deleted eq 0}
  55.                 <a href="javascript:void(0)" onclick="delcate(this)" data-value="{$vo.is_deleted|default='1'}">禁用</a>
  56.                 {else /}
  57.                 <a href="javascript:void(0)" onclick="delcate(this)" data-value="{$vo.is_deleted|default='0'}">启用</a>
  58.                 {/if}
  59.             </td>
  60.         </tr>
  61.         {/foreach}
  62.         </tbody>
  63.     </table>
  64.     {if isset($page)}<p>{$page}</p>{/if}
  65.     {/if}
  66.     <script>
  67.         window.form.render();
  68.         var tr = "";
  69.         var mod = 0;
  70.         $(".layui-table").on("blur","#momo",function () {
  71.             var cate_id = $(tr).eq(1).text();
  72.             var cate_name = $('#momo').val();
  73.             var data = {id:parseInt(cate_id),name:cate_name}
  74.             $.form.load('{:url("addcate")}',data,'POST',function (ret) {
  75.                 $.msg.auto(ret);
  76.                 if (ret.code === 0){
  77.                     $(tr).eq(2).html(cate_name);
  78.                 }
  79.                 return false;
  80.             })
  81.         })
  82.         function editcate(e) {
  83.             if(mod == 0){
  84.                 tr = $(e).parent().siblings();
  85.                 $(tr).eq(2).html('<input class="layui-input" style="width: 50%;margin-left: 25%" id="momo" value="'+$(tr).eq(2).text()+'">');
  86.                 $(e).text('取消');
  87.                 mod = 1; //修改按钮状态
  88.             }else{
  89.                 $(tr).eq(2).html($("#momo").val());
  90.                 $(e).text('修改');
  91.                 mod = 0;
  92.             }
  93.         }
  94.     </script>
  95. </form>
  96. {/block}

 

你想把广告放到这里吗？

发表评论

您必须 登录 才能发表留言！