文档章节

layui结合jfinal增删改查

一个yuanbeth
 一个yuanbeth
发布于 2017/09/11 07:39
字数 1010
阅读 133
收藏 1

一、遇到问题及解决

1、触发事件要先定义jq符号,然后在调用on方法,如

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

2、layui怎么打开弹出层的同时,调用后台方法,让弹出层显示后台返回的页面?解决方法如下: 这样就可以:

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

3、用layui结合jfinal,用form表单action的方式提交,怎么根据返回值判断是否操作成功? 用form表单action的方式提交,我没找到方法,我改为下面的方式:

  //监听提交
  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 >
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 >

2、新增编辑表单

<!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 >

3、查看表单

<!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>

4、后台java方法

	/**
	 * 渲染新增,编辑页面
	 */
	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);
		}
	}

三、至此,layui结合jfinal增删改查完毕

© 著作权归作者所有

共有 人打赏支持
一个yuanbeth
粉丝 82
博文 106
码字总数 67430
作品 0
深圳
程序员
加载中

评论(2)

一个yuanbeth
一个yuanbeth

引用来自“JFinal”的评论

layout 有更好的用法,可以参考一下 jfinal.com 官网的 jfinal demo 中的 __layout.html,这种用法是将 html head body 等等这类重复内容封装为一个 layout,然后实际的内容部分是页面主体

好的,多谢指教
JFinal
JFinal
layout 有更好的用法,可以参考一下 jfinal.com 官网的 jfinal demo 中的 __layout.html,这种用法是将 html head body 等等这类重复内容封装为一个 layout,然后实际的内容部分是页面主体
分享一个自己写的JFinal的BaseController (2)

分享一个自己写的JFinal的BaseController (1) 经过@JFinal 的提示,改进了下BaseController ================================ 3月10号又有改进 分享一个自己写的JFinal的BaseController (3...

本人纯属虚构
2014/02/28
0
5
jfinal cms v4.7.1 发布,升级 jfinal 到 最新 3.4 版本

经历了互联网研发人员加班模式,最近动静比较小(也可能是质量比较好了~!~); 该版本bug修复: jfinal 改为最新3.4版本 修复启动缓存设置不生效bug 其他细节修改 上一版本更新说明: 组织机...

Fly的狐狸
09/04
0
0
springrain vs jfianl的开发对比

废话不说,上实例 使用 jfinal最新版本 1.4 的 blog demo. 如果使用springrain 该怎么做呢? 总共分三步: 1.编写blog.sql 建表语句,花费2分钟左右时间 2.执行代码生成器,gen blog 并把生成文件...

光石头
2013/09/07
0
21
基于 jfinal 的内容发布系统 - wxcms

项目介绍 wxcms 是一个内容发布系统。 一,使用的相关技术 (1)jfinal作为核心框架,感谢波总开源如此好用的框架 (2)使用shiro作权限控制 (3)整合了百度编辑器ueditor (4)使用mysql数...

风灬云
09/19
0
0
JFinal框架学习------整合bootstrap前端框架,实现简单的增删改查功能

Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。 一、JFinal整合bootstrap 1.下载bootstrap包:下载...

Carol998
08/31
0
0

没有更多内容

加载失败,请刷新页面

加载更多

学习设计模式——中介者模式

1. 认识中介者模式 1. 定义:用一个中介对象来封装一系列的对象交互行为,中介者使得各对象不需要显式的互相引用,从而使其松散耦合,独立的改变他们之间的交互。 2. 结构: Mediator:中介者...

江左煤郎
17分钟前
0
0
深入理解Plasma(1):Plasma 框架

这一系列文章将围绕以太坊的二层扩容框架,介绍其基本运行原理,具体操作细节,安全性讨论以及未来研究方向等。本篇文章作为开篇,主要目的是理解 Plasma 框架。 Plasma 作为以太坊的二层扩容...

HiBlock
24分钟前
0
0
Java 8 日期 示例

Java 8 推出了全新的日期时间API。Java处理日期、日历和时间的方式一直为社区所诟病,将 java.util.Date设定为可变类型,以及SimpleDateFormat的非线程安全使其应用非常受限。Java也意识到需...

阿刚ABC
50分钟前
1
0
RxJava操作符lift 笔记

在内部,每个Rx operator都做3件事: 它订阅源并观察值。 它根据操作员的目的转换观察到的序列。 它通过调用onNext,onError和onCompleted将修改后的序列推送到自己的订阅者。 compose运算符...

woshixin
51分钟前
1
0
lnmp+coreseek实现站内全文检索(安装篇)

软件安装包 安装环境 系统环境 centos7.2 1核2G 软件环境 coreseek-3.2.14 lnmp1.5 安装mmseg 更新依赖包和安装编译环境 yum -y install m4 autoconf automake libtoolyum -y install gcc g...

毛毛雨rain
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部