精华内容
下载资源
问答
  • button class="layui-btn layui-btn-normal"id="add" οnclick="clickme()">新增</button> </div> <div class="layui-row " id='shezhi'style="display: none;" > <la

    在html中设置按钮点击添加后显示隐藏的需要设置的内容

    <div class="layui-button">
             <button class="layui-btn layui-btn-normal"id="add" οnclick="clickme()">新增</button>
      </div>
      <div class="layui-row " id='shezhi'style="display: none;" >
      <label class="layui-form-label">请输入自定义内容</label>
      <div class="layui-input-inline">
          <input type="text" name="wenben" required  lay-verify="required" placeholder="请输入自定义标签" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-inline">
       <label class="layui-form-label"></label>
         <div class="layui-input-inline">
           <button class="layui-btn" lay-submit lay-filter="zwSearchSumbit1">提交</button>
         </div>
     </div>
    

    此时页面是这样的
    在这里插入图片描述点击新增按钮会将隐藏的内容显示出来,上面的代码只显示了一个输入框和一个提交按钮,实际写的代码多一点
    在这里插入图片描述设置内容后点击下面的提交按钮页面会重新刷新,并弹出添加成功的通知
    在这里插入图片描述
    按钮绑定代码如下,放在

    $(document).on('click','#add',function () {
            $('#shezhi').show();
        })
    

    这个是提交按钮绑定的

    form.on('submit(zwSearchSumbit1)', function (data) {
            layer.msg(JSON.stringify(data.field.wenben)+'添加成功,请在模板中查看');
            $("#restart")[0].reset();
            $('#shezhi').hide();
            {#layui.form.render();#}
            return false;
            });
    

    第三行实现页面的重置,第4行用于将点击新增以后出现的内容给隐藏起来。

    展开全文
  • } style> 权限按钮测试h1> 增加button> 删除权限button> 编辑button> 删库跑路button> 提现button> 升级权限button> <script> $(document).ready(function() { var permissions = JSON.parse(sessionStorage....

    - 百度了白天,发现没有相关的文章于是自己写了一个,如果是vue这些 应该很方便 ,来一个jquery版的

    <!DOCTYPE html>
    <html>
    <head>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    </head>
    <body>
    <style>
        .rmrf {
            color:black;
            background-color: red;
        }
        .tx {
            color:black;
            background-color: red;
        }
    </style>
    <h1>权限按钮测试</h1>
    
    <button class="auth add" has_permission="sys:add">增加</button>
    <button class="auth delete" has_permission="sys:delete">删除权限</button>
    <button class="auth" has_permission="sys:edit">编辑</button>
    <button class="auth rmrf" has_permission="sys:rm:rf">删库跑路</button>
    <button class="auth tx" has_permission="sys:tx">提现</button>
    <button class="auth update" has_permission="sys:update">升级权限</button>
    <script>
    
    $(document).ready(function() {
      var permissions = JSON.parse(sessionStorage.getItem('permissions'));
      if(permissions== undefined){
        var permissions = ["sys:add","sys:delete","sys:edit","sys:update"]
        sessionStorage.setItem('permissions', JSON.stringify(permissions) );
      }
      console.log(permissions)
      $(".auth").each(function(){
        var permission = $(this).attr("has_permission")
        if($.inArray(permission, permissions) == -1){
        	$(this).remove()
        }   
        
      })
        $(".delete").click(function(){
            
           
            sessionStorage.removeItem('permissions');
            alert("回收权限成功!")
            window.location.reload();
        });	
        $(".update").click(function(){
            
            permissions.push("sys:rm:rf");
            sessionStorage.setItem('permissions', JSON.stringify(permissions));
            alert("你获得最高权限")
            window.location.reload();
        });	
    
        $(".add").click(function(){
            
            permissions.push("sys:tx");
            sessionStorage.setItem('permissions', JSON.stringify(permissions));
            alert("增加权限成功。")
            window.location.reload();
        });	
      
    });
    </script>
    
    </body>
    </html>
    
    

    如有疑问 可以留言

    展开全文
  • layui按钮的权限管控

    万次阅读 2019-08-03 00:57:41
    这里的按钮是指列表最后的操作列,一般会有修改 删除 查看详情等,但并不是每个登录的用户都能看到这些按钮,需要按照动态配置的权限进行管控。 我用的是thymeleaf springboot layui。但我并不想用thymeleaf的模板...

    这里的按钮是指列表最后的操作列,一般会有修改 删除 查看详情等,但并不是每个登录的用户都能看到这些按钮,需要按照动态配置的权限进行管控。

    我用的是thymeleaf springboot layui。但我并不想用thymeleaf的模板语言,玩了react后的后遗症是希望能尽量前后端分离,以ajax的方式来完成。说下我的方式:

    <script type="text/html" id="column-toolbar">
        <a class="abcdefg" lay-event="user::edit">
            <i class="layui-icon layui-icon-edit" title="编辑"></i>
        </a>
        <a class="abcdefg" lay-event="user::del">
            <i class="layui-icon layui-icon-delete" title="删除"></i>
        </a>
    </script>

    上面是操作列的工具栏代码 注意那个class=abcdefg,我通过类选择器来进行。

    如果是纯html的静态页面,只需要写下面的代码就行:

    $(".abcdefg").each(function(){
                if($(this).attr('lay-event')=='user::edit')
                    $(this).hide();
            });

    在用户登录的时候,将用户的所有可执行的操作全部加载到前台,user::edit是用户的一个权限,写法随意,和冒号没关系。找到lay-event的值,去用户的所有操作用比对,如果没有找到,则hide()。上面代码是简易写法,我还没有去所有权限中做比对。只是确认了确实可以用hide来动态控制。

    但当我把这段代码放到正式项目中时却不行了,类选择器一直找不到,我不知道是不是因为我用来thymeleaf的关系,所以解决办法是把上面的这段代码放到layui的table的done的回调函数中。

    done: function(res, curr, count){
                    $(".abcdefg").each(function(){
                        if($(this).attr('lay-event')=='user::edit')
                            $(this).hide();
                    });
                }

    这个办法是否真的好用还要继续求证。

    另外说下一般的解决方式,就是不考虑前后端分离的情况:

    如果后端使用了shiro的安全认证,可以使用shiro的标签来进行控制。具体如下:

    <shiro:hasPermission name="user:edit">
                <a lay-event="edit">
                    <i title="编辑"></i>
                </a>
            </shiro:hasPermission>

    springsecurity也有类似的标签可以使用。

    或者使用layui自带的laytpl 语法,具体可百度,我也不熟悉,但确实是可行的。

    最后吐槽下react真的挺麻烦,环境搭建,对代码的理解什么的,可能我转不过来。所以才想用layui。easyui虽然真的很强大,但是不太好看,谁让用户只注重外貌呢。

    展开全文
  • 今天小编就为大家分享一篇layui 表格操作列按钮动态显示的实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 今天小编就为大家分享一篇layui--js控制switch的切换方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 禁用按钮 ... $('.lay-submit-btn').addClass("layui-btn-disabled").attr("disabled", true); 禁用按钮且隐藏 $('.lay-submit-btn').css({'display':'none', 'pointer-events':'none'}); $('.l

    禁用按钮
    注:不加’pointer-events’,'none’还是会触发提交

    	$('.lay-submit-btn').css('pointer-events','none');
    	$('.lay-submit-btn').addClass("layui-btn-disabled").attr("disabled", true);
    

    禁用按钮且隐藏

    	$('.lay-submit-btn').css({'display':'none', 'pointer-events':'none'});
    	$('.lay-submit-btn').addClass("layui-btn-disabled").attr("disabled", true);
    
    展开全文
  • layui中实现按钮点击事件

    千次阅读 2019-12-21 23:02:52
    首先,小编要告诉大家一个残酷的现实,那就是小编没有找到layui对点击事件的支持… 这里的点击事件是指单纯的点击事件,而不是提交事件,或者是...第一种,js的监听://给普通按钮绑定事件 <button class="la...
  • layui按钮button的js设置disabled

    千次阅读 2021-03-23 15:13:14
    layui通过js设置button的不可用(disabled),有2步操作: 1、添加按钮灰色样式。 2、设置disabled属性。 只设置disabled,样式没变化按钮不变灰;只添加样式,仍可触发点击事件。 $('#butid').addClass("layui...
  • Layui 按钮显示隐藏

    万次阅读 2020-04-28 10:30:25
    当State为未解决时,只显示解决问题,删除按钮。 当State为进行中时,只显示已解决按纽,删除按钮。 当State为完成时,只显示删除按钮。 单个判断语法: {{# if(d.State=='未解决'){}} {{# } }} <...
  • 【本人修改版】效果图 表格模式下,我这里使用userId做唯一【本人修改版】 <!-- 表格操作列 --> <... ...a class="layui-btn layui-btn-xs" data-dropdown="#userTbDrop_{{d.userId}}" ... class="layui-icon layui
  • 参考该文章,总结很详细 点击此处=>http://www.shagua.wiki/project/3?p=84
  • 按钮: <button class="layui-btn layui-btn-sm" lay-filter="formDemo" type="submit" id="formDemo" lay-submit="">保存</button> 禁用按钮: $('#formDemo').attr("disabled",true).addClass("layui...
  • 今天小编就为大家分享一篇layui弹出层按钮提交iframe表单的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • layui 表格按钮显隐

    2021-03-09 15:25:47
    <... {{# if(d.status==2){}} <a class="layui-btn layui-btn-xs" lay-event="info">...a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="cancel">作废</a> {{# } else { }} <a cla
  • layui隐藏按钮

    千次阅读 2020-02-15 13:41:09
    //置灰并使其失效 $("#approvalBtn").addClass("layui-btn layui-btn-radius layui-btn-disabled").prop("disabled" , true); //添加隐藏样式 $("#approvalBtn").css({"display": "none"}); ...
  • 按钮生成及隐藏权限: <script type="text/html" id="barDemo" > <a class="layui-btn layui-btn-xs layui-btn-normal btn-auth" lay-event="show" ekper="web/disease/showDisease">查看</a>...
  • layui前端控制radio单选按钮不可选 效果图 试了很多方法都不可行 在前端都没法控制 结果!只要在最后加个disabled就可以了 气死了 代码如下 是否业务合同
  • 一个选课系统,里面后端判断此课程是否已经选过, 后端传给前端的参数中有一个Boolean choose的属性,根据此属性,前端展示是否将按钮置灰不可点击。 layui官网按钮。 ...
  • 三个按钮: ,btn: [‘拨打’,‘挂断’,‘关闭’] ‘拨打’,‘挂断’ 这两个是不同时出现的。 var dialog = layer.open({ type: 2 ,title: '拨打电话' ,content: 'customerPhone.jsp' ,maxmin: true ,area: ...
  • 1、修改标签长度 <style> .layui-form-label { width: 120px !important; text-align: right !important;... .layui-input-block { ...2、修改按钮颜色 //将样式为layui-btn-normal 改变颜色 .lay...
  • layui按钮开关checkbox实战摘要业务场景表格字段代码参考思路小结 摘要 上一篇分享了layui美化按钮开关checkbox,具体可以到我的主页阅览 但是很遗憾的是我没有用table.on或者是form.on,因为渲染的问题我不想纠结了...
  • layui按钮禁用与启用 ...
  • layui按钮,根据表单行数据的状态值,来隐藏和显示 实现效果如下: 主要前端代码:` <script type="text/html" id="tableBar"> {{# if(d.headStatus == '新建(未审核)'){ }} <a class="layui-btn ...
  • 由于是小菜鸟,所用最开始只会用普通的css按钮,然后通过onclick事件来控制div的显隐,但是“师傅”却要求用layui按钮,当时只会把按钮替换成layui的开关按钮,但是却不知道怎么去控制它让div显隐,通过查找了很多...
  • layui中设置提交按钮不可以重复提交,提交一次后置灰。 首先要在jsp中给按钮设置属性 <div class="layui-card-header layuiadmin-card-header-auto" style="padding-bottom:0px;"> <button class="layui-...
  • <#include "/admin/commons/_detailheader.ftl" />... .layui-table td .layui-table-cell { height: 80px; line-height: 80px; } </style> <div class="layui-card-body" style="padding:0 6px.
  • layui开关按钮及代码实现

    千次阅读 2020-12-19 16:23:40
    layui开关按钮及代码实现 效果图: 一、html 实现页面 <script type="text/html" id="switch"> {{d.statusStr}}&emsp; @if(shiro.hasPermission("/goodsBrand/updateStatus")){ <input type=...
  • 下面是layui,form表单 - 页面元素开关按钮控制函数,可做参考: functionchangeOneSwitch(){ if($("input").prop('checked')){ //如果当前是选中,执行此代码 $("input").prop('checked',false) }else{ //如果...
  • 根据订单不同的状态显示不同的按钮 官方文档:https://www.layui.com/doc/modules/table.html#templet 实现方法 1 方式一:绑定模版选择器。 <script type="text/html" id="titleTpl"> {{# if(d.id < 100...
  • layui表格按钮跳转页面

    万次阅读 2019-09-28 08:36:40
    作者:卢远平 撰写时间:2019.9.27 Layui的表格按钮跳转在很...所以layui表格数据里的按钮很实用。先在页面写好表格格式,在最后加上操作列,在操作列里拼上查看按钮。 这个一个查看按钮的拼接,要获取对应数据的ID...

空空如也

空空如也

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

layui按钮控制