zoukankan      html  css  js  c++  java
  • 00033-layui 自定义 字典模块 及 工具方法

    layui.define(['jquery','form'], function(exports){
        var $ = layui.jquery;
        var form = layui.form;
        var element = layui.element;
        /*var dictJson = {
            "status":[[1,"正常"],[2,"禁用"]],
            "yesNot":[[1,"是"],[2,"否"]],
            "bool":[[true,"是"],[false,"否"]]
        };*/
        var dictJson = layui.sessionData(layui.setter.tableName).dictJson;
        var obj = {
            /**
             *
             * @param treeList
             * 结构(javaBean):
             * private String name;
             * private String code;
             * //代码类型1-int 2-bool 3-string
                private Integer type;
             private Long parentId;
             private Integer sortOrder;
             private List<BaseCategoryPo> children = new ArrayList<BaseCategoryPo>();
             * @returns 返回格式示例:
             * {
            "status":[[1,"正常"],[2,"禁用"]],
            "yesNot":[[1,"是"],[2,"否"]],
            "bool":[[true,"是"],[false,"否"]]
            };
             */
            treeToDictJson:function (treeList) {
                var rtnJson = {};
                for(var i=0;i<treeList.length;i++){
                    var vo= treeList[i];
                    var code = vo.code;
                    var type = vo.type;
                    var children = vo.children;
                    if(children){
                        var dictArr = [];
                        for(var j=0;j<children.length;j++){
                            var dictRec = [];
                            var c_vo = children[j];
                            var c_name = c_vo.name;
                            var c_code = c_vo.code;
                            var c_type = c_vo.type;
                            if(type==1){
                                dictRec.push(parseInt(c_code))
                            }else if(type==2){
                                dictRec.push(c_code=='true'?true:false)
                            }else {
                                dictRec.push(c_code);
                            }
                            dictRec.push(c_name);
                            dictArr.push(dictRec)
                        }
                        rtnJson[code] =  dictArr;
                    }
                }
                return rtnJson;
            },
            options:function(name){
                var list = dictJson[name];
                if(!list){
                    return null;
                }
                return list;
            },
            /**
             * layui 动态渲染select
             * @param id
             * @param name
             * @param defaultVal
             */
            setSelect:function (id,name,defaultVal) {
                $("#"+id).empty();
                $("#"+id).append(new Option("请选择",""));
                var list = obj.options(name);
                if(!list){
                    return;
                }
                $.each(list,function(index,item){
                    var option = new Option(item[1],item[0]);
                    if(item[0]==defaultVal){
                        option.selected=true;
                    }
                    $("#"+id).append(option)
                });
                layui.form.render("select");
                layui.element.render();
            },
            /**
             * 根据字典分类和值取显示值
             * @param name 字典分类名称code
             * @param val 字典值
             * @returns {string} 显示值
             */
            showName:function (name,val) {
                var list = obj.options(name);
                if(!list){
                    return '';
                }
                var html = '';
                $.each(list,function(index,item){
                    if(item[0]==val){
                        html = item[1]
                        return;
                    }
                });
                return html;
            },
    
            /**
             * layui 动态渲染radio
             * @param id
             * @param name
             * @param defaultVal
             */
            setRadio:function (id,name,defaultVal) {
                $("#"+id).html("");
                var list = obj.options(name);
                if(!list){
                    return;
                }
                $.each(list,function(index,item){
                    var radioHtml = '<input type="radio" name="'+name+'" value="'+item[0]+'" title="'+item[1]+'" ';
                    if(item[0]==defaultVal){
                        radioHtml+='checked=""';
                    }
                    radioHtml+='>';
                    $("#"+id).append(radioHtml)
                });
                layui.form.render();
                layui.element.render();
            },
            /**
             * layui 动态渲染switch
             * @param name
             * @param val
             */
            setSwitch:function (name,val) {
                if(!val){
                    val = false;
                }
                var elem = $("[name="+name+"]");
                if(val==0 || val==false){
                    elem.removeAttr("checked");
                    elem.val(false)
                }else{
                    elem.attr("checked",true);
                    elem.val(true)
                }
                form.on('switch(form-switch)', function(data){
                    $(data.elem).val(data.elem.checked)
                });
    
            }
        };
        //输出接口
        exports('dict', obj);
    });
    

    dict.js 文件位置:layuiadmin/modules/dict.js
    引用:

    layui.config({
       base: '${ctxLayui}/layuiadmin/'
    }).extend({
       index: 'lib/index'
    }).use(['index', 'form','dict','laydate','util'], function(){
       var $ = layui.$ ,form = layui.form;
       var dict = layui.dict; 
    

    layui 动态渲染select 的使用:
    html:

    <select name="status" lay-verify="required" id="status" lay-filter="status">
    </select>
    

    js:

    dict.setSelect("status","status",formData?formData.status:1);
    

    layui 动态渲染radio 的使用:
    html:

    <div class="layui-input-block" id="status_radio" >
    </div>
    

    js:

    dict.setRadio("status_radio","status",formData?(formData.status?formData.status:1):1);
    

    layui 动态渲染switch 的使用:
    html:

    <input type="checkbox" name="isException" lay-filter="form-switch" lay-skin="switch" lay-text="是|否">
    

    js:

    dict.setSwitch("isException",formData?(formData.isException?formData.isException:0):0);
    
  • 相关阅读:
    Windows XP Embedded和Windows XP Professional 的双启动
    从 eVC 移植所带来的已知问题
    未来6项技术越来越重要
    三种嵌入式操作系统的深入分析与比较
    ORA27125 解决方法<转>
    Windows下MySQL UTF8 编码设置(解决中文乱码)
    IDEA 自动生成serialVersionUID
    hibernate 自定义UUID(mysql uuid_short)
    Mac Intellij 控制台乱码解决
    com.mysql.jdbc.exceptions.jdbc4.CommunicationsException: Communications link failure
  • 原文地址:https://www.cnblogs.com/jianquan100/p/13683181.html
Copyright © 2011-2022 走看看