精华内容
下载资源
问答
  • Node.js+layui后台管理系统,有表格的增删改查,自己开发的富文本编辑器配合后台,各种统计图展示。
  • layui后台框架修改分页条数

    千次阅读 2020-08-19 14:32:55
    layui后台框架修改分页条数 遇到客户想要layui后台分页条数筛选可以全部数据放在一页 在这里记录下修改步骤 右键审查元素可以看到页面元素指向标签 < select lay-ignore> 搜索< select lay-ignore>...

    layui后台框架修改分页条数

    遇到客户想要layui后台分页条数筛选可以全部数据放在一页
    在这里插入图片描述
    在这里记录下修改步骤

    右键审查元素可以看到页面元素指向标签<select lay-ignore>*
    在这里插入图片描述

    搜索<select lay-ignore>
    可以看到两个layui js文件里面有在这里插入图片描述

    在这里插入图片描述

    分别定位到 <select lay-ignore>标签位置
    可以看到后面return layui.each 遍历的分页条数的功能js

    直接在 标签</select>< /span> 前面加上一行

    <option value='"+a.count+"'"+(a.count===a.limit?"selected":"")+">"+a.count+"/</ option>
    

    在这里插入图片描述
    因为有两个文件,于是两个文件都放了。
    后面实现的效果就如第一张图
    在这里插入图片描述

    如果不想显示 数据条数,想显示 “全部 条/页”
    则修改

    < option value='"+a.count+"'"+(a.count===a.limit?"selected":"")+">全部 条/</ option>
    

    效果如图
    在这里插入图片描述

    展开全文
  • layui后台布局和数据表格

    千次阅读 2019-06-25 23:41:34
    文章目录layui的简介后台布局和数据表格 layui的简介 后台布局和数据表格

    layui的简介

    简介:layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。

    layui下载官网:https://www.layui.com/
    和其他的前端框架一样,需要导入它的js和css即可使用,layui需要导入的是

    ./layui/css/layui.css
    ./layui/layui.js //提示:如果是采用非模块化方式(最下面有讲解),此处可换成:./layui/layui.all.js

    导入好这两个就可以使用了

    经典模块化前端框架:这里所谓的模块化也就是它只有在每次调用了某个方法才会加载出那个方法的板块,不是一次性全部加载出来

    后台布局和数据表格

    今天实现在后台布局上实现数据表格的数据绑定,这是前台jsp代码。
    布局没什么好说的,照着API文档来就可以了

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/layui/layui.js"></script>
    
    <script type="text/javascript">
    
    /* layui.use(['jquery', 'layer'], function(){ 
    	  var $ = layui.$ //重点处
    	  ,layer = layui.layer;
    })
     */
    //数据表格
    layui.use('table', function(){
    	  var table = layui.table;
    	  table.render({
    	    elem: '#demo'
    	    ,url:'${pageContext.request.contextPath}/BookAction.action?methodName=list'
    	    ,method:'post'
    	    ,cellMinWidth: 80 //全局定义常规单元格的最小宽度,layui 2.2.1 新增
    	    ,cols: [[
    	      {field:'bid', width:180, title: 'ID', sort: true}//minWidth:局部定义当前单元格的最小宽度,layui 2.2.1 新增
    	      ,{field:'bname', width:180, title: '书名'}
    	      ,{field:'price', width:180, title: '价格'}
    	      ,{field:'right', title: '操作', width:250,toolbar:"#barDemo"}
    	    ]]
    	  })
    	})
    
    </script>
    
    <title>layui</title>
    </head>
    <body class="layui-layout-body">
    <div class="layui-layout layui-layout-admin">
      <div class="layui-header">
        <div class="layui-logo">后台管理</div>
        <!-- 头部区域(可配合layui已有的水平导航) -->
        <ul class="layui-nav layui-layout-left">
          <li class="layui-nav-item"><a href="">控制台</a></li>
          <li class="layui-nav-item"><a href="">商品管理</a></li>
          <li class="layui-nav-item"><a href="">用户</a></li>
          <li class="layui-nav-item">
            <a href="javascript:;">其它系统</a>
            <dl class="layui-nav-child">
              <dd><a href="">邮件管理</a></dd>
              <dd><a href="">消息管理</a></dd>
              <dd><a href="">授权管理</a></dd>
            </dl>
          </li>
        </ul>
        <ul class="layui-nav layui-layout-right">
          <li class="layui-nav-item">
            <a href="javascript:;">
              <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
              阳某
            </a>
            <dl class="layui-nav-child">
              <dd><a href="">基本资料</a></dd>
              <dd><a href="">安全设置</a></dd>
            </dl>
          </li>
          <li class="layui-nav-item"><a href="">退了</a></li>
        </ul>
      </div>
      
      <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
          <!-- 左侧导航区域(可配合layui已有的垂直导航) -->
          <ul class="layui-nav layui-nav-tree"  lay-filter="test">
            <li class="layui-nav-item layui-nav-itemed">
              <a class="" href="javascript:;">所有商品</a>
              <dl class="layui-nav-child">
                <dd><a href="javascript:;">列表一</a></dd>
                <dd><a href="javascript:;">列表二</a></dd>
                <dd><a href="javascript:;">列表三</a></dd>
                <dd><a href="">超链接</a></dd>
              </dl>
            </li>
            <li class="layui-nav-item">
              <a href="javascript:;">解决方案</a>
              <dl class="layui-nav-child">
                <dd><a href="javascript:;">列表一</a></dd>
                <dd><a href="javascript:;">列表二</a></dd>
                <dd><a href="">超链接</a></dd>
              </dl>
            </li>
            <li class="layui-nav-item"><a href="">云市场</a></li>
            <li class="layui-nav-item"><a href="">发布商品</a></li>
          </ul>
        </div>
      </div>
      
      <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">
        
        	<table id="demo" lay-filter="test"></table>
        	<script type="text/html" id="barDemo">
       			 <a class="layui-btn layui-btn-primary layui-btn-mini" lay-event="detail">查看</a>
       			 <a class="layui-btn layui-btn-mini" lay-event="edit">编辑</a>
      			 <a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">删除</a>
    		</script>
        	
        </div>
      </div>
      
      <div class="layui-footer">
        <!-- 底部固定区域 -->
        © layui.com - 底部固定区域
      </div>
    </div>
    
    </body>
    </html>
    

    主要是数据表格的数据格式要注意,把查出来的Json数据处理成layui能接收的数据格
    这是layui数据表格要求的数据格式

      ,parseData: function(res){ //res 即为原始返回的数据
        return {
          "code": res.status, //解析接口状态
          "msg": res.message, //解析提示文本
          "count": res.total, //解析数据长度
          "data": res.data.item //解析数据列表
        };
      }
    

    所以我们在查数据时就要处理一下,我是用的MVC,所以是在控制器进行处理就可以了

    	private BookDao bookDao=new BookDao();
    	
    	public String list(HttpServletRequest req,HttpServletResponse resp) throws JsonProcessingException, Exception {
    		PageBean pageBean=new PageBean();
    		pageBean.setRequest(req);
    		List<Map<String, Object>> list = this.bookDao.list(req.getParameterMap(),pageBean);
    		Map map=new HashMap();
    		map.put("data", list);
    		map.put("code", 0);
    		ObjectMapper om=new ObjectMapper();
    		ResponseUtil.write(resp, om.writeValueAsString(map));
    		return null;
    	}
    

    我们最后出来的结果是:
    在这里插入图片描述

    展开全文
  • 操作按钮 <!--操作--> <div style="display: none... <a permission="sys:role:edit" class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> <a permission="sys:role:delete" class=

    操作按钮

     <!--操作-->
            <div style="display: none" type="text/html" id="barTool">
                <a permission="sys:role:edit" class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                <a permission="sys:role:delete" class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
            </div>
    
    展开全文
  • 需求:后台管理系统一般都会有图文混排功能(比如新闻应用,电商商品详情),这个一般使用富文本编辑器来实现;还有一个就是图片的裁切(比如用户的头像)

    需求:后台管理系统一般都会有图文混排功能(比如新闻应用,电商商品详情),这个一般使用富文本编辑器来实现;还有一个就是图片的裁切(比如用户的头像,比如博客的封面),因为在开发这两个功能的时候,也遇到了很多的坑,所以在这里记录一下。

    富文本编辑器实现

    技术选型:富文本编辑器很多,我们选择的是layui editor,版本是2.5.6

    实现效果如下:                                   来源:layui eidt

    开发步骤:

    1、导入layui的css、layui的js(注意这里是2.5.6的版本)

    在body之前导入css,在body之后导入js文件(否则会有坑)

    2、在body中添加一个文本域

    <body>
        <form>
            ...省略其他表单元素
            <textarea id="content" style="display: none;"></textarea>
        </form>
    </body>

    3、初始化富文本编辑器

    layedit的实现思路,先找到一个宿主标签(textarea),在它的后面添加一个兄弟节点来实现的,所以宿主元素必须要写。其实尝试了一下,使用其他的标签作为宿主标签也可以。比如div,但是不建议这么干,因为div不是表单元素,提交数据拿不到值。

    注意:这个代码一定要在文档加载完成之后再执行,否则没效果,代码来源于文档

    <script>
    layui.use('layedit', function(){
      var layedit = layui.layedit;
    
      //build方法的demo参数是宿主标签的id属性,注意这里不需要加#号
      layedit.build('content'); //建立编辑器
    });
    </script>
          

    4、此时可以测试是否显示富文本编辑器,如果不显示,查询一下原因:

    1、js导入是不是在html最后

    2、第三步的初始化脚本是不是在文档加载完成后执行(在html最后)

    3、检查宿主标签的id属性和layedit.build方法的参数是否一致

    5、重点:

    在实际项目开发中,表单一般都是ajax异步提交的,那么就需要我们自己去收集表单元素(input,select、checkbox、radio、file、textarea)的数据。富文本编辑器中的内容通过提交按钮同步提交是可以收集到表单数据的,但是ajax提交收集不到,因为此时数据在富文本编辑器中,而我们要提交的是textarea,所以没有数据;我们还需要把富文本编辑器的内容获取到,然后设置到textarea中。

    所以查看文档:

    第3个方法getContent就能得到编辑器的内容,所以有两步需要做:

    1、得到编辑器的内容

    2、设置到textarea中

    layedit.getContent(index);    具体代码参考下图

    下图中getContent()方法就是获取编辑器中的值,设置值到textarea中的,这个方法在ajax提交之前调用即可。

    注意:106和107行,因为getContent调用需要使用index,而且是跨作用域的,所以设置成全局,layedit同理,否则出现变量未定义错误。

    图片上传:

    A用户写博客从A用户的电脑上传图片到服务器,将来其它用户就能访问到此图片,所以这个功能其实就是把A用户本地图片进行共享,上传的目的是为了把A用户本地图片转换成网址,这个网址其实是服务器上的图片服务器的地址,所以上传之后服务器会返回一个http打头的网址,然年通过<img src="网址">的方式在富文本编辑器中显示出来;根据文档,我们只需要填写服务器的图片上传接口地址即可。

    注意:layedit.set方法一定要写在layedit.build方法之前,否则没效果。url和后面的参数自己参考后台程序员提供的接口来实现

     

    图片裁切

    裁切的目的:保证每个人上传的图片的大小是一致的,而且不会变形

    技术选型:Image Cropper;文档写的一般,所以记录一下。

    展示效果如下:点击选择图片按钮弹出文件选择框选择图片,图片会同步显示到左侧裁切容器和右侧预览容器中。

    1、布局思路

    一个大盒子,里面两个小盒子

    2、功能实现

    2.1 点击选择图片按钮弹出文件选择框,根据html基础,只有<input type="file">它才能触发文件选择框,所以思路是,弄一个普通按钮,点击它的时候去触发<input type="file">的点击事件。

    //用到的知识点   jquery主动触发点击事件
    $().click()

    遇到的问题:layui中的button自动提交表单

    解决办法:给button添加type="button"属性即可

    2.2 上一步能弹出框,但是有一个问题,选择的文件在<input type="file">标签中,但是我们需要让这个图片显示到盒子1中,所以需要获取到<input type="file">里面的图片内容,但是查询文档百思不得其解,HTML文档DOM对象中说过,页面有一个<input type="file">,系统就会创建一个FileUpload对象,但是此对象中并没有图片的完整路径,但是<img src="">显示图片又需要完整路径,经过两天的百度,找到如下方法:getInputURL,也有其他的方案,大家自行选择。

      //选择完图片,点击确认按钮
        $("[type=file]").change(function() {
            console.log("改变事件");
            //拿到了文件对象,缺少路径
            var file = $(this)[0].files[0];
            //把FileUpload对象转换成一个地址,这个地址img能识别
            var p = getInputURL(file);
            $("img").prop("src", p);
        });
    
        function getInputURL(file) {
            var url = null;
            if (window.createObjcectURL != undefined) {
                url = window.createOjcectURL(file);
            } else if (window.URL != undefined) {
                url = window.URL.createObjectURL(file);
            } else if (window.webkitURL != undefined) {
                url = window.webkitURL.createObjectURL(file);
            }
            return url;
        }

    遇到的坑:

    $("img").prop("src",p);这句代码要注意,前面的选择器只能通过标签选择,否则会有一个问题,盒子1和小盒子1中的图片不能回显。

    2.3 图片选择好了之后如何提交?

    因为是ajax提交,图片其实在第三方组件中,并不是我们设置的提交表单元素,所以提交表单没有值,我们需要做两步:1、拿到裁切的图片  2、转换成base64   3、设置到表单元素中(采用隐藏域实现)

    1、拿到裁切的图片

    文档对于方法的介绍如下,只说过$().cropper("方法名",参数1,参数2....)这种语法,$()这是jquery的选择器,这种语法明显不对,查询文档找到这句话$('.container > img').cropper(),所以$(这里应该是盒子1中的img的标识),所以完整语法是:

    $('.container > img').cropper("方法名"),然后这个插件的方法很多,既然是要获取,所以方法肯定是get打头的,经过测试只有getCroppedCanvas方法才能实现,打印结果如下,<canvas width="400" height="240"></canvas>,是一个canvas标签,根据DOM常识,查询html5文档,canvas对象有一个方法可以转base64,toDataURLf方法

    在ajax提交表单之前调用此方法就可以拿到图片的base64字符串,然后把它设置到隐藏域

        function getBase64() {
            var result = $('.container > img').cropper("getCroppedCanvas");
            console.log(result);
            var base64 = result.toDataURL('image/png');
            $("#coverBase64").val(base64);
        }

    坑1:默认不给图片

    不给默认图片,裁切框出不来;这个跟插件的初始化方法有关系;两种解决办法:

    1、给个默认图片,纯白色

    2、延迟初始化

    坑2:不上传图片,使用默认的,直接点击按钮,报错导致表单提交失败

    设置一个变量flag=false,只有当用户点击上传图片按钮,把flag改成true,提交之前判断一下,如果flag=false,提示用户选择图片。

    总结:img标签可以支持的格式:file协议的、http协议的、base64编码的,blob格式的(blob:null/5c49ecbc-96d4-4ec6-8c0d-b77543c23e86)

    展开全文
  • springboot+Layui后台开发框架

    千次阅读 2020-08-13 20:09:32
    JavaWeb专业版,企业级开发框架SpringBoot+Layui+Thymeleaf+MybatisPlus开发权限(RBAC)及内容管理框架,框架中集成了权限管理、模块管理,数据库管理、富文本编辑器(已集成ueditor,kindeditor),后台支持多主题切换、...
  • springboot+Layui后台管理系统

    千次阅读 2020-08-13 20:08:55
    JavaWeb专业版,企业级开发框架SpringBoot+Layui+Thymeleaf+MybatisPlus开发权限(RBAC)及内容管理框架,框架中集成了权限管理、模块管理,数据库管理、富文本编辑器(已集成ueditor,kindeditor),后台支持多主题切换、...
  • RXThinkCMF_LV5.8_PRO旗舰版 基于 Laravel5.8+Layui2.5.6 开发权限(RBAC)及内容管理框架,框架中集成了权限管理、模块管理、插件管理、钩子管理、数据库管理、富文本编辑器(已集成ueditor,kindeditor),后台支持多...
  • layui后台框架的搭建

    万次阅读 2018-03-11 19:35:35
    layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写...layui 首个版本发布于2016年金秋,她区别于那些基于 MVVM 底层的 UI 框架,却并非逆道而行,而是信奉返璞归真之道。...
  • layui区别于那些基于MVVM底层的UI框架,不需要各种前端工具的复杂配置,只需面对浏览器本身。2.table 数据表格在进行代码编译之前,还是需要引入layui框架,在git中下载dist文件夹。(网址:https://github...
  • layui单元格编辑显示日期时间并提交后台 eg:注意此处的事件event,与下面对应 注:需要引用 laydate 模块 最终实现效果图:
  • 在使用layui后台布局时遇到了发布文章时使用百度富文本编辑器的兼容问题,有时文章写到了一半,无法回到首行,百度富文本编辑器菜单栏卡在顶部,只能手动操作。下面说下解决方案。 在页面或者css样式中引入一下css...
  • 1.layui介绍 layui是一款采用自身模块规范编写的前端UI框架,遵循原生HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用,非常适合界面的快速开发。layui区别于那些基于MVVM底层的UI框架,不需要各种前端工具的复杂...
  • 遇到客户不想要编辑之后,后台 form.render 或者table.reload 更新整个表格,想只局部更新被修改的单条数据。 将table.reload 改成 obj.update() 就好了 update()方法内部res.data为编辑后返回的data数据,注意处理...
  • 后台左侧点击 “添加”页面正确,具体链接如下 <li><a _href="admin/Article/index"><i class="iconfont">&#xe6a7;</i><cite>管理文章内容</cite></a></li> ...
  • JavaWeb专业版,企业级开发框架SpringBoot+Layui+Thymeleaf+MybatisPlus开发权限(RBAC)及内容管理框架,框架中集成了权限管理、模块管理,数据库管理、富文本编辑器(已集成ueditor,kindeditor),后台支持多主题切换、...
  • 闲的时候 自己写的一个python3后台管理系统,后台用的是最流行的django框架,前台用的jquery,lauyui,开发工具:pycharm 先展示: 登录页面 首页模块添加了历史记录,时间显示等模块 首页 菜单管理左侧树...
  • 首先从layui官网下载一个模板。下面我会先在MySQL数据库中新建一张用户信息表,来实现增加用户,删除用户,修改用户信息,批量删除用户。
  • 闲的时候 自己写的一个python3后台管理系统,此框架适合学习django基础使用,还有要升级的地方,后期待完善,希望兄弟们提出宝贵意见。后台用的是最流行的django框架,前台用的jquery,lauyui,开发工具:pycharm...
  • layui后台表格的增删改查

    千次阅读 2019-07-23 11:51:23
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑 <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除 td div.layui-table-cell{height:60px; line-height: 60px; position...
  • xadmin 的部分模板片段,首页导航栏 <#macro navLeft> <div class="left-nav"> <div id="side-nav"> <ul id="nav"> <li> <a href="javascript:;...i class=

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,652
精华内容 1,060
关键字:

layui后台编辑