bootstrap doublebox带查询的穿梭框

最新推荐文章于 2022-04-27 18:53:00 发布

隔壁老王在此

最新推荐文章于 2022-04-27 18:53:00 发布

阅读量1.7k

点赞数 1

分类专栏：带查询的穿梭框文章标签： javascript jquery html html5

本文链接：https://blog.csdn.net/qq_36254571/article/details/115320377

版权

带查询的穿梭框专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何在不支持layui穿梭框的IE8环境下，利用Bootstrap来创建一个功能完善的穿梭框组件。文章通过示例代码展示了在父页面中调用穿梭框并回显选择结果的过程，并提供了弹出穿梭框页面的完整HTML和JavaScript实现。此外，作者还分享了一个已在实际环境中稳定运行的示例和相关资源下载链接。

摘要由CSDN通过智能技术生成

1.首先看效果图

我们的需求是带查询的穿梭框，试过layui的穿梭框兼容性(ie8)不是太好，现用bootstrap的穿梭框，效果不错

选择完之后在父页面回显

2.代码实现

父页面点击选择专家的时候方法

function chooseExpertNameTemplate(){
   var expertId=$("#expertId").val();
   var url = "/project/beforeApproval/chooseExpertNameTemplate.jsp?expertId="+expertId;
   var status = 'dialogwidth=600px;dialogheight=450px; status=no,scroll=no,resizable=no';
   selectMode="multi";
   var rtnPeoples = window.showModalDialog(url, window, status);
   if(typeof rtnPeoples == 'undefined' || rtnPeoples == '' || rtnPeoples == null){
       return false;
   };
   var smsTemplateIds=rtnPeoples.split("-_-")[0];
   var smsTemplateNames=rtnPeoples.split("-_-")[1];
   $("#expertId").val(smsTemplateIds);
   $("#expertName").val(smsTemplateNames);
   $("#templateContent").val(smsTemplateNames);
};

弹出穿梭框页面代码

<!DOCTYPE html>
<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<%
   String expertId = (String)request.getParameter("expertId");//获取选择专家id集合
%>
<html>
<head>
    <base target="_self" />
    <title>选择专家</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    
   <link rel="stylesheet" type="text/css" href="/project/css/bootstrap.css" />
   <link rel="stylesheet" type="text/css" href="/project/css/font-awesome.css">
   
   <link rel="stylesheet" type="text/css" href="/project/css/doublebox-bootstrap.css" />
   <style>
.ue-container {
       width: 100%;
       margin: 0 auto;
       margin-top: 3%;
       padding: 20px 40px;
       border: 1px solid #ddd;
       background: #fff;
   }
   </style>
</head>
<body>
   
   <div class="ue-container">
        <select multiple="multiple" size="10" name="doublebox" class="demo">
        </select>
   </div>
   <div class="botton" align="center" style="margin-top: 10px;">
       <input type="button" class="btn" value=" 确  定 " οnclick="submitSelected();"/>
               
       <input type="button" class="btn" value=" 取  消 " οnclick="cancelSelected();"/>
   </div>
    
    <script src="/project/js/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="/project/js/bootstrap.js"></script>
    <script type="text/javascript" src="/project/js/doublebox-bootstrap.js"></script>
    <script type="text/javascript">
        /* $(document).ready(function(){
          var demo2 = $('.demo').doublebox({
                  nonSelectedListLabel: '选择角色',
                  selectedListLabel: '授权用户角色',
                  preserveSelectionOnMove: 'moved',
                  moveOnSelect: false,
                  nonSelectedList:[{"userId":"1","userName":"zhangsan"},{"userId":"2","userName":"lisi"},{"userId":"3","userName":"wangwu"}],
                  selectedList:[{"userId":"4","userName":"zhangsan1"},{"userId":"5","userName":"lisi1"},{"userId":"6","userName":"wangwu1"}],
                  optionValue:"userId",
                  optionText:"userName",
                  doubleMove:true
            });
        }); */
        var expertId="<%=expertId%>";
        var doublefox;

        $(function() {
            var realNameCode;
            var selectedLabelList;
            $.ajax({
                url:"/project/expertMnanager?event=GetExpertListJson&expertId="+expertId,
                async:false,
                type:"post",
                dataType : "json",
                contentType:"application/json",
                success: function (data) {
                    realNameCode = data.expertAllData; // JOSN.parse(data)；将字符串换转成JSON对象
                    selectedLabelList = data.expertSelectedData; //由于返回本来就是Json对象无需进行转换
                },
                error:function(data){
                    console.log("弹窗标签所有列表获取异常");
                }
            });

             doublefox = $('.demo').doublebox({
                    nonSelectedListLabel: '选择专家', //左边栏lableName
                    selectedListLabel: '已选专家',    //右边栏lableName
                    preserveSelectionOnMove: 'moved',
                    moveOnSelect: false,
                    nonSelectedList:realNameCode,    //左边栏列表
                    selectedList:selectedLabelList,   //右边栏已选择列表
                    optionValue:"userId",    //option的选项值
                    optionText:"userName",          // option的文本值
                    doubleMove:true,            //控制全部选择和移除的显示
                });

        });

       function submitSelected(){
           var smsTemplateId='';
           var smsTemplateCode='';
           $('select[name="doublebox_helper2"]').find("option").each(function(index, item) {
                smsTemplateId=smsTemplateId+$(item).val()+',';
                smsTemplateCode=smsTemplateCode+$(item).text()+',';
           });
           if(smsTemplateId==""){
               alert("请选择专家!");
               return false;
           };
           smsTemplateId = smsTemplateId.substring(0,smsTemplateId.length-1);
           smsTemplateCode = smsTemplateCode.substring(0,smsTemplateCode.length-1);
            if (true) {//ie或360兼容模式
               window.returnValue = smsTemplateId+'-_-'+smsTemplateCode; //返回值到选择的那个页面
               window.close();
           }else{//其他浏览器
               selectedOrgs=smsTemplateContent;
               $(window.opener.document.getElementById("smsTemplateContent")).val(smsTemplateContent);
                window.close();
           }
       };

       function cancelSelected(){
           window.close();
           return false;
       };

      </script>
</body>
</html>

具体实现可以参考https://download.csdn.net/download/qq_36254571/16231766

上边下载地址我已经整理了demo和代码实现，现在已经在我们正式环境中稳定运行，有什么问题请@我

隔壁老王在此

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
bootstrap doublebox带查询的穿梭框

1.首先看效果图我们的需求是带查询的穿梭框，试过layui的穿梭框兼容性(ie8)不是太好，现用bootstrap的穿梭框，效果不错选择完之后在父页面回显2.代码实现父页面点击选择专家的时候方法function chooseExpertNameTemplate(){ var expertId=$("#expertId").val(); var url = "/project/beforeApproval/chooseExpertNameTemplate.jsp?e...
复制链接

扫一扫

专栏目录