layui实现下拉复选功能的例子(包括数据的回显与上传)


Posted in Javascript onSeptember 24, 2019

一、layui下拉复选实现的背景:实现一个管理员拥有多个权限

二、 具体实现:

//依赖资源

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/src/layui-formSelects-master/dist/formSelects-v4.css" rel="external nofollow" />
<!-- 引入组件 -->
<script src="${pageContext.request.contextPath}/src/layui-formSelects-master/dist/formSelects-v4.js" type="text/javascript" charset="utf-8"></script>

//页面显示

<div class="layui-inline">
    <label class="layui-form-label" style="color: #666666;width: 70px">角色:</label>
    <div class="layui-input-block" style="width: 300px">
       <select name="role_id" id="role_id" xm-select-height="36px"
       xm-select-search xm-select-skin="default" xm-select="sys_role" lay-filter="sys_role">
       </select>
    </div>
  </div>

//配置路径

layui.config({
    base: "${pageContext.request.contextPath }/src/layui-formSelects-master/dist/"    //formSelects-v4.js的路径
  }).extend({
    formSelects: 'formSelects-v4'
  }).use(['form','jquery','upload','layer','formSelects'],function(){
    var form =layui.form,$ =layui.jquery,upload=layui.upload,layer=layui.layer,formSelects=layui.formSelects;
//从后台数据库中查出后回显
    $.ajax({
      url: "${pageContext.request.contextPath}/menu/queryall.action",
      type: "post",
      success: function (data) {
        var str= '${sys_user.role_id}';
        str_arr= []; //str="1,2,3"
        str_arr= str.split(",");//获取那些该选中的数据
         for(var i=0;i<data.data.length;i++){
           if(data.data[i].status==1){
             var option= new Option(data.data[i].role,data.data[i].id); //全部列表信息展示 }
              for(var j=0;j<str_arr.length;j++){
                if(str_arr[j]==data.data[i].id){
                   option.setAttribute("selected",true);//确定哪些是选中的
                }
               }
           }
          $("#role_id").append(option);
         }
        formSelects.render();//渲染效果
       }
       , error: function () {
        alert("查询用户角色失败")
       }
    
   });

以上这篇layui实现下拉复选功能的例子(包括数据的回显与上传)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
HTML5附件拖拽上传drop &amp; google.gears实现代码
Apr 28 Javascript
关于javascript event flow 的一个bug详解
Sep 17 Javascript
javascript按位非运算符的使用方法
Nov 14 Javascript
JavaScript引用类型和基本类型详解
Jan 06 Javascript
jquery实现ajax提交表单信息的简单方法(推荐)
Aug 24 Javascript
socket.io学习教程之基本应用(二)
Apr 29 Javascript
Node.js  REPL (交互式解释器)实例详解
Aug 06 Javascript
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
Oct 23 Javascript
详解开源的JavaScript插件化框架MinimaJS
Oct 26 Javascript
Vue 实现从文件中获取文本信息的方法详解
Oct 16 Javascript
vue+animation实现翻页动画
Jun 29 Javascript
解决ant design vue中树形控件defaultExpandAll设置无效的问题
Oct 26 Javascript
基于layui的下拉列表的数据回显方法
Sep 24 #Javascript
Layui动态生成select下拉选择框不显示的解决方法
Sep 24 #Javascript
layui动态渲染生成select的option值方法
Sep 23 #Javascript
微信小程序全局变量GLOBALDATA的定义和调用过程解析
Sep 23 #Javascript
layui-select动态选中值的例子
Sep 23 #Javascript
layui多图上传实现删除功能的例子
Sep 23 #Javascript
layui 上传插件 带预览 非自动上传功能的实例(非常实用)
Sep 23 #Javascript
You might like
PHP通过COM使用ADODB的简单例子
2006/12/31 PHP
在wamp集成环境下升级php版本(实现方法)
2013/07/01 PHP
PHP中把stdClass Object转array的几个方法
2014/05/08 PHP
PHP+Mysql基于事务处理实现转账功能的方法
2015/07/08 PHP
详解PHP中的null合并运算符
2015/12/30 PHP
jquery复选框CHECKBOX全选、反选
2008/08/30 Javascript
JavaScript游戏之优化篇
2010/11/08 Javascript
JavaScript Memoization 让函数也有记忆功能
2011/10/27 Javascript
Extjs优化(一)删除冗余代码提高运行速度
2013/04/15 Javascript
JavaScript全排列的六种算法 具体实现
2013/06/29 Javascript
jQuery 监控键盘一段时间没输入
2016/04/22 Javascript
nodeJs内存泄漏问题详解
2016/09/05 NodeJs
js每隔两秒输出数组中的一项(实例)
2017/05/28 Javascript
微信小程序实现手指触摸画板
2018/07/09 Javascript
JS中实现隐藏部分姓名或者电话号码的代码
2018/07/17 Javascript
JS module的导出和导入的实现代码
2019/02/25 Javascript
pageGroup.js实现分页功能
2019/07/27 Javascript
Js参数RSA加密传输之jsencrypt.js的使用
2020/02/07 Javascript
在Python中使用dict和set方法的教程
2015/04/27 Python
Python中的getopt函数使用详解
2015/07/28 Python
Python获取当前函数名称方法实例分享
2018/01/18 Python
django的csrf实现过程详解
2019/07/26 Python
Python socket非阻塞模块应用示例
2019/09/12 Python
在HTML5中如何使用CSS建立不可选的文字
2014/10/17 HTML / CSS
HTML5 video标签(播放器)学习笔记(一):使用入门
2015/04/24 HTML / CSS
FOREO官方网站:LUNA露娜洁面仪
2016/11/28 全球购物
Clarisonic美国官网:科莱丽声波洁面仪
2017/10/12 全球购物
英国内衣连锁店:Boux Avenue
2018/01/24 全球购物
益模软件Java笔试题
2012/03/27 面试题
哪些情况下不应该使用索引
2015/07/20 面试题
六月份红领巾广播稿
2014/02/03 职场文书
学习标兵获奖感言
2014/02/20 职场文书
数控专业毕业生自荐信范文
2014/03/04 职场文书
捐款倡议书怎么写
2014/05/13 职场文书
2016年优秀共产党员先进事迹材料
2016/02/29 职场文书
python基础之类方法和静态方法
2021/10/24 Python