ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

00033-layui 自定义 字典模块 及 工具方法

2020-09-17 08:34:13  阅读:218  来源: 互联网

标签:status 自定义 val layui dict form var 00033


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);

标签:status,自定义,val,layui,dict,form,var,00033
来源: https://www.cnblogs.com/jianquan100/p/13683181.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有