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 相关文章推荐
让AJAX不依赖后端接口实现方案
Dec 03 Javascript
js切换div css注意的细节
Dec 10 Javascript
js实现杯子倒水问题自动求解程序
Mar 25 Javascript
复制js对象方法(详解)
Jul 08 Javascript
JavaScript学习笔记之定时器
Jan 22 Javascript
jquery实现可自动判断位置的弹出层效果代码
Oct 12 Javascript
详解javascript new的运行机制
Jan 26 Javascript
ES6解构赋值实例详解
Oct 31 Javascript
基于Three.js实现360度全景图片
Dec 30 Javascript
vscode 插件开发 + vue的操作方法
Jun 05 Javascript
Vue 监听元素前后变化值实例
Jul 29 Javascript
Bootstrap FileInput实现图片上传功能
Jan 28 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中的cookie
2006/11/26 PHP
封装ThinkPHP的一个文件上传方法实例
2014/10/31 PHP
PHP.vs.JAVA
2016/04/29 PHP
Smarty模板引擎缓存机制详解
2016/05/23 PHP
分析php://output和php://stdout的区别
2018/05/06 PHP
TP5.0框架实现无限极回复功能的方法分析
2019/05/04 PHP
Laravel自定义 封装便捷返回Json数据格式的引用方法
2019/09/29 PHP
JS 控件事件小结
2012/10/31 Javascript
jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别
2013/12/02 Javascript
javascript类型转换示例
2014/04/29 Javascript
TypeScript具有的几个不同特质
2015/04/07 Javascript
Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结
2015/04/15 Javascript
详解js的延迟对象、跨域、模板引擎、弹出层、AJAX【附实例下载】
2016/12/19 Javascript
浅析Vue 生命周期
2018/06/21 Javascript
详解React native fetch遇到的坑
2018/08/30 Javascript
微信小程序嵌入腾讯视频源过程详解
2019/08/08 Javascript
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
2020/09/27 Javascript
python使用cPickle模块序列化实例
2014/09/25 Python
Python实现拷贝/删除文件夹的方法详解
2018/08/29 Python
Python爬虫将爬取的图片写入world文档的方法
2018/11/07 Python
详解Python3注释知识点
2019/02/19 Python
Python切割图片成九宫格的示例代码
2020/03/10 Python
python导入库的具体方法
2020/06/18 Python
如何在keras中添加自己的优化器(如adam等)
2020/06/19 Python
全球航班旅行搜索网站:Cheapflights
2017/05/19 全球购物
凯普林包包西班牙官网:Kipling西班牙
2019/04/12 全球购物
加拿大户外探险购物网站:SAIL
2020/06/27 全球购物
智能电子应届生求职信
2013/11/10 职场文书
职业技术学校毕业生推荐信
2013/12/03 职场文书
计算机系统管理员求职信
2014/06/20 职场文书
建筑施工安全生产责任书
2014/07/22 职场文书
离婚协议书该怎么写
2014/10/04 职场文书
语文教师个人工作总结
2015/02/06 职场文书
工作态度不好检讨书
2015/05/06 职场文书
2016年公司“3.12”植树节活动总结
2016/03/16 职场文书
2019消防宣传标语!
2019/07/10 职场文书