Layui前端框架

官网

https://www.layui.com/

datagrid

复选框不居中显示问题

.layui-table-cell .layui-form-checkbox[lay-skin="primary"]{
     top: 50%;
     transform: translateY(-50%);
}

获取所选行指定属性

获取datagrid复选框选定行的指定属性,返回以逗号分割的字符串属性。后台可以直接用list或者String[]接收数据.

        /**
         * 获取所选行ids
         * tableidStr dagagridtable的id,例如'dataGridList'
         * idObj 属性,例如'sysid'
         **/
        function getAllCheck(tableidStr,idObj){
            var ids_arr = [];
            var checkStatus = table.checkStatus(tableidStr);
            var rows = checkStatus.data;
            for(var i in rows){
                ids_arr.push(rows[i][idObj]);  //获取row[i]数据行的idObj属性
            }
            var ids_result = ids_arr.join(',');
            return ids_result;
        }

分页&条件查询

先分页查询,翻页后再输入条件进行查询,此时查询条件会把当前页数给带过去,一定要把page的当前页置为1

            table.reload('dataGridList', {
                url: "./authrole/getListByPage",
                page:{
                    curr:1
                }
                ,where: {rolename:rolename} 
            });

form表单

验证取消必填

需要修改两个文件:form.js和layui.all.js

phone:[/(^$)|^1\d{10}$/,'请输入正确的手机号'],
email:[/(^$)|^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/,'邮箱格式不正确'],
url:[/(^$)|(^#)|(^http(s*):\/\/[^\s]+\.[^\s]+)/,'链接格式不正确'],
number:[/(^$)|^\d+$/,'只能填写数字'],
date:[/(^$)|^(\d{4})[-\/](\d{1}|0\d{1}|1[0-2])([-\/](\d{1}|0\d{1}|[1-2][0-9]|3[0-1]))*$/,'日期格式不正确'],
identity:[/(^$)|(^\d{15}$)|(^\d{17}(x|X|\d)$)/,'请输入正确的身份证号']

新增部分:(^$)|

如果该选项为必填:建议使用,lay-verify=“required|number”校验

button点击页面刷新

button在form表单中,点击button会导致页面刷新,需要加上type=”button”

<button class="layui-btn ty-btn" type="button" onclick="active()">激活button>

下拉框清空

        function queryClear(){
            layui.use('form', function(){
                $('#isActiveQuery').val('');  //先设置值
                var form = layui.form;    
                form.render('select'); //刷新select选择框渲染
            });
        }

Radio渲染不上去

                
layui.use('form', function(){ if(d.sex == 0){ $("input[name=sex_up][value='0']").prop("checked", d.sex == 0 ? true : false); }else{ $("input[name=sex_up][value='1']").prop("checked", d.sex == 1 ? true : false); } var form = layui.form; form.render("radio"); //更新全部 });

CheckBox布局混乱

Checkbox框高度过高

.layui-form-checkbox[lay-skin=primary],.layui-form-checkbox[lay-skin=primary] span{
     max-height: 20px;
}

Checkbox监控选择框

在选择第六个时弹出来最多只能选择五个

html

<input name="roleids[]" lay-filter="checkbox_role-filter" lay-skin="primary" type="checkbox" value="admin1" title="管理员">

js

          /*lay-filter='checkbox_role-filter'的复选框*/
          form.on('checkbox(checkbox_role-filter)',function(data){
            console.log(data);
            if ($("input[lay-filter='checkbox_role-filter']:checked").length>5){
                //将选中的全部取消
                //$("input[lay-filter='checkbox_role-filter']:checked").removeAttr("checked");
                //$(this).checked = false;
                $(this).prop("checked", false); 
                form.render('checkbox'); 
                layer.msg("最多只能选择5个标签", {
                    time : 3000,
                    icon : 10 
                });
            }
          });

Checkbox获取值

            //获取checkbox[lay-filter='checkbox_role-filter']的值,ssm可以直接用String[]接收
            var arr = new Array();
            $("input[lay-filter='checkbox_role-filter']:checked").each(function(i){
                arr[i] = $(this).val();
            });
            var roleids = arr.join(',');

动态添加Checkbox

            //所有角色复选框
            $.ajax({
                url: "./authrole/selectByExample"
                    , data: {}
                    , type: "post"
                    , dataType: "json"
                    , success: function (data) {
                        var str = '';
                        $.each(data, function (index, role) {
                            str +='';
                        });
                        //放入html中
                        $('#rolesCheckboxDiv').html(str);
                        //渲染表单
                        layui.use('form', function(){
                            var form = layui.form;
                            form.render("checkbox"); //渲染checkbox
                        });
                    }
                    ,error:function(e){
                        layer.alert("请求失败",{title:'提示',icon: 2});
                    }
            });

switch控件

datagrid中switch控件

    //动态添加switch
    templet: function(d){
         if(d.isActive == 0)
               return '';
         if(d.isActive == 1)
            return '';
    }

        //switch事件监控
        layui.use(['form'], function(){
            var form = layui.form
                ,layer = layui.layer
            //监听switchFilter开关
            form.on('switch(switchFilter)', function(data){  //data为switch控件,用控件的value属性传值;
                var groupid = data.value;
                var isActive = '';
                console.info();
                if(this.checked){
                    isActive = '1';
                    //layer.msg('开关checked:'+ (this.checked ? 'true' : 'false'), {offset: '6px'});
                    //layer.tips('温馨提示:开关状态的文字可以随意定义,而不仅仅是ON|OFF', data.othis)
                }else{
                    isActive = '0';
                    //layer.msg('开关: 关掉了', {offset: '6px'});
                }

                //do some ajax opeartiopns;
                $.ax('./group/switchAcitve', {groupid:groupid,isActive:isActive}, 'POST', function(data) {
                    if (data.code == "success") {
                        layer.msg(data.msg, {offset: '6px'});
                    }else {
                        layer.alert(data.msg,{title:'提示',icon: 2});
                    }
                }, function(e) {
                    layer.alert('出问题啦~请稍后再试~',{title:'提示',icon: 2});
                }, false);

            });
        });

ajax提交switch控件

if($('#ispub_add').is(':checked')) {
   ispub_add = "1";
}else{
   ispub_add = "0";
}

点击左侧菜单中间出现对应页面

html

  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">-->
      <ul class="layui-nav layui-nav-tree site-demo-nav main_left" lay-filter="side">
                        <li class="layui-nav-item">
                            <a class="javascript:;" href="javascript:;">
                                <i class="layui-icon" style="top: 3px;">i><cite>系统管理cite>
                            a>
                            <dl class="layui-nav-child">
                                <dd class="">
                                    <a _href="./userinfo/i">
                                        <cite>系统用户cite>
                                    a>
                                dd>
                                <dd class="">
                                    <a href="javascript:;" _href="./system/pingtai.html">
                                        <cite>平台配置cite>
                                    a>
                                dd>
                            dl>
                        li>
                        <li class="layui-nav-item">
                            <a class="javascript:;" href="javascript:;" _href="./audit.html">
                                <i class="layui-icon" style="top: 3px;">i><cite>审计管理cite>
                            a>
                        li>
       ul>
    div>
  div>
  <div class="layui-body">
    
    <iframe frameborder="0" scrolling="yes" style="width:100%;height:100%" src="" id="lay-content">iframe>
  div>

js

$(function(){
   $(".main_left li a").on("click",function(){
      var address =$(this).attr("_href");
      $("#lay-content").attr("src",address);
   });
});

也可以用开源框架x-admin

Layui树

一定要用layui2.5.5+,否则显示不出来

    //初始化
    layui.use('tree', function(){
        tree = layui.tree;
        getTreeData();
    });
    /*获取树*/
    function getTreeData() {
        $.ajax({
            url: "./permission/selectPermissionTree"
            , data: {}
            , type: "post"
            , dataType: "json"
            , success: function (data) {
                tree.render({
                    elem: '#permissiontree'
                    ,data: data
                    ,edit: ['add', 'update', 'del'] //操作节点的图标
                    ,click: function(obj){
                        var data = obj.data;
                        $('#moduleid').val(data.id);
                        $('#modulename').val(data.title);
                        $('#path').val(data.href);
                        $('#ordernumber').val(data.ordernumber);

                        layui.use('form', function() {
                            var form = layui.form;
                            //监听修改提交
                            form.on('submit(formEdit)', function(data){
                                $.ajax({
                                    url: "./permission/updateByPrimaryKeySelective"
                                    , data: data.field
                                    , type: "post"
                                    , dataType: "json"
                                    , success: function (data) {
                                        if (data.code == "success") {
                                            layer.alert(data.msg,{title:'提示',icon: 1},function(index){
                                                layer.close(index);
                                                getTreeData();
                                            });
                                        }else {
                                            layer.alert(data.msg,{title:'提示',icon: 2});
                                        }
                                    }
                                });
                                return false;
                            });
                        });
                    }
                    ,operate: function(obj){
                        var type = obj.type; //得到操作类型:add、edit、del
                        var data = obj.data; //得到当前节点的数据
                        var elem = obj.elem; //得到当前节点元素

                        if(type === 'add'){ //增加节点
                            add(data);
                        } else if(type === 'update'){ //修改节点
                            rename(data);
                        } else if(type === 'del'){ //删除节点
                            del(data.id);
                        }
                    }
                });
            }

        });
    }

树复选框回显

在添加时一定只添加叶子结点,回显时才不会因为把父节点设置选中导致整个子树都选中。

添加时值添加子结点toListDF方法是关键。

    /**
     * 配置权限
     */
    function allotPermission() {
        var checkData = tree.getChecked('permissiontreeID');
        var modultlist = treeToList(checkData);
        var roleid = $('#roleid_permission').val();

        var data = {moduleids:modultlist.join(','),roleId:roleid};
        $.ax('./permission/addmodulejoinrole', data, 'POST', function(data) {
            if (data.code == "success") {
                layer.alert(data.msg,{title:'提示',icon: 1},function(index){
                    layer.close(index);
                    layer.close(allotLayer);
                    //getTreeData();  //刷新树
                });
            }else {
                layer.alert(data.msg,{title:'提示',icon: 2});
                getTreeData();  //刷新树
            }
        }, function(e) {
            layer.alert('出问题啦~请稍后再试~',{title:'提示',icon: 2});
            getTreeData();  //刷新树
        }, false);
    }

    /**
     * 树转list
     */
    function treeToList(tree){
        for(var i in tree){  //遍历树的第一层,只有一个根结点
            var node = tree[i];
            list = [];  //结果lsit
            if (node.children.length !== 0) { //第一层加入到list中,因为根结点模块设置为虚拟结点,所以不用加入
                /*list.push(node.id);*/
                toListDF(node.children, list, node.id);  //遍历子树,并加入到list中.
            }
        }
        return list;
    }

    /**
     * 深度优先遍历树
     * 一个递归方法
     * @params tree:要转换的树结构数据
     * @params list:保存结果的列表结构数据,初始传list = []
     * @params parentId:当前遍历节点的父级节点id,初始为null(因为根节点无parentId)
     **/
    function toListDF (tree, list, parentId) {
        for (var i in tree) { //遍历最上层
            //将当前树放入list中
            var node = tree[i];
            //如果有子结点,再遍历子结点
            if (node.children.length !== 0) {
                toListDF(node.children, list, node.id)  //递归
            }else {
                list.push(node.id);
            }
        }
    }

富文本框

https://www.layui.com/doc/modules/layedit.html

            
            /*构建富文本编辑器*/
            layui.use('layedit', function(){
                var layedit = layui.layedit;

                //构建一个默认的编辑器
                layedit_up_index = layedit.build('content_up',
                    {tool:['strong' //加粗
                        , 'italic' //斜体
                        , 'underline' //下划线
                        , 'del' //删除线
                        , '|' //分割线
                        , 'left' //左对齐
                        , 'center' //居中对齐
                        , 'right' //右对齐
                        , 'link' //超链接
                        , 'unlink' //清除链接
                    ]
                    });
            });

在弹框中构建富文本编辑器时,要先弹出再构建。

X-admin

刷新后tab页依然存在的问题。x-admin把tab的列表放入localstorage中,刷新时把localstorage清除即可。

        $(function () {
            /*清除localstorage的内容*/
            var storage=window.localStorage;
            storage.clear();
        });

 

点赞

Leave a Reply

Your email address will not be published. Required fields are marked *