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 相关文章推荐
JavaScript在浏览器标题栏上显示当前日期和时间的方法
Mar 19 Javascript
Javascript中String的常用方法实例分析
Jun 13 Javascript
JS+CSS实现表格高亮的方法
Aug 05 Javascript
jQuery 选择同时包含两个class的元素的实现方法
Jun 01 Javascript
详解Angular2中的编程对象Observable
Sep 17 Javascript
JavaScript对象封装的简单实现方法(3种方法)
Jan 03 Javascript
JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome
Jan 05 Javascript
JS传播事件、取消事件默认行为、阻止事件传播详解
Aug 14 Javascript
浅析为什么a=&quot;abc&quot; 不等于 a=new String(&quot;abc&quot;)
Oct 25 Javascript
Node.js中读取TXT文件内容fs.readFile()用法
Oct 10 Javascript
Vue 动态组件components和v-once指令的实现
Aug 30 Javascript
JS获取表格视图所选行号的ids过程解析
Feb 21 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下使用SMTP发邮件的代码
2008/01/10 PHP
php 读取shell管道传输过来的内容
2010/03/01 PHP
php curl登陆qq后获取用户信息时证书错误
2015/02/03 PHP
php curl操作API接口类完整示例
2019/05/21 PHP
windows 2008r2+php5.6.28环境搭建详细过程
2019/06/18 PHP
用ASP将SQL搜索出来的内容导出为TXT的代码
2007/07/27 Javascript
jQuery.each()用法分享
2012/07/31 Javascript
JQuery实现表格动态增加行并对新行添加事件
2014/07/30 Javascript
原生JS封装ajax 传json,str,excel文件上传提交表单(推荐)
2016/06/21 Javascript
将html页面保存成图片,图片写入pdf的实现方法(推荐)
2016/09/17 Javascript
vue checkbox 全选 数据的绑定及获取和计算方法
2018/02/09 Javascript
Angular通过指令动态添加组件问题
2018/07/09 Javascript
JavaScript箭头函数中的this详解
2019/06/19 Javascript
基于VUE的v-charts的曲线显示功能
2019/10/01 Javascript
公众号SVG动画交互实战代码
2020/05/31 Javascript
解决vue+router路由跳转不起作用的一项原因
2020/07/19 Javascript
ant design vue datepicker日期选择器中文化操作
2020/10/28 Javascript
用vue设计一个日历表
2020/12/03 Vue.js
[02:36]DOTA2亚洲邀请赛小组赛精彩集锦:奇迹哥卡尔秀翻全场
2017/03/28 DOTA
[47:31]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第一场 12.12
2020/12/16 DOTA
python 线程的暂停, 恢复, 退出详解及实例
2016/12/06 Python
python通过pip更新所有已安装的包实现方法
2017/05/19 Python
python3操作微信itchat实现发送图片
2018/02/24 Python
Python 寻找局部最高点的实现
2019/12/05 Python
浅谈Python中range与Numpy中arange的比较
2020/03/11 Python
pytorch VGG11识别cifar10数据集(训练+预测单张输入图片操作)
2020/06/24 Python
实例讲解CSS3中Transform的perspective属性的用法
2016/04/22 HTML / CSS
机械工程师的岗位职责
2013/11/17 职场文书
信息管理员岗位职责
2013/12/01 职场文书
小学生获奖感言范文
2014/02/02 职场文书
《小小竹排画中游》教学反思
2014/02/26 职场文书
2014年向国旗敬礼活动方案
2014/09/27 职场文书
湖南省召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
白鹤梁导游词
2015/02/06 职场文书
毕业设计答辩开场白
2015/05/29 职场文书
行政处罚告知书
2015/07/01 职场文书