精华内容
下载资源
问答
  • layui数据表格数据字典转换实现

    千次阅读 2018-11-09 15:35:01
    项目中使用了贤心大大的layui(零门槛开箱即用的前端UI解决方案),但是目前缺失数据表格数据字典的转换功能(本人是没找到),以下是解决方法:延用layui中的laytpl模版引擎。 1.下载dwr的依赖包 <...

    前言

    项目中使用了贤心大大的layui(零门槛开箱即用的前端UI解决方案),但是目前缺失数据表格数据字典的转换功能(本人是没找到),以下是解决方法:延用layui中的laytpl模版引擎。

    1.下载dwr的依赖包

    <dependency>
        <groupId>org.directwebremoting</groupId>
        <artifactId>dwr</artifactId>
        <version>3.0.2-RELEASE</version>
    </dependency>
    

    2. spring纯注解配置dwr的servlet

    private void initializeDwrServlet(ServletContext servletContext) {
        Dynamic myServlet =
                servletContext.addServlet("dwr", DwrServlet.class);
        Map<String, String> initParameters=new HashMap<String, String>();
        initParameters.put("debug","true");        //参数配置
        myServlet.setInitParameters(initParameters);
        myServlet.addMapping("/dwr/*");
    }
    

    记得在项目初始化入口调用此方法,xml配置的可以写到web.xml中,这里不作说明。

    3创建dwr.xml

    此文件路径需放置在web-inf下

    <!DOCTYPE dwr PUBLIC
            "-//GetAhead Limited//DTD Direct Web Remoting 3.0//EN"
            "http://getahead.org/dwr/dwr30.dtd">
    
    <dwr>
        <allow>
            <create creator="new" javascript="dictionary">
                <param name="class"  value="com.util.DictionaryUtil"/>
            </create>
        </allow>
    </dwr>
    

    创建DictionaryUtil后台转换数据字典静态方法:

    public class DictionaryUtil {
        public static String getValue(String sCatalog, String sKey) {
          //从缓存中读取数据字典,返回值返回
            return value;
        }
    }
    

    4 配置成功说明

    ip/应用/dwr/test/dictionary; 浏览器输入地址出现页面则说明配置成功。
    

    页面会有两个js路径,记录好路径即可,在调用页面需要引入engine.js和dictionary.js(根据配置文件中的名称而来)

    5公共的js方法

    var Dictionaryvalue = function(catalogcode,key){ //1.数据字典编码2参数key
        var dicvalue;
        Dictionary.getValue(catalogcode,key,{
            callback:function(data){dicvalue = data;
            },
            async:false
        }  );
        return  dicvalue;
    }
    

    6 layui数据表格调用

    <th lay-data="{field:'temptype',templet: '#temptypeTpl'}">类型</th>
    <script type="text/html" id="temptypeTpl">
       {{Dictionaryvalue('dispatchFileType',d.temptype)}}
    </script>
    
    
    展开全文
  • 最近在使用layui,发现table初始化时并不支持枚举类型的转换(也许有,可能是我不太了解),搜索了半天,网上说可以用dwr实现(搭建起来,表格的展现速度并不快,我有5-6个字典,展现需要5-8s),不管怎样,也总结...

    最近在使用layui,发现table初始化时并不支持枚举类型的转换(也许有,可能是我不太了解),搜索了半天,网上说可以用dwr实现(搭建起来,表格的展现速度并不快,我有5-6个字典,展现需要5-8s),不管怎样,也总结一下:

    PS:我使用的是springboot

    1、pom.xml中加入依赖包

    <dependency>
        <groupId>org.directwebremoting</groupId>
        <artifactId>dwr</artifactId>
        <version>3.0.2-RELEASE</version>
    </dependency>

    2、获取字典表转换的类(实现类)

    public class DictionaryUtil {
    	public static String getValue(String className, String sKey) {
    		switch (className) {
    		case "111":
    			return xxx.getValue(sKey);
                ........
    		default:
    			return "";
    		}
    	}

    3、纯java代码的dwr配置

    import org.directwebremoting.Container;
    import org.directwebremoting.create.NewCreator;
    import org.directwebremoting.extend.Configurator;
    import org.directwebremoting.extend.CreatorManager;
    
    /**
     * @author 
     * @Package
     * @Description: dwr的xml配置
     * @date 2020/02/11 19:19
     */
    public class DwrXml implements Configurator {
    
        @Override
        public void configure(Container container) {
            CreatorManager creatorManager = container.getBean(CreatorManager.class);
            NewCreator creator = new NewCreator();
            creator.setClass("com.pay.dwr.config.DictionaryUtil");//此处配置您的实现类
            creator.setJavascript("dictionary");//这个是生成javascrit的名字
            creatorManager.addCreator(creator);
        }
    
    }
    
    
    
    
    
    package com.pay.dwr.config;
    
    import org.directwebremoting.servlet.DwrListener;
    import org.directwebremoting.servlet.DwrServlet;
    import org.springframework.boot.web.servlet.ServletListenerRegistrationBean;
    import org.springframework.boot.web.servlet.ServletRegistrationBean;
    import org.springframework.context.annotation.Bean;
    import org.springframework.context.annotation.Configuration;
    
    import java.util.HashMap;
    import java.util.Map;
    
    /**
     * @author 
     * @Package 
     * @Description: 远程服务端ajax
     * @date 2020/02/11 19:17
     */
    @Configuration
    public class DwrConfig {
        @Bean
        public ServletRegistrationBean dwr() {
            ServletRegistrationBean servlet = new ServletRegistrationBean(new DwrServlet(), "/dwr/*");
            Map<String, String> initParam = new HashMap<>();
            initParam.put("crossDomainSessionSecurity", "false");
            initParam.put("allowScriptTagRemoting", "true");
            initParam.put("classes", "java.lang.Object");
            initParam.put("activeReverseAjaxEnabled", "true");
            initParam.put("initApplicationScopeCreatorsAtStartup", "true");
            initParam.put("maxWaitAfterWrite", "60000");
            initParam.put("debug", "true");
            initParam.put("logLevel", "WARN");
            //自定义配置,org.directwebremoting.impl.StartupUtil#configureFromInitParams name.equals("customConfigurator")
            //DwrServlet#init 初始化this.container
            initParam.put("customConfigurator", "com.ndpay.dwr.config.DwrXml");///此处配置您上一个配置xml的包路径
            servlet.setInitParameters(initParam);
            return servlet;
        }
    
        @Bean
        public ServletListenerRegistrationBean dwrListener() {
            return new ServletListenerRegistrationBean(new DwrListener());
        }
    
    }

    4、配置成功后,访问
    i:端口/应用/dwr/test/dictionary;这个页面可以提供你调用的测试,上面可以看到有三个js,把这三个js放到对应路径下,鸡然后加入到你要添加数据字典的页面中,截图如下。

    可以在getValue中做测试

    加入html页面中

    5、 在html页面中加入js调用方法

    <script type="text/javascript">
    var Dictionaryvalue = function(catalogcode,key){
    	var dicvalue;
    	dictionary.getValue(catalogcode,key,{
            callback:function(data){
    			dicvalue = data;
            },
            async:false
        });
        return  dicvalue;
      }; 
    </script>
    

    调用方法

    {title: '状态', templet: '#job-status'}
    <script type="text/html" id="job-status">
     {{Dictionaryvalue('xxx',d.xxx)}}
    </script>


    ps如果有两个字典,无法实现Dictionaryvalue方法公用(我也不知道原因,也许是作用范围有限吧),建议使用
    {title: '审批状态',templet: function(d){ return Dictionaryvalue('xxx',d.xxx)},minWidth: 120},
                    

    展开全文
  • layui 数据表格,简单使用

    千次阅读 2018-12-15 16:16:18
    layui数据表格简单使用: 其中关于后台的数据操作都忽略了:其实基本构好前端,提供接口了,后台就一步一步实现即可:我的一般是从controller-&gt;service接口-&gt;service实现-&gt;mapper接口-&gt;...

    layui数据表格简单使用:

    其中关于后台的数据操作都忽略了:其实基本构好前端,提供接口了,后台就一步一步实现即可:我的一般是从controller->service接口->service实现->mapper接口->mapper.xml数据库操作(mybatis的话)
    1.html页面,需要标明table的ID
    table的:

    <table id="userList" lay-filter="userList"></table>
    

    工具列的:

    <script type="text/html" id="userBar">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-sm" lay-event="detail">查看</button>
                <button class="layui-btn layui-btn-sm" lay-event="edit">编辑</button>
                <button class="layui-btn layui-btn-danger  layui-btn-sm" lay-event="changeStu">删除</button>
            </div>
        </script>
    

    其中lay-event 是用来监听事件的,同table一样,绑定是靠#id
    2.js则是控制数据和列内容
    要关联到table 其中首先要layui.use([],function(){
    let xx=layui.xx;
    表格渲染则是:table.render({
    其中就是各种属性
    elem:“#userList” 必填的关联html中的table 的 #id
    id:则是用来多次渲染,所定位的table
    ,url: ‘/meiman/admin/api/memberList’ //数据接口,相应后台组装返回的数据(但是格式可能会不是json,就需要解析parseData:function())
    where:可以做动态筛选数据的条件
    page:true开启分页
    text:数据加载失败的显示
    cols[[//等等常用属性:注意:这里必须是 [[{},{}…]] 类型的格式
    {filed:返回数据字段名,title:列头,width,sort,fixed,aligin,toolbar:"#userBar"},
    {…}
    ]]
    //如果你想重新规定返回的数据格式,那么可以借助 response 参数,如:
    ,response: {
    statusName: ‘status’ //规定数据状态的字段名称,默认:code
    ,statusCode: 200 //规定成功的状态码,默认:0
    ,msgName: ‘hint’ //规定状态信息的字段名称,默认:msg
    ,countName: ‘total’ //规定数据总数的字段名称,默认:count
    ,dataName: ‘rows’ //规定数据列表的字段名称,默认:data
    }
    ,parseData: function(res){ //res 后台组装原始返回的数据
    return {
    “code”: res.status, //解析接口状态
    “msg”: res.message, //解析提示文本
    “count”: res.total, //解析数据长度
    “data”: res.data.item //解析数据列表,后台返回的item应该解析出来是 [{},{}…] 这样的数组类型
    },
    done: function(){//可用来控制显示文本等操作参数可传res(接口返回的信息), curr(得到当前页码), 只有一 个done:function,再函数里面分别做处理就ok,多个done,就只有最后一个生效。
    count(总数据条数)
    //如果是异步请求数据方式,res即为你接口返回的信息。
    //如果是直接赋值的方式,res即为:{data: [], count: 99} data为当前页数据、count为数据总长度
    KaTeX parse error: Expected '}', got 'EOF' at end of input: … if((this).text()‘1’){
    KaTeX parse error: Expected 'EOF', got '}' at position 43: … }̲else if((this).text()
    ‘2’){
    $(this).text(“冻结”)
    }
    })
    }
    各种详细属性可见:https://www.layui.com/doc/modules/table.html#use

    $(function () {
    let uname="";
    layui.use(['form','layer','table','jquery'],function () {
        let form=layui.form,
            layer=layui.layer,
            table=layui.table,
            $ = layui.jquery;
        table.render({
            elem:'#userList'
            ,id:'userList'
            ,url: '/meiman/admin/api/memberList' //数据接口
            ,where:{'uname':uname}
            ,page: true //开启分页
            ,text:"数据加载失败"
            ,cols: [[ //表头
                {checkbox:true,width:'50',fixed: 'left'}//单选框
            ,{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
            ,{field: 'uname', title: '用户名', width:200}
            ,{field: 'role', title: '角色', width:200}
            ,{field: 'stu', title: '状态', width:200}
            ,{field: 'toolBar', title: '操作', align:'center',width:200,toolbar:'#userBar'}//工具列
        ]]
            ,response:{statusCode:"1000"}
            ,parseData:function (res) {
                return{
                    "code":res.code,
                    "msg":res.msg,
                    "count":res.data.count,
                    "data":res.data.list
                };
            },
            done: function(){//只有一个done:function,再函数里面分别做处理就ok,多个done,就只有最后一个生效。
                    //如果是异步请求数据方式,res即为你接口返回的信息。
                    //如果是直接赋值的方式,res即为:{data: [], count: 99} data为当前页数据、count为数据总长度
                    $("[data-field='stu']").children().each(function () {
                        if($(this).text()=='1'){
                            $(this).text("启用")
                        }else if($(this).text()=='2'){
                            $(this).text("冻结")
                        }
                    })
                }
    });
    })
    });
    

    3.样式基本ok,可以添加一些监听事件了
    当然代码不全,这里只写的table主要部分,像table外部的搜索框,批量删除,添加就正常事件监听就行
    这里主要是针对,1.table的渲染(利用了搜索框的from提交)2.和操作列工具栏的事件监听
    在这里插入图片描述

    4.搜索监听:其中html中的 name=”uname“属性和js里的 uname =data.field.uname 相对应
    lay-submit lay-filter=“search” 和js的submit(search) 对应

    html.

    <form class="layui-form xbs" action="" >
            <div class="layui-form-pane">
                <div class="layui-form-item" style="display: inline-block;">
                    <div class="layui-input-inline">
                        <input type="text" name="uname"  placeholder="请输入用户名" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-input-inline" style="width:80px">
                        <button class="layui-btn"   lay-submit lay-filter="search"><i class="layui-icon">&#xe615;</i></button>
                    </div>
                </div>
            </div>
        </form>
    

    js.

      //搜索
        form.on('submit(search)',function (data) {
            uname =data.field.uname;
            table.reload('userList',{
                where: {'uname':uname}
            });
            return false;
        });
    

    5.批量删除。
    html。

    <button class="layui-btn layui-btn-danger delAll"><i class="layui-icon">&#xe640;</i>批量删除</button>
    

    js。主要是监听table中的checkbox

    //批量删除
    $(".delAll").click(function () {
        let checkStatus = table.checkStatus('userList'),//监听复选框的选中事件,关联的是js中渲染table的id
        data = checkStatus.data,
        ids = "";
        if (data.length>0){
            for(let i=0;i<data.length;i++){
                ids+=data[i].id+",";
            }
            ids=ids.substring(0,ids.length-1);
            layer.confirm('确定删除选中用户?',{icon:3,title:'提示信息'},function () {
                $.get('/meiman/admin/api/delAll',{ids:ids},function (res) {
                    layer.msg("删除了:"+ids);
                    if(res.code=1000){
                        layer.msg('删除成功!',{icon:6,time:1000},function () {
                            location.href='/meiman/admin/member';
                        })
                    }
                    else {
                        layer.msg('删除失败!',{icon:5,time:1000},function () {
                            location.href='/meiman/admin/member';
                        })
                    }
                })
            })
        }
    });
    

    6.工具列的监听及操作
    js

     //工具列操作
            table.on('tool(userList)',function (obj) {
                let data = obj.data;
                switch(obj.event){
                    case 'detail':
                        layer.msg('查看');
                        break;
                    case 'edit':
                        window.location.href="memberUpdate?id="+data.id;//跳某个页面,并且传递当前行的id,供后台查询
                        break;
                    case 'changeStu':
                        layer.confirm('确定修改'+data.uname+"的状态?",{icon:3,title:"提示信息"},function (index) {
                            $.post("/meiman/admin/api/ChangeStuById",{stu:data.stu,id:data.id},function (res) {
                                if(res.code ==='1000' ){
                                    top.layer.msg("用户状态更改成功!");
                                    window.location.href="/meiman/admin/member";
                                    layer.close(index);
                                }
                                else {top.layer.msg("用户状态设置失败!");}
                            })
                        });
                        break;
                }
            });
    

    7.好吧,layui表格暂时使用到这。。。一些基本监听能够处理,数据/参数能够获取/传递/显示就暂时ok了

    展开全文
  • 项目中页面很多下拉框,都是调用数据字典表数据,例如性别:男,女,;删除状态:已删除,正常。 如果每个地方都用ajax调用,过于麻烦,代码越多,维护工作就越麻烦。故使用layui自定义模块实现统一操作。 先看下...

    项目中页面很多下拉框,都是调用数据字典表数据,例如性别:男,女,;删除状态:已删除,正常。

    如果每个地方都用ajax调用,过于麻烦,代码越多,维护工作就越麻烦。故使用layui自定义模块实现统一操作。

    先看下效果:

    项目情况

    因为我项目使用的springboot+tymeleaf+layui,layui扩展用了layuimini.

    直接上代码

    项目结构如下:

    1.新建dict.js

    /**
     * 扩展layui组件
     */
      layui.define(["element","jquery"], function(exports){
          var element = layui.element,
              $ = layui.$;
            FsForm = function () {}
            FsForm.prototype.renderDictAll = function (formId, b) {
                var element = layui.element,
                $ = layui.$;
                $.ajaxSettings.async = false; //设置为同步,否则layui会先渲染表格,导致数据显示不出来
                //此处拿到的dict即字典code,可以通过此字典code去数据库或者redis中查询相应的字典数据并加载到select中的option中。
                $('.selDict').each(function(){
                    var _this = $(this);
                    var dict = _this.attr("dict");
                    console.log(dict)
                    $.get("/sys/dict/getDictItems/"+dict, function(data){//后台获取数据,这里需要根据返回数据,自己调整。我这里返回数据见下面代码
                        console.log(data);
                        if(data.result!=null){
                            $.each(data.result,function(index,m){
                                _this.append("<option value='"+m.value+"'>"+m.title+"</option>");
                            });
                        }
                    });
                    //模拟假数据
                    // _this.append("<option value='1>111</option>");
                    // _this.append("<option value='2>222</option>");
                })
                $.ajaxSettings.async = true; //ajax恢复为异步
    
              
              
            }
            var fsForm = new FsForm();
            exports("dict", fsForm);
        })
    

    数据字典接口返回数据

    {
      "success": true,
      "message": "操作成功!",
      "code": 0,
      "result": [
        {
          "value": "1",
          "text": "男",
          "title": "男"
        },
        {
          "value": "2",
          "text": "女",
          "title": "女"
        },
        {
          "value": "3",
          "text": "未知",
          "title": "未知"
        }
      ],
      "timestamp": 1588152327329
    }

    2.配置lay-config.js,添加数据字典扩展模块

    添加dict:'dict'新增加模块

    /**
     * date:2019/08/16
     * author:Mr.Chung
     * description:此处放layui自定义扩展
     * version:2.0.4
     */
    
    window.rootPath = (function (src) {
        src = document.scripts[document.scripts.length - 1].src;
        return src.substring(0, src.lastIndexOf("/") + 1);
    })();
    
    layui.config({
        base: rootPath + "lay-module/",
        version: true
    }).extend({
        miniAdmin: "layuimini/miniAdmin", // layuimini后台扩展
        miniMenu: "layuimini/miniMenu", // layuimini菜单扩展
        miniTab: "layuimini/miniTab", // layuimini tab扩展
        miniTheme: "layuimini/miniTheme", // layuimini 主题扩展
        miniTongji: "layuimini/miniTongji", // layuimini 统计扩展
        step: 'step-lay/step', // 分步表单扩展
        treetable: 'treetable-lay/treetable', //table树形扩展
        tableSelect: 'tableSelect/tableSelect', // table选择扩展
        iconPickerFa: 'iconPicker/iconPickerFa', // fa图标选择扩展
        echarts: 'echarts/echarts', // echarts图表扩展
        echartsTheme: 'echarts/echartsTheme', // echarts图表主题扩展
        wangEditor: 'wangEditor/wangEditor', // wangEditor富文本扩展
        layarea: 'layarea/layarea', //  省市县区三级联动下拉选择器
        dict: 'dict', //  layui数据字典模块扩展
    });
    

     

    3在页面中test.html添加下拉框

                性别:<select class="selDict" dict="sex"></select><br/>
                删除状态:<select class="selDict" dict="del_flag"></select>

    4.页面加载时,渲染数据字典test.html

    <script th:src="@{/layuimini/lib/layui-v2.5.5/layui.js}" charset="utf-8"></script>
    <script th:src="@{/layuimini/js/lay-config.js?v=2.0.0}" charset="utf-8"></script>
    <script src="/js/core.util.js"></script>
    <script th:inline="none">
        layui.use(['table','laypage', 'layer','laydate','tree','transfer','dict'], function () {
        var form = layui.form;   
        var $ = jQuery = layui.jquery;
        var dict=layui.dict; //获取自定义模块
        dict.renderDictAll(); //渲染
         //重新渲染select数据
         form.render('select');
    
    })

     

    展开全文
  • layui数据表格的加载

    千次阅读 2020-08-18 15:20:34
    文献种类:专题技术总结文献;...Layui数据表格、ViewBag和ViewData用法和区别 table模块是layui最核心的组成之一,它用于对表格进行一些列功能和动态数据的操作。Table模块也是layui重点维护项目之一。 对塔table模块
  • * 给需要异步加载数据字典的加上自定义属性jq-search="qu" * qu为数据字典对应的key * 如果需要级联查询的则加上自定义属性lay-filter, * 如果没有下一级或者子集则不需要加 * 三联动第一个lay-filter设成...
  • 今天小编就为大家分享一篇layui 数据表格 根据值(1=业务,2=机构)显示中文名称示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • layui结合freemarker+springboot进行前端数据表格字典转义 layui结合freemarker+springboot进行前端数据表格字典转义
  • 其中的选项111和222是从数据库加载的,如果每个地方都需要去用ajax请求一下数据字典未免太过于麻烦,所以就实现了一个通用的功能,而因为项目中使用的是layuilayui是支持自定义模块已使用模块功能可以看到layui的...
  • 如下所示: [removed] {{# if(d.status === 1)... <span class=layui-badge>正常 {{# } else { }} <span class=layui-badge>禁用 {{# } }} [removed] layui.use(['layer', 'form','table'], function(){ layer
  • 今天小编就为大家分享一篇layui数据表格--与后台交互获取数据的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 【SpringBoot】廿四、SpringBoot中实现数据字典

    万次阅读 多人点赞 2020-07-17 11:41:44
    我们在日常的项目开发中,对于数据字典肯定不模糊,它帮助了我们更加方便快捷地进行开发,下面一起来看看在 SpringBoot 中如何实现数据字典功能的 一、简介 1、定义 数据字典是指对数据的数据项、数据结构、数据流...
  • springboot+redis字典数据获取,前端使用layui框架 前言 最终目的是使用redis存取字典表。这个案例就将使用到springboot+redis,但在此过程中遇见很多问题,逐个击破,最后实现功能。 准备工作 这里只是实现...
  • 数据是用ThinkPHP5操作 类型是固定4个, 用layui templet - 自定义模板 方法一:  {field:'type', title: '类型', width: 200, templet: '#titleTpl'}    if({{d.type}}=='2...
  • 目的: 1、后台返回的数据:{'InLink': ['请选择对象']} 过程: 1、前端使用json ,将对象转为字符串 layer.msg(JSON.stringify(res.data), {icon: 5, time: 1500}) ...
  • layui表格数据的渲染

    2021-04-16 15:09:14
    字典管理 字典管理 字典名称 字典类型 查询
  • layui表格数据templet

    千次阅读 2019-08-13 16:32:51
    ,field:'Sex',title:'性别',align:'center', templet:function(res){ if(res.Sex=='1'){ return '男'; }els...
  • 概述 数据字典主要解决下拉框数据填充和数据表格转义...数据表格转义代替自己手动写templet解析模板数据字典提供一个通用的处理方式,支持配置静态数据字典和动态数据字典,,数据字典文件地址plugins/frame/js/fsDi...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 772
精华内容 308
关键字:

layui数据字典