Layui入门&动态树&动态选项卡&用户增加&修改&删除&（一）

<div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <ul class="layui-nav layui-nav-tree" lay-filter="test" id="layui_menus">
        <li class="layui-nav-item layui-nav-itemed">
          <a class="" href="javascript:;">menu group 1</a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;" onclick="openTab('','','')">menu 1</a></dd>
            <dd><a href="javascript:;">menu 2</a></dd>
            <dd><a href="javascript:;">menu 3</a></dd>
            <dd><a href="">the links</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">menu group 2</a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;">list 1</a></dd>
            <dd><a href="javascript:;">list 2</a></dd>
            <dd><a href="">超链接</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item"><a href="javascript:;">click menu item</a></li>
        <li class="layui-nav-item"><a href="">the links</a></li>
      </ul>
    </div>
  </div>

let layer,$,element;
layui.use(['jquery', 'layer', 'element'], function(){
  layer = layui.layer
  ,$ = layui.jquery
  ,element = layui.element;
  $.ajax({
    url:'${pageContext.request.contextPath }/permission.action?methodName=menus'
    ,dataType:'json'
    ,success:function(data){
      let htmlstr = '';
      let json = data.data;
      $.each(json,function(i,n){
        htmlstr += '<li class="layui-nav-item layui-nav-itemed">';
        htmlstr += ' <a class="" href="javascript:;">'+json[i].text+'</a>';
        if(json[i].hasChildren){
          let children = json[i].children;
          $.each(children,function(index,node){
            htmlstr += '<dl class="layui-nav-child">';
            htmlstr += '<dd><a href="javascript:;" onclick="openTab(\''+children[index].text+'\',\''+children[index].attributes.self.url+'\',\''+children[index].id+'\');" >'+children[index].text+'</a></dd>';
            htmlstr += '</dl>';
          });
        }
        htmlstr += '</li>';
      })
      $("#layui_menus").html(htmlstr);
    }
  });
});

<style>
  .layui-tab-title>li:first-child>i{
    display:none;
  }
  .layui-tab>.layui-tab-content{
    padding:0px;
  }
  body,html{
    padding:0px;
    margin:0px;
    overflow:hidden;
  }
</style>

<div class="layui-body">
    <!-- 内容主体区域 -->
    <div style="padding: 15px;">
      <div class="layui-tab" lay-filter="openTab" lay-allowclose="true">
      <ul class="layui-tab-title">
        <li class="layui-this" lay-id="-1">首页</li>
      </ul>
      <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">首页内容</div>
      </div>
    </div>
    </div>

function openTab(title,url,id){
  let $node = $("li[lay-id='"+id+"']");
  if($node.length == 0){
    element.tabAdd('openTab', {
        title: title
        ,content: "<iframe frameborder='0' src='"+url+"' scrolling='auto' style='width:100%;height:100%;'></iframe>"
        ,id: id
      })
  }
  element.tabChange('openTab', id); //切换到：用户管理
}

package com.zking.entity;
public class User {
    private Long id;
    private String name;
    private String loginName;
    private String pwd;
    private Long rid;
  public Long getId() {
    return id;
  }
  public void setId(Long id) {
    this.id = id;
  }
  public String getName() {
    return name;
  }
  public void setName(String name) {
    this.name = name;
  }
  public String getLoginName() {
    return loginName;
  }
  public void setLoginName(String loginName) {
    this.loginName = loginName;
  }
  public String getPwd() {
    return pwd;
  }
  public void setPwd(String pwd) {
    this.pwd = pwd;
  }
  public Long getRid() {
    return rid;
  }
  public void setRid(Long rid) {
    this.rid = rid;
  }
  public User() {
    super();
    // TODO Auto-generated constructor stub
  }
  @Override
  public String toString() {
    return "User [id=" + id + ", name=" + name + ", loginName=" + loginName + ", pwd=" + pwd + ", rid=" + rid + "]";
  }
}

package com.zking.dao;
import java.util.List;
import com.zking.entity.User;
import com.zking.util.BaseDao;
import com.zking.util.PageBean;
import com.zking.util.StringUtils;
public class UserDao extends BaseDao<User> {
  public User login(User user, PageBean pageBean) throws Exception {
    String loginName = user.getLoginName();
    String pwd = user.getPwd();
    String sql = "select * from t_oa_user where loginname = '" + loginName + "' and pwd = '"+pwd+"'";
    List<User> users = super.executeQuery(sql, User.class, pageBean);
    return users == null || users.size() == 0 ? null : users.get(0);
  }
}

package com.zking.web;
import java.util.List;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.zking.dao.UserDao;
import com.zking.entity.User;
import com.zking.framework.ActionSupport;
import com.zking.framework.ModelDriver;
import com.zking.util.CommonUtils;
import com.zking.util.PageBean;
import com.zking.util.R;
import com.zking.util.ResponseUtil;
public class UserAction extends ActionSupport implements ModelDriver<User> {
  private User user = new User();
  private UserDao userDao = new UserDao();
  public String login(HttpServletRequest req, HttpServletResponse resp) {
    try {
      User u = userDao.login(user, null);
      if (u != null) {
        ResponseUtil.writeJson(resp, R.ok(200, "登录成功"));
        req.getSession().setAttribute("user", u);
      }else {
        ResponseUtil.writeJson(resp, R.error(0, "登录失败"));
      }
    } catch (Exception e) {
      e.printStackTrace();
      try {
        ResponseUtil.writeJson(resp, R.error(0, "登录失败"));
      } catch (Exception e1) {
        e1.printStackTrace();
      }
    }
    return null;
  }
  @Override
  public User getModel() {
    return user;
  }
}

package com.zking.util;
import java.util.HashMap;
public class R extends HashMap{
  public R data(String key, Object value) {
    this.put(key, value);
    return this;
  }
  public static R ok(int code, String msg) {
    R r = new R();
    r.data("success", true).data("code", code).data("msg", msg);
    return r;
  }
  public static R error(int code, String msg) {
    R r = new R();
    r.data("success", false).data("code", code).data("msg", msg);
    return r;
  }
  public static R ok(int code, String msg,Object data) {
    R r = new R();
    r.data("success", true).data("code", code).data("msg", msg).data("data", data);
    return r;
  }
  public static R ok(int code, String msg, long count, Object data) {
    R r = new R();
    r.data("success", true).data("code", code).data("msg", msg).data("count", count).data("data", data);
    return r;
  }
}