layui結合jfinal增刪改查

時間 2019-12-06

原文原文鏈接

1、遇到問題及解決javascript

一、觸發事件要先定義jq符號，而後在調用on方法，如html

var $ = layui.$;
  //新增用戶
  $('.userTable #add').on('click', function(){
  });

二、layui怎麼打開彈出層的同時，調用後臺方法，讓彈出層顯示後臺返回的頁面?解決方法以下：這樣就能夠：java

layer.open({
          type: 2
          ,title:'查看'
          ,content:'/user/form?id=789a3bf1265e4e00ba0b2cdb57c5f615'
      });

三、用layui結合jfinal，用form表單action的方式提交，怎麼根據返回值判斷是否操做成功？用form表單action的方式提交，我沒找到方法，我改成下面的方式：ajax

//監聽提交
  form.on('submit(userSubmit)', function(data){
	  $.post('/user/save',data.field,function(result){
		  if(result==0){
			  layer.msg('提交成功！',
			    function(){
				  window.parent.location.reload();
			     });
			     }else{
			       layer.msg('提交失敗！');
			 }
		});
		return false;
  });

2、增刪改查點擊事件及彈出彈出框工具

< script >
layui.use('table', function ()
{
    var table = layui.table;
    var $ = layui.$;
    
    //監聽工具條
    table.on('tool(user)', function (obj)
    {
        //列表全部屬性及數據
        var data = obj.data;
        
        //列表事件（查看）
        if (obj.event === 'detail')
        {
            checkUser(data.id);
        }
        
        //列表事件（刪除）
        if (obj.event === 'del')
        {
            layer.confirm('真的刪除行麼', function (index)
            {
                deleteUser(data.id);
                layer.close(index);
            } );
        }
        
        //列表事件（編輯）
        if (obj.event === 'edit')
        {
            editUser(data.id);
        }
    });
    
    //新增用戶
    $('.userTable #add').on('click', function ()
    {
        addUser()
    });
});

//查看用戶
function checkUser(userId)
{
    layer.open(
    {
        type : 2,
        title : '查看',
        content : '/user/view?id=' + userId,
        area : ['450px', '450px'],
        closeBtn : 1
    });
}

//刪除用戶
function deleteUser(userId)
{
    $.ajax(
    {
        type : 'get',
        url : "/user/delete?id=" + userId,
        success : function (flag)
        {
            if (flag == 0)
            {
                layer.msg('刪除成功！',
                    function ()
                {
                    window.parent.location.reload();
                });
            }
            else
            {
                layer.msg('刪除失敗！');
            }
        }
        
    });
}

//新增用戶
function addUser()
{
    layer.open(
    {
        type : 2,
        title : '新增',
        content : '/user/form',
        area : ['450px', '450px'],
        closeBtn : 1
    });
}

//編輯用戶
function editUser(userId)
{
    layer.open(
    {
        type : 2,
        title : '編輯',
        content : '/user/form?id=' + userId,
        area : ['450px', '450px'],
        closeBtn : 1
    });
}
<  / script >

二、新增編輯表單post

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
</head>

<body>
  #@form_layout()

  <form class="layui-form">
    <div class="layui-form-item">
      <label class="layui-form-label">用戶名</label>

      <div class="layui-input-inline">
        <input name="user.id" class="layui-input" type="hidden" value="#(user.id??)" /> <input name="user.user_name" class="layui-input" value="#(user.user_name??)" />
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">郵箱</label>

      <div class="layui-input-inline">
        <input name="user.email" class="layui-input" value="#(user.email??)" />
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">手機號</label>

      <div class="layui-input-inline">
        <input name="user.telephone" class="layui-input" value="#(user.telephone??)" />
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">性別</label>

      <div class="layui-input-inline">
        <input name="user.sex" value="1" title="男" type="radio" checked="checked" /> <input name="user.sex" value="2" title="女" type="radio" checked="checked" />
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">崗位</label>

      <div class="layui-input-inline">
        <select name="user.post" lay-filter="aihao">
          <option value="1" selected="selected">
            行政
          </option>

          <option value="2" selected="selected">
            UI
          </option>

          <option value="3" selected="selected">
            測試
          </option>

          <option value="4" selected="selected">
            開發
          </option>
        </select>
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">地址</label>

      <div class="layui-input-inline">
        <input name="user.adress" class="layui-input" value="#(user.adress??)" />
      </div>
    </div>

    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit="" lay-filter="userSubmit">當即提交</button> <button type="reset" class="layui-btn layui-btn-primary">重置</button>
      </div>
    </div>
  </form>
</body>
</html>

< script >
layui.use('form', function ()
{
    var form = layui.form;
    var $ = layui.$;
    
    //監聽提交
    form.on('submit(userSubmit)', function (data)
    {
        $.post('/user/save', data.field, function (result)
        {
            if (result == 0)
            {
                layer.msg('提交成功！',
                    function ()
                {
                    window.parent.location.reload();
                });
            }
            else
            {
                layer.msg('提交失敗！');
            }
        });
        return false;
    });
});
<  / script >

三、查看錶單測試

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
</head>

<body>
  #@form_layout()

  <form class="layui-form">
    <div class="layui-form-item">
      <label class="layui-form-label">用戶名</label> <label class="layui-form-label">#(user.user_name)</label>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">郵箱</label> <label class="layui-form-label">#(user.email)</label>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">手機號</label> <label class="layui-form-label">#(user.telephone)</label>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">性別</label> #if(user.sex??==1) <label class="layui-form-label">男</label> #end #if(user.sex??==2) <label class="layui-form-label">女</label> #end
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">崗位</label> #if(user.post??=="1") <label class="layui-form-label">行政</label> #end #if(user.post??=="2") <label class="layui-form-label">UI</label> #end #if(user.post??=="3") <label class="layui-form-label">測試</label> #end #if(user.post??=="4") <label class="layui-form-label">開發</label> #end
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">地址</label> <label class="layui-form-label">#(user.adress)</label>
    </div>
  </form><script type="text/javascript">
//<![CDATA[
  layui.use('form', function(){
  var form = layui.form;
  });
  //]]>
  </script>
</body>
</html>

四、後臺java方法ui

/**
	 * 渲染新增，編輯頁面
	 */
	public void form(){
		String id = getPara("id");
		User user = userService.findUserById(id);
		if(StrKit.notBlank(id)){
		    setAttr("user", user);
		}
		render("form.html");
	}
	
	/**
	 * 新增，編輯 
	 */
	public void save(){
	User user =	getModel(User.class);
	 boolean isSuccess = user.saveOrUpdate();
	 if(isSuccess) {
			renderJson(0);//保存成功
		} else {
			renderJson(2);//保存失敗			
		}
	}
	
	/**
	 * 查看
	 */
	public void view(){
		String id = getPara("id");
		User user = userService.findUserById(id);
		setAttr("user", user);
		render("view.html");
	}

	/**
	 * 根據用戶id刪除用戶
	 */
	public void delete() {
		String id = getPara("id");
		boolean flag = userService.deleteById(id);
		if(flag) {
			renderJson(0);
		} else {
			renderJson(1);
		}
	}

3、至此，layui結合jfinal增刪改查完畢url

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。