layuiAdmin使用

1.下载layuiAdmin实例

2.修改std版本的views界面

3.实体管理界面

3.1 表单html

<!--      文章列表-->
      <div class="layui-card-body">
        <div style="padding-bottom: 10px;">
          <button class="layui-btn layuiadmin-btn-list" data-type="batchdel">删除</button>
          <button class="layui-btn layuiadmin-btn-list" data-type="add">添加</button>
        </div>
        <!--初始化表单入口-->
        <table id="articleList" lay-filter="LAY-app-content-list"></table>
        <!--表单右部操作按钮-->
        <script type="text/html" id="tools">
          <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i
                  class="layui-icon layui-icon-edit"></i>编辑</a>
          <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i
                  class="layui-icon layui-icon-delete"></i>删除</a>
        </script>
      </div>

3.2 表单数据渲染

• 注意表单id
• get请求，当分页开启时传递page和limit参数
• 后端返回code为0时，查询成功

 //表格渲染
  table.render({
    elem: '#articleList'
    ,height: 312
    ,url: '/LwxWeb/article/listArticles' //数据接口
    ,page: true //开启分页
    ,defaultToolbar: ['filter', 'print', 'exports']
    ,id: 'articleId' //这个就是表格重载的时候需要使用的字段
    ,cols: [[ //表头
      {type: 'checkbox', fixed: 'left'},
      {field: 'articleId', title: 'ID', width:80, sort: true, fixed: 'left'}
      ,{field: 'title', title: '标题', width:150}
      ,{field: 'content', title: '内容', width:200}
      ,{field: 'date', title: '时间', width:200}
      ,{field: 'name', title: '分类', width: 80}
      ,{fixed: 'right', title: '操作', toolbar: '#tools', width: 150}
    ]]
  });

3.3 批量删除与添加

//批量删除和添加功能
  var $ = layui.$, active = {
    //批量删除
    batchdel: function(){
      //得到选中的数据
      var checkStatus = table.checkStatus('articleId');//选择Id
      var checkData = checkStatus.data;

      if(checkData.length === 0){
        return layer.msg('请选择数据');
      }

      layer.confirm('确定删除吗？', function(index) {
        //执行 Ajax 后重载
        $.ajax({
          url: "/LwxWeb/article/deleteArticles",
          method: "POST",
          contentType : "application/json",
          dataType : "json",
          data: JSON.stringify(checkData),
          success(res){
            if(res.code == 1){
              table.reload('articleId');
              layer.msg('删除成功');
            } else {
              layer.msg('删除失败');
            }
          },
          error(res){
            layer.msg('服务器问题');
          }
        })
      });
    },

    //添加功能
    add: function(){
      layer.open({
        type: 2
        ,title: '添加文章'
        ,content: 'addArticle.html'
        ,maxmin: true
        ,area: ['550px', '550px']
        ,btn: ['确定', '取消']
        ,yes: function(index, layero){
          //点击确认触发 iframe 内容中的按钮提交
          var submit = layero.find('iframe').contents().find("#layuiadmin-app-form-submit");
          submit.click();
        }
      });
    }
  };

3.4 单个删除与编辑

//监听行工具事件
  table.on('tool(LAY-app-content-list)', function (obj) {
    //单个删除
    if (obj.event === 'del') {
      layer.confirm('真的删除这篇博客吗', function (index) {
        var data = {
          articleId: obj.data.articleId
        }
        $.post({
          url: "/LwxWeb/article/deleteArticle",
          contentType : "application/json",
          dataType : "json",
          data: JSON.stringify(data),
          success(res) {
            if(res.code == 1){
              obj.del();
              layer.close(index);
            } else {
              layer.alert("删除失败")
            }
          },
          error(res){
            layer.alert("服务器失败")
          }
        })
      });

      //数据修改 把现有数据渲染上
    } else if (obj.event === 'edit') {
      layer.open({
        type: 2
        , content: 'editArticle.html'
        , area: ['550px', '550px']
        , maxmin: true
        //函数变量是固定的，不可以改变
        , success: function (layero, index) {
          var body = layer.getChildFrame('body', index);
          //在edit界面寻找数据填充地方
          body.find('input[name=articleId]').val(obj.data.articleId)
          body.find('input[name=title]').val(obj.data.title)
          body.find('input[id=getContent]').val(obj.data.content)
        }
      })
    }
  });

3.5 option渲染

//option种类渲染
  $.ajax({
    method: 'get',
    contentType : "application/json",
    dataType : "json",
    url: "/LwxWeb/category/listCategories",
    success(res) {
      if(res.code == 0){
        for (var i = 0; i < res.data.length; i++) {
          console.log(res.data[i].categoryId);
          $('#category').append('<option value="'+res.data[i].categoryId+'" >'+res.data[i].name+'</option>');
        }
        form.render('select');
      } else {
        layer.msg("无分类");
      }
    },
    error(){
      layer.msg("服务器问题");
    }
  });