文档章节

layui结合jfinal增删改查

一个yuanbeth
 一个yuanbeth
发布于 2017/09/11 07:39
字数 1010
阅读 120
收藏 1
点赞 1
评论 2

一、遇到问题及解决

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
粉丝 74
博文 85
码字总数 49333
作品 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 3.4 发布,将极速贯彻到 UI 层

jfinal 的终极目标是全面实现软件开发整个过程的极速开发,极大提升开发效率,极大降低学习成本,极大提升开发体验 jfinal 诞生头五年,已实现 WEB + ORM + AOP 层面的极速开发,赢得了大量开...

JFinal ⋅ 04/28 ⋅ 129

JAVA 极速WEB+ORM框架 - JFinal

JFinal 是基于 Java 语言的极速 WEB + ORM 框架,其核心设计目标是开发迅速、代码量少、学习简单、功能强大、轻量级、易扩展、Restful。在拥有Java语言所有优势的同时再拥有ruby、python、p...

JFinal ⋅ 2012/03/18 ⋅ 496

JFinal 1.6可以无缝升级到最高哪个版本?

大约在JFinal 1.6的时候做了一个项目,一直运行至今。中途没升级也没做功能扩展,时至今日,需要做功能升级了,但是时隔太久远,基本不记得JFinal这个框架一路过来的升级过程了。所以想请求帮...

车开源 ⋅ 05/11 ⋅ 0

JFinal如何使用JNDI连接数据库

想用JNDI的方式连接数据库,但是JFinal中用的是DruidPlugin和ActiveRecordPlugin,没有看到用DataSource的地方?请问JFinal支持JNDI连接方式吗?怎么具体实现?...

zqq3436 ⋅ 06/11 ⋅ 0

Jboot v1.4.9 发布,核心 JFinal 升级到 3.4 最新版本

Jboot 是一个基于 JFinal 和 Undertow 开发的微服务框架。提供了 AOP、RPC、分布式缓存、限流、降级、熔断、统一配置中心、Opentracing 数据追踪、metrics 数据监控、分布式 session、代码生...

理工男海哥 ⋅ 05/03 ⋅ 0

jfinal兼容oracle integer字段

为什么oracle integer字段用了number(3,0),jfinal生成的字段还是BigDecimal @jfinal

tianxia007 ⋅ 05/02 ⋅ 0

基于注释自动生成 API 文档 - Regan API

Regan API 前言 Regan API 项目是基于注释自动生成api文档,很大缩短了开始与后期维护API接口文档的时间。 Regan API 利用jdk提供的Doclet 类读取文档注释,可手动配置需要读取的文件,同时增...

Jeff_Regan ⋅ 06/15 ⋅ 0

kiplinglee/jfinal-ioc-plugin

jfinal-ioc-plugin JFinal 依赖注入插件 1.在JFinalConfig文件中配置IOC插件 @Overridepublic void configConstant(Constants me) { // 创建controller实现依赖注入me.setControllerFactory......

kiplinglee ⋅ 04/13 ⋅ 0

JFinal(1.6)在Validator里执行过getFile,在Controller里取不到文件

JFinal在Validator里执行过getFile之后Validator中是可以取到文件及有关信息,但是在Controller里取不到文件,是不是我的姿势不正确?@JFinal

车开源 ⋅ 05/15 ⋅ 0

jfinal-admin 3.2 发布,beetl 模板升级到 2.7.14

jfinal-admin 3.2 版本正式发布啦。 基于JFinal的后台管理系统,采用了简洁强大的JFinal作为web框架,模板引擎用的是beetl,数据库用mysql,前端bootstrap框架。 演示地址 http://jad.yxyun...

IT小香猪 ⋅ 04/19 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

JavaScript零基础入门——(八)JavaScript的数组

JavaScript零基础入门——(八)JavaScript的数组 欢迎大家回到我们的JavaScript零基础入门,上一节课我们讲了有关JavaScript正则表达式的相关知识点,便于大家更好的对字符串进行处理。这一...

JandenMa ⋅ 今天 ⋅ 0

sbt网络问题解决方案

转自:http://dblab.xmu.edu.cn/blog/maven-network-problem/ cd ~/.sbt/launchers/0.13.9unzip -q ./sbt-launch.jar 修改 vi sbt/sbt.boot.properties 增加一个oschina库地址: [reposit......

狐狸老侠 ⋅ 今天 ⋅ 0

大数据,必须掌握的10项顶级安全技术

我们看到越来越多的数据泄漏事故、勒索软件和其他类型的网络攻击,这使得安全成为一个热门话题。 去年,企业IT面临的威胁仍然处于非常高的水平,每天都会看到媒体报道大量数据泄漏事故和攻击...

p柯西 ⋅ 今天 ⋅ 0

Linux下安装配置Hadoop2.7.6

前提 安装jdk 下载 wget http://mirrors.hust.edu.cn/apache/hadoop/common/hadoop-2.7.6/hadoop-2.7.6.tar.gz 解压 配置 vim /etc/profile # 配置java环境变量 export JAVA_HOME=/opt/jdk1......

晨猫 ⋅ 今天 ⋅ 0

crontab工具介绍

crontab crontab 是一个用于设置周期性被执行的任务工具。 周期性执行的任务列表称为Cron Table crontab(选项)(参数) -e:编辑该用户的计时器设置; -l:列出该用户的计时器设置; -r:删除该...

Linux学习笔记 ⋅ 今天 ⋅ 0

深入Java多线程——Java内存模型深入(2)

5. final域的内存语义 5.1 final域的重排序规则 1.对于final域,编译器和处理器要遵守两个重排序规则: (1)在构造函数内对一个final域的写入,与随后把这个被构造对象的引用赋值给一个引用...

江左煤郎 ⋅ 今天 ⋅ 0

面试-正向代理和反向代理

面试-正向代理和反向代理 Nginx 是一个高性能的反向代理服务器,但同时也支持正向代理方式的配置。

秋日芒草 ⋅ 今天 ⋅ 0

Spring 依赖注入(DI)

1、Setter方法注入: 通过设置方法注入依赖。这种方法既简单又常用。 类中定义set()方法: public class HelloWorldOutput{ HelloWorld helloWorld; public void setHelloWorld...

霍淇滨 ⋅ 昨天 ⋅ 0

马氏距离与欧氏距离

马氏距离 马氏距离也可以定义为两个服从同一分布并且其协方差矩阵为Σ的随机变量之间的差异程度。 如果协方差矩阵为单位矩阵,那么马氏距离就简化为欧氏距离,如果协方差矩阵为对角阵,则其也...

漫步当下 ⋅ 昨天 ⋅ 0

聊聊spring cloud的RequestRateLimiterGatewayFilter

序 本文主要研究一下spring cloud的RequestRateLimiterGatewayFilter GatewayAutoConfiguration @Configuration@ConditionalOnProperty(name = "spring.cloud.gateway.enabled", matchIfMi......

go4it ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部