精华内容
下载资源
问答
  • 惯例,先上图:这是在一个项目,为了满足样式美观、多级菜单以及多选而将zTree插件更改过后的效果。在实际的开发过程,本来zTree也是可以满足需求的,但是zTree多选的话需要checkbox选择框,这样导致样式风格和...

    惯例,先上图:

    这是在一个项目中,为了满足样式美观、多级菜单以及多选而将zTree插件更改过后的效果。

    在实际的开发过程中,本来zTree也是可以满足需求的,但是zTree多选的话需要checkbox选择框,这样导致样式风格和项目总体不一致。下面是根据ztree所修改的内容。

    如上图 这是个outlook样式的菜单。

    我们只需要简单的右键,查看代码,就可以把源码拿下来看看。

    我们需要的源码如下:

    如上  这是我们需要的源码    但是有些并不需要,经过修改后如下:

    var zNodes =[]; //数据的格式已经在上一段代码中表示了 这里我就去掉了//人员列表

    $.ajax({

    url:"searchPeopleJson",

    async:false,

    success:function(resultData){var result= eval("("+resultData+")");

    zNodes=result; //这是获取下拉列表的数据 因为我的是在数据库中获取的

    }

    });functionlistShow(divid,btnId,btnIndex) {var ulId="";

    value="";

    pIndex="";

    selectCount=false;

    $("#"+btnId).attr("value", "");

    $("#"+btnIndex).attr("value", "");if(divid=="div1personTree1"){

    ulId="personTree1";

    }else if(divid=="div2personTree2"){

    ulId="personTree2";

    }var curMenu = null, zTree_Menu = null;var setting ={

    view: {

    showLine:false,

    showIcon:false,

    selectedMulti:true,

    dblClickExpand:true,

    addDiyDom: addDiyDom

    },

    data: {

    simpleData: {

    enable:true}

    },

    callback: {

    beforeClick: beforeClick

    }

    };functionaddDiyDom(treeId, treeNode) {var spaceWidth = 5;var switchObj = $("#" + treeNode.tId + "_switch"),

    icoObj= $("#" + treeNode.tId + "_ico");

    switchObj.remove();

    icoObj.before(switchObj);if (treeNode.level > 1) {var spaceStr = "";

    switchObj.before(spaceStr);

    }

    }functionbeforeClick(treeId, treeNode) {if(treeNode.isParent) {var zTree =$.fn.zTree.getZTreeObj(ulId);

    zTree.expandNode(treeNode);return false;

    }return true;

    }

    $(document).ready(function() {var treeObj = $("#"+ulId);

    $.fn.zTree.init(treeObj, setting, zNodes);

    zTree_Menu=$.fn.zTree.getZTreeObj(ulId);//curMenu = zTree_Menu.getNodes()[0].children[0].children[0];

    //zTree_Menu.selectNode(curMenu);

    treeObj.addClass("showIcon");

    });/*if($("#"+btnId).attr("readonly")=="readonly"){

    return false;

    }*/

    //$("#"+divid).css("display", "block");

    showMenu(divid,btnId);return false;

    }functionshowMenu(divid,btnId) {var cityObj = $("#"+btnId);var cityOffset = $("#"+btnId).offset();

    $("#"+divid).css("display", "block").slideDown("fast");

    $("body").bind("mousedown",{btnId:btnId,divid:divid}, onBodyDown);

    }functionhideMenu(divid,btnId) {

    $("#"+divid).fadeOut("fast");

    $("body").unbind("mousedown", onBodyDown);

    }functiononBodyDown(event) {if (!(event.target.id == event.data.btnId || event.target.id == event.data.divid || $(event.target).parents("#"+event.data.divid).length>0)) {

    hideMenu(event.data.divid,event.data.btnId);

    }

    }

    这是我根据项目实际情况而更改的    我们将原来的鼠标浮动到上面之后显示图标给改成一直显示   然后将除第一级以外的菜单需要点击图标才能展开和关闭改成点击标题就可以展开和关闭了     方便用户的操作。   下面的三个方法是用来显示和隐藏下拉列表的,当文本框失去焦点的时候触发。

    我们的html代码如下:

    第二负责人

    展开全文
  • 这是在一个项目,为了满足样式美观、多级菜单以及多选而将zTree插件更改过后的效果。 在实际的开发过程,本来zTree也是可以满足需求的,但是zTree多选的话需要checkbox选择框,这样导致样式风格和项目总体不...

    惯例,先上图:

    这是在一个项目中,为了满足样式美观、多级菜单以及多选而将zTree插件更改过后的效果。

    在实际的开发过程中,本来zTree也是可以满足需求的,但是zTree多选的话需要checkbox选择框,这样导致样式风格和项目总体不一致。下面是根据ztree所修改的内容。

    如上图 这是个outlook样式的菜单。

    我们只需要简单的右键,查看代码,就可以把源码拿下来看看。

    我们需要的源码如下:

    <SCRIPT type="text/javascript">
            <!--
            var curMenu = null, zTree_Menu = null;
            var setting = {
                view: {
                    showLine: false,
                    showIcon: false,
                    selectedMulti: false,
                    dblClickExpand: false,
                    addDiyDom: addDiyDom
                },
                data: {
                    simpleData: {
                        enable: true
                    }
                },
                callback: {
                    beforeClick: beforeClick
                }
            };
           //这里就是下拉列表的格式,通过id和pid控制所属的节点和级别
            var zNodes =[
                { id:1, pId:0, name:"文件夹", open:true},
                { id:11, pId:1, name:"收件箱"},
                { id:111, pId:11, name:"收件箱1"},
                { id:112, pId:111, name:"收件箱2"},
                { id:113, pId:112, name:"收件箱3"},
                { id:114, pId:113, name:"收件箱4"},
                { id:12, pId:1, name:"垃圾邮件"},
                { id:13, pId:1, name:"草稿"},
                { id:14, pId:1, name:"已发送邮件"},
                { id:15, pId:1, name:"已删除邮件"},
                { id:3, pId:0, name:"快速视图"},
                { id:31, pId:3, name:"文档"},
                { id:32, pId:3, name:"照片"}
            ];
    
            function addDiyDom(treeId, treeNode) {
                var spaceWidth = 5;
                var switchObj = $("#" + treeNode.tId + "_switch"),
                icoObj = $("#" + treeNode.tId + "_ico");
                switchObj.remove();
                icoObj.before(switchObj);
    
                if (treeNode.level > 1) {
                    var spaceStr = "<span style='display: inline-block;width:" + (spaceWidth * treeNode.level)+ "px'></span>";
                    switchObj.before(spaceStr);
                }
            }
    
            function beforeClick(treeId, treeNode) {
                if (treeNode.level == 0 ) {
                    var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                    zTree.expandNode(treeNode);
                    return false;
                }
                return true;
            }
    
            $(document).ready(function(){
                var treeObj = $("#treeDemo");
                $.fn.zTree.init(treeObj, setting, zNodes);
                zTree_Menu = $.fn.zTree.getZTreeObj("treeDemo");
                curMenu = zTree_Menu.getNodes()[0].children[0].children[0];
                zTree_Menu.selectNode(curMenu);
    
                treeObj.hover(function () {
                    if (!treeObj.hasClass("showIcon")) {
                        treeObj.addClass("showIcon");
                    }
                }, function() {
                    treeObj.removeClass("showIcon");
                });
            });
            //-->
        </SCRIPT>


    如上  这是我们需要的源码    但是有些并不需要,经过修改后如下:

    var zNodes = [];   //数据的格式已经在上一段代码中表示了   这里我就去掉了
                //人员列表
                  $.ajax({
                        url:"searchPeopleJson",
                        async:false,
                        success: function(resultData){
                            var result= eval("("+resultData+")");
                            zNodes=result;   //这是获取下拉列表的数据   因为我的是在数据库中获取的
                        }
                  });
        
        function listShow(divid,btnId,btnIndex) {
            var ulId="";
            value="";
            pIndex="";
            selectCount=false;
            $("#"+btnId).attr("value", "");
            $("#"+btnIndex).attr("value", "");
            if(divid=="div1personTree1"){
                ulId="personTree1";
            }else if(divid=="div2personTree2"){
                ulId="personTree2";
            }
            var curMenu = null, zTree_Menu = null;
            var setting = {
                view: {
                    showLine: false,
                    showIcon: false,
                    selectedMulti: true,
                    dblClickExpand: true,
                    addDiyDom: addDiyDom
                }, 
                data: {
                    simpleData: {
                        enable: true
                    }
                },
                callback: {
                    beforeClick: beforeClick
                }
            };
            function addDiyDom(treeId, treeNode) {
                var spaceWidth = 5;
                var switchObj = $("#" + treeNode.tId + "_switch"),
                icoObj = $("#" + treeNode.tId + "_ico");
                switchObj.remove();
                icoObj.before(switchObj);
    
                if (treeNode.level > 1) {
                    var spaceStr = "<span style='display: inline-block;width:" + (spaceWidth * treeNode.level) + "px'></span>";
                    switchObj.before(spaceStr);
                }
            }
    
            function beforeClick(treeId, treeNode) {
                if (treeNode.isParent) {
                    var zTree = $.fn.zTree.getZTreeObj(ulId);
                    zTree.expandNode(treeNode);
                    return false;
                }
                return true;
            }
    
            $(document).ready(function () {
                var treeObj = $("#"+ulId);
                $.fn.zTree.init(treeObj, setting, zNodes);
                zTree_Menu = $.fn.zTree.getZTreeObj(ulId);
                //curMenu = zTree_Menu.getNodes()[0].children[0].children[0];
               // zTree_Menu.selectNode(curMenu);
    
                treeObj.addClass("showIcon");
              
            });
            /* if($("#"+btnId).attr("readonly")=="readonly"){
                return false;
            } */
            //$("#"+divid).css("display", "block");
            showMenu(divid,btnId);
            return false;
        }
        function showMenu(divid,btnId) {
            var cityObj = $("#"+btnId);
            var cityOffset = $("#"+btnId).offset();
            $("#"+divid).css("display", "block").slideDown("fast");
            $("body").bind("mousedown",{btnId:btnId,divid:divid}, onBodyDown);
        }
        function hideMenu(divid,btnId) {
            $("#"+divid).fadeOut("fast");
            $("body").unbind("mousedown", onBodyDown);
        }
        function onBodyDown(event) {
            if (!(event.target.id == event.data.btnId || event.target.id == event.data.divid || $(event.target).parents("#"+event.data.divid).length>0)) {
                hideMenu(event.data.divid,event.data.btnId);
            }
        }

    这是我根据项目实际情况而更改的    我们将原来的鼠标浮动到上面之后显示图标给改成一直显示   然后将除第一级以外的菜单需要点击图标才能展开和关闭改成点击标题就可以展开和关闭了     方便用户的操作。   下面的三个方法是用来显示和隐藏下拉列表的,当文本框失去焦点的时候触发。
    我们的html代码如下:

                                                    <label for="txtChargePersonS" class="col-sm-2 control-label">第二负责人</label>
                                                    <div id="cyPersonDiv" class="col-sm-4">
                                                        <input type="hidden" id="txtHiddenSPerson" name="tpj.cyLeader" />
                                                        <input id="txtChargePersonS" readonly personIndex="0" onfocus="listShow('div2personTree2','txtChargePersonS','txtHiddenSPerson');" type="text" class="form-control zTreeDemoBackground" placeholder="第二负责人">
                                                        <div id="div2personTree2" style="display:none;z-index:1000; position:absolute; " name="province" type="selectbox" class="zTreeDemoBackground">
                                                          <ul id="personTree2" style=" height:175px;" class="ztree"></ul>
                                                        </div>
                                                    </div>


    因为我的项目里面多处用到这个下拉菜单,因此我通过参数传递的方式将id传递到方法内部。

    如此,我们就可以通过点击文本框显示下拉列表     当文本框失去焦点之后隐藏下拉列表。

    那么数据有了  显示没问题了    怎么才能让下拉列表在点击的时候将点击的值放到文本框中呢?

    我们在使用zTree的时候需要下载ztree的几个js文件,我们可以在jquery.ztree.core-3.5.js中去实现。

    在jquery.ztree.core-3.5.js中有个_setting的初始化代码,显示属性的初始化还有事件的初始化等等,如下图:

    这是下拉列表的点击事件,我们写上自己的事件。

    请看下面的代码:

    var value="";    //文本框中显示的值    例:张三,李四,王五
    var pIndex="";    //选择值得id    例:1,2,3
    var selectCount=false;   //表示是否为第一次选择     用于清除拼接的逗号
    function OnListClick(event, treeId, treeNode, clickFlag) {
        if (treeNode.isParent) {
            return;
        }
        value+=","+treeNode.name;
        pIndex+=","+treeNode.id;
        if(selectCount==false){     //这里清除第一个逗号
            value=value.substr(1,value.length);
            pIndex=pIndex.substr(1,pIndex.length);
            selectCount=true;
        }
        var valueObj="";
        var pIndexObj="";
        if(treeId=="personTree1"){      
            $("#div1personTree1").css("display","none");
            $("#txtChargePerson").attr("value", treeNode.name);
            $("#txtHiddenPerson").attr("value", treeNode.id);
        }else if(treeId=="personTree2"){
    
            valueObj=$("#txtChargePersonS");
            pIndexObj=$("#txtHiddenSPerson");
            valueObj.attr("value", value);    //选择多项的时候拼接的值
            pIndexObj.attr("value",pIndex);//选择多项的时候拼接的id
        }else if(treeId=="personTree3"){
            $("#div3personTree3").css("display","none");
            $("#txtChargePersonItem").attr("value", treeNode.name);
            $("#txtHiddenCPerson").attr("value", treeNode.id);
        }else if(treeId=="personTree4"){
            valueObj=$("#txtExaminePerson");
            pIndexObj=$("#txtHiddenEPerson");
            valueObj.attr("value", value);
            pIndexObj.attr("value",pIndex);
        }else if(treeId=="personTree5"){
    
            valueObj=$("#txtDesignPerson");
            pIndexObj=$("#txtHiddenDPerson");
            valueObj.attr("value", value);
            pIndexObj.attr("value",pIndex);
        }
        
    
    }

    如上代码     因为我的是多个地方使用    所有if  else  弄了多个      需要的话 参照其中一个就可以了

    修改就是这么简单,如果有更好的方案欢迎分享和讨论。

     

    技术交流群:94234450  

    点击加入QQ群:

    不管你遇到了什么问题,我们绝不会让你独自去面对!

    转载于:https://www.cnblogs.com/BeiJing-Net-DaiDai/p/4318876.html

    展开全文
  • 里面包括例子、注释、说明等 适合初学者,一看就懂,网上类似这样 的例子都不是很简单, 但是我自己写的这个很简单、值需套用即可。
  • 在有效性条件的“允许”选项,选择“序列”,将“提供下拉箭头”打钩,来源为“原始数据所需选择条件”,点击确定。步骤4. 选中原始数据,打开公式工具栏,选择“根据所选内容创建”,确定。步骤5.选中G2,打开...

    关键字:数据有效性,定义名称,indirect函数

    操作步骤:

    步骤1.准备好原始数据

    4ec9b14fc8f34b96ecf49a4202f30b2e.png

    步骤2.选中E列,打开数据工具栏,选择“数据有效性”

    0c9725c609b9f73688fd86756b0906de.png

    步骤3. 在有效性条件的“允许”选项中,选择“序列”,将“提供下拉箭头”打钩,来源为“原始数据中所需选择条件”,点击确定

    c2c3a495fc0cbb91148529a59640d737.png

    步骤4. 选中原始数据,打开公式工具栏,选择“根据所选内容创建”,确定。

    cb8201e967a72ccf653d5c829e112fc6.png

    步骤5.选中G2,打开数据工具栏,选择“数据有效性”在有效性条件的“允许”选项中,选择“序列”,将“提供下拉箭头”打钩,来源处输入“indirect(F2)”公式,点击确定。

    182a4b43a93e8a8f113f36b30e5b38f1.png

    步骤6.复制G2,选中G列右键选择性粘贴“有效性验证”数据。

    3b9afa1504e534e8734172d8dcc59693.png

    结果如下图所示:

    e539be69baaafd39009cbe4065543305.png

    31d7812de6bbf040912ce22cc762e94c.png

    Excel880出书啦,欢迎各位支持!!! 

    系统学习可点左下角 ↓

    鸣谢:看到就是缘分,请各位看官多多点赞、评论和分享哦!实例教程请百度搜索365个Excel实例教程VBA视频教程请百度搜索 VBA175提问加Q群165159540 更多实例请到Excel880网站搜索

    e678a69341fdf4d6eeac938724f0ee7e.png

    展开全文
  • 第二个是复选下拉菜单,主要提供了多选的功能,显示确定和重置按钮用于修改复选结果。 第三种是自定义内容,提供给用户自己写组件内容的插槽。 代码的详细解释就不用说了,直接上代码片段,可以在微信开发者工具...

    先看需求和效果,移动端设计比较常用的下拉菜单,主要用于筛选查询列表结果。下拉菜单的样式可以根据自己的具体需求进行修改。这里根据自己的实际需求开发了三种下拉类型:

    效果展示

    第一个是单选下拉菜单,单选之后立即收起。
    在这里插入图片描述
    第二个是复选下拉菜单,主要提供了多选的功能,显示确定和重置按钮用于修改复选结果。
    在这里插入图片描述
    第三种是自定义内容,提供给用户自己写组件内容的插槽。
    在这里插入图片描述

    要点

    1. 组件间的关系

    父组件WXML

    <view class="mt_dropdown" id="mt_dropdown">
      <slot></slot>
    </view>
    

    DEMO运用组件

    <mt-dropdown>
    	<mt-dropdown-item></mt-dropdown-item>
    	<mt-dropdown-item></mt-dropdown-item>
    </mt-dropdown>
    

    主要问题:子组件是放在slot插槽里面,如何和父组件进行沟通。因为遮罩层是嵌在子组件里的,所以需要点击打开一个下拉菜单子项的时候,去关闭其余下拉菜单子项。大家有空可以去看下vant-weapp的源码,这里处理的较为简单。最主要的问题就是<mt-dropdown-item><mt-dropdown>之间如何沟通。

    遇事不决先看文档微信小程序-组件间关系,主要是relations定义段


    微信小程序代码片段,可以在微信开发者工具中查看效果和代码。

    我在小程序开发的过程中也开发了许多组件,可以在我的gitee地址中去查看,所有组件的API都可以在Wiki中查看(有的太懒就没写了),如果好的建议可以留言给我或者评论跟我讨论。如果对你有用可以点赞、收藏、分享。

    展开全文
  • Element UI 之 Tabs 栏下拉菜单实现 产品小姐姐有一个业务需求,Tabs 组件...在 el-dropdown 通过双向绑定,实现单选或多选(PS: 多选实现,需要设置菜单隐藏方式。涉及样式代码较多,本文没有弄这一步) 二、完整
  • 下拉菜单的完成实现

    2018-07-02 22:42:39
    最近在写一个项目,jsp页面的需求需要下拉菜单,我好久没写前端页面了,所以特地写下这篇文章以便日后总结与便捷。 1.select:返回下拉列表中选选项的索引。 2.options:返回列表框以及下拉菜单所以选项组成的...
  • 在计算机应用,下拉式选单是选单的一种...下拉菜单内的项目可以据需要设置为多选或单选,可以用来替代一组复选框(设置为多选)或单选框(设置为单选)。这样比复选框组或单选框组的占用位置小,但不如它们直观。使用 ...
  • 在浏览网站的时候,我们经常可以看到下拉菜单的效果,所以网页的开发过程中下拉菜单有时是不得不使用的,今天的这篇文章就来给大家分享一下html下拉菜单实现方法,有需要的朋友可以参考一下。话不多说,让我们来...
  • 在计算机应用,下拉式选单是选单的一...下拉菜单内的项目可以据需要设置为多选或单选,可以用来替代一组复选框(设置为多选)或单选框(设置为单选)。这样比复选框组或单选框组的占用位置小,但不如它们直观。本文通...
  • html下拉菜单

    2017-03-15 08:53:12
    在html里面,下拉菜单的菜单的实现使用了属性 代码: ---请选择学历--- 高中 大专 本科 硕士 其中multiple表示多选,selected表示默认选中 注意的是,单选框和复选框的默认选中属性是checked 代码: ...
  • //出的问题自己记录一哈...数据源是律师擅长案件的所有分类,在添加一个律师时需要选择多个擅长案件分类,我选择的是多选下拉菜单(用复选框也可以)如下图: 表单使用,代码如下: $data=Lawskillclassify::all(...
  • 若要实现二级也是下拉菜单,可以将multiple改了即可。全动态二级联动下拉列表/************************************************* 功 能:PHP+mysql实现二级级联下拉框** 数据库:数据库名(db_city)、数据表(t_...
  • 这两天在开发过程,重写了 QComboBox 这个控件,参考这篇博客 Qt 组合框QComboBox定制颜色选择框 实现的 但是发现了一个奇怪的问题,就是在加载数据后,初始化是正确的 但是在多次点击下拉按钮后,或者是从某次...
  • ![图片说明](https://img-ask.csdn.net/upload/201509/10/1441870589_418333.jpg) Boss说要改成下拉菜单,可以多选。 不知道用asp.net mvc 的dropdownlist 如何实现呢? 谢谢各位了!
  • Poi生成可多选下拉框excel步骤:先准备一个带有VB语言实现下拉菜单多选功能的Excel模板a数据-->数据有效性-->数据有效性,“允许”选择“序列”,然后把需要选择的内容输入到来源里,中间用英文逗号“,”隔开...
  • 在实际的项目,总会遇到下拉框需要多选的需求。其实使用easyui实现该功能并不难。主要方法是使用combobox的formatter这个方法。 下面写个例子。 1.首先设置combobox的multiple属性为true 2.使用formatter...
  • 若要实现二级也是下拉菜单,可以将multiple改了即可。<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>全动态二级联动下拉列表...
  • select3搜索下拉

    2018-05-18 15:57:00
    通过修改实现了既能单选搜索的下拉树又能多选搜索的下拉树,并且下拉树的菜单项从后台获取数据,简直棒极了! 下面说下我如何实现的 1、项目先引入css js 基于jquery的所以需要引入jqueryjs <link r...
  •  下拉菜单 multiple:可多选   多行文本框   提交   时间选择   一、隐式对象   提示码:200:正确执行||404 页面不存在|| 500 页面存在但后台处理出错   在JSP
  • multiple-select是一款优秀的下拉菜单控件,能够支持单选和多选。 详细参考文档: JS组件系列——两种bootstrap multiselect组件大比拼 multiple-select 本项目通过使用控件multiple-select实现动态创建单选...
  • 若要实现二级也是下拉菜单,可以将multiple改了即可。全动态二级联动下拉列表/************************************************* 功 能:PHP+mysql实现二级级联下拉框** 数据库:数据库名(db_city)、数据表(t_...
  • 我需要在多选下拉滚动栏滚动时实现无限滚动 . 它不适用于多选下拉菜单,但无限滚动适用于div . 我看到onItemSelect和onItemDeselect的事件没有找到任何滚动多选下拉列表的事件 .我包括以下代码:$scope.example14...
  • 这种多选下拉菜单见过吗?左边的可以点击SHIFT进行多选选择,选择的字段就到了右边的菜单栏了,右边的菜单栏可以删除已选的,如下图。不知道这种是怎么实现的?有没人说一说,或者有代码。。。。让我看一看
  • 选择下拉菜单</TITLE> <meta http-equiv=Content-Type content=text/html; charset=gb2312> <META NAME=Description CONTENT=Power by hill> </HEAD> <BODY> 选定一项或多项然后点击...
  • 1、由于iview和elementUI,都没有支持列选择性展示或者隐藏,选择项为竖列,如...要做成竖着显示,偏偏iview的多选下拉菜单都是单选,而且是点击之后就会隐藏选项,但是elementUIel-dropdown :hide-on-clic...
  • 1:css-chart-window ...3:multiselect jquery 实现下拉多选实现4:手机端右侧响应式弹出菜单 h5实现的从屏幕左边或者右边滑出菜单5:jquery二维码以及条形码生成 (1)qrcode 二维码; (2)jquery-barcode...

空空如也

空空如也

1 2 3 4 5 6
收藏数 107
精华内容 42
关键字:

下拉菜单中实现多选