精华内容
下载资源
问答
  • ExtJs4.2 treepicker下拉树效果

    千次阅读 2014-04-17 14:42:17
    ExtJs4.2 treepicker下拉树效果

    查看原文:http://www.ibloger.net/article/219.html


    借鉴两位朋友的代码,做的测试,一共2版,效果如下,版本差异代码在treepicker.js中有注释

     在extjs4.2 \examples\ux路径下,找到TreePicker.js文件,修改版代码下载地址: http://download.csdn.net/detail/matengyu036912/6619699。

    第一版:默认,包含根节点显示

    第二版:隐藏根节点

    源代码如下:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>ExtJs 下拉树测试</title>
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
    <script type="text/javascript" src="../../bootstrap.js"></script>
    <script type="text/javascript" src="../../TreePicker.js"></script>
    <script type="application/javascript">
    Ext.onReady(function(){
    	Ext.create("Ext.form.Panel", {
    		title: '下拉树菜单',
    		margin:'50 0 0 300',
    		height: 500,
    	    width: 700,
    		items:[{
    			xtype: 'treepicker',
    			//fieldLabel: '下拉树',
    			width: 400,
    			labelWidth: 60,
    			margin: '100 0 0 150',
    			displayField: 'text',
    			value: '',
    			minPickerHeight: 200,
    			store: Ext.create('Ext.data.TreeStore',{
    				fields: ['id','text'],
    				root: {
    					text: '天朝部门',
    					expanded: true
    				},
    				proxy: {
    					type: 'ajax',
    					url: 'tree.json',
    					reader: {
    						type: 'json'
    					}
    				}
    			})
    		}],
    		renderTo: Ext.getBody()
    	});
    });
    </script>
    </head>
    <body>
    
    </body>
    </html>
    

    JSON代码

    [
    {"id":1,"text":"贪污腐败部","children":[{"id":11,"text":"百亿巨头部","leaf":true},{"id":12,"text":"千万乡政部","leaf":true}],"expanded":true},
    {"id":2,"text":"嫖娼情妇部","leaf":true},
    {"id":3,"text":"城管威武部","leaf":true}
    ]
    



    展开全文
  • elementUI实现下拉选择树

    千次阅读 2020-04-10 14:36:47
    效果 用elementui的popover,tree,input组件实现 代码: <template> <div> <el-popover placement="bottom-start" v-model="treeFlag" class="orgTree" width="300" trigge...

    1、用select+tree实现
    效果:
    在这里插入图片描述
    关键代码:

    heml部分:
    	<el-select v-model="selectObj.name" placeholder="请选择"  style="width: 300px" ref="selectReport">
          <el-option :value="selectObj.id" :label="selectObj.name" style="width: 300px;height:200px;overflow: auto;background-color:#fff">
            <el-tree
              :data="treeData"
              :props="defaultProps"
              @node-click="handleNodeClick"
            ></el-tree>
          </el-option>
        </el-select>
        
        js部分:
     /**
           * @description    树点击事件
           * @author  mistywood
           * @Datetime  2020/4/4 11:20
           */
          handleNodeClick:function(node){
            if(node.children){
    
            }else{
              this.selectObj.id = node.label
              this.selectObj.name = node.label
              this.$refs.selectReport.blur()
            }
          }
    

    2、用popover,tree,input实现
    效果:
    在这里插入图片描述
    关键代码:

    html部分:
       <el-popover
          placement="bottom-start"
          v-model="treeFlag"
          class="orgTree"
          width="300"
          trigger="click">
          <el-tree
            :data="treeData"
            :props="defaultProps"
            :expand-on-click-node="false"
            node-key="id"
            style="width: 300px;"
            default-expand-all
            @node-click="handleNodeClickDep"
          ></el-tree>
          <el-input
            slot="reference"
            ref="input"
            v-model="name"
            clearable
            :readonly="true"
            style="width: 300px"
            suffix-icon="el-icon-arrow-down"
            placeholder="请选择"
          >
          </el-input>
        </el-popover>
    
    js部分:
          /**
           * @description    下拉树点击事件
           * @author  mistywood
           * @Datetime  2020/4/3 11:20
           */
          handleNodeClickDep(val) {
            this.name = val.label;
            this.treeFlag = false;
          },
       
    </script>
    
    
    展开全文
  • 本人使用的基本全是element 原本的语法实现的效果,代码比较精简。实现的效果如下,给需要的人一个参考 标题 实现的代码: <el-select v-model="saveForm.upResId" ... placeholder="请选择" ...

    本人使用的基本全是element 原本的语法实现的效果,代码比较精简。实现的效果如下,给需要的人一个参考

    标题

    实现的代码:

                <el-select
                  v-model="saveForm.upResId"
                  clearable
                  placeholder="请选择"
                  // 点击清空的实现
                  @clear="handleClear"
                  // ref属性注册,用于在vue中操作dom元素
                  ref="selectUpResId"
                >
                  // 设置一个隐藏的下拉选项
                  // 如果不设置一个下拉选项,下面的树形组件将无法正常使用
                  <el-option hidden key="upResId" :value="saveForm.upResId" :label="upResName">
                  </el-option>
                  // 设置树形组件  
                  <el-tree
                    :data="data"
                    :props="defaultProps"
                    // 是否在点击节点的时候展开或者收缩节点, 默认值为 true,如果为 false,则只有点箭头图标的时候才会展开或者收缩节点。
                    :expand-on-click-node="false"
                    // 是否在点击节点的时候选中节点,默认值为 false,即只有在点击复选框时才会选中节点。
                    :check-on-click-node="true"
                    // 节点被点击时的回调
                    @node-click="handleNodeClick"
                  >
                  </el-tree>
                </el-select>
    // data 部分:
    // 树形组件测试使用的数据
    data: [{
            resId: 1,
            name: '一级 1',
            children: [{
              resId: 11,
              name: '二级 1-1',
              children: [{
                name: '三级 1-1-1'
              }]
            }]
          }, {
            resId: 2,
            name: '一级 2',
            children: [{
              resId: 22,
              name: '二级 2-1',
              children: [{
                resId: 221,
                name: '三级 2-1-1'
              }]
            }, {
              resId: 23,
              name: '二级 2-2',
              children: [{
                resId: 224,
                name: '三级 2-2-1'
              }]
            }]
          }],
          defaultProps: {
            children: 'children',
            label: 'name'
          }
    
    
    // 函数部分    
        // 节点点击事件
        handleNodeClick(data) {
          // 这里主要配置树形组件点击节点后,设置选择器的值;自己配置的数据,仅供参考
          this.upResName = data.name
          this.saveForm.upResId = data.resId
          // 选择器执行完成后,使其失去焦点隐藏下拉框的效果
          this.$refs.selectUpResId.blur()
        },
        // 选择器配置可以清空选项,用户点击清空按钮时触发
        handleClear() {
          // 将选择器的值置空
          this.upResName = ''
          this.saveForm.upResId = ''
        }

    本人刚接触前端的小白,目前想到的比较简单的方案实现的效果。如果各位有更好的方案,欢迎留言交流。(* ̄︶ ̄)

    展开全文
  • bootstrap-treeview 做的tree ,实现点击展开树,选中树效果。 html: &lt;div id="area_tree_div"&gt; &lt;input type="text" id="area_input" name="area_...

    bootstrap-treeview 做的tree ,实现点击展开树,选中树效果。

    html:

    
    <div id="area_tree_div">
        <input type="text" id="area_input" name="area_input" class="form-control" value=""   placeholder="地区名称"/>
        <div id="treeview" style="display: none;"></div>
    </div>
               

    js:

     function showAreaTreeView() {
         $("#treeview").show();
         if($("#treeview").innerHeight()>10){
          return;
         }
         var areaTreeData = [{
           "id": 1,
           "text": "全部区域",
           "nodes": [{
             "id": 11,
             "text": "山东省",
             "nodes": [{
               "id": 111,
               "text": "青岛市",
               "nodes": [{
                 "id": 1111,
                 "text": "高新区"
               }, {
                 "id": 1112,
                 "text": "市南区"
               }, {
                 "id": 1113,
                 "text": "市北区"
               }, {
                 "id": 1114,
                 "text": "李沧区"
               }, {
                 "id": 1115,
                 "text": "崂山区"
               }, {
                 "id": 1116,
                 "text": "黄岛区"
               }, {
                 "id": 1117,
                 "text": "即墨区"
               }, {
                 "id": 1118,
                 "text": "平度市"
               }, {
                 "id": 1119,
                 "text": "胶州市"
               }]
             }]
           }, {
             "id": 12,
             "text": "青海省",
             "nodes": [{
               "id": 121,
               "text": "西宁市"
             }, {
               "id": 122,
               "text": "海东市"
             }, {
               "id": 123,
               "text": "海北藏族自治州"
             }, {
               "id": 124,
               "text": "玉树藏族自治州"
             }]
           }, {
             "id": 13,
             "text": "新疆维吾尔自治区",
             "nodes": [{
               "id": 131,
               "text": "乌鲁木齐市"
             }, {
               "id": 132,
               "text": "克拉玛依市"
             }, {
               "id": 133,
               "text": "吐鲁番市"
             }, {
               "id": 134,
               "text": "哈密市"
             }]
           }, {
             "id": 14,
             "text": "内蒙古藏族自治区",
             "nodes": [{
               "id": 141,
               "text": "呼和浩特市"
             }, {
               "id": 142,
               "text": "包头市"
             }, {
               "id": 143,
               "text": "赤峰市"
             }]
           }]
         }];
         var options = {
           bootstrap2: false,
           showTags: false,
           showCheckbox: false,
           data: areaTreeData,
           onNodeSelected: function(event, data) {
             $("#area_input").val(data.text);
             $("#treeview").hide();
           }
         };
         $('#treeview').treeview(options);
       }
    
       $("#area_input").click(function() {
         if (document.getElementById("treeview").style.display == "none") {
           showAreaTreeView();
         } else {
           $("#treeview").hide();
         }
       });
       $("#area_tree_div").hover(function() {
         /* Stuff to do when the mouse enters the element */
         showAreaTreeView();
       }, function() {
         $("#treeview").hide();
         /* Stuff to do when the mouse leaves the element */
       });

    可以了,也就是包裹input和tree的div  添加悬停事件监听。

    展开全文
  • ztree 带搜索框的 下拉选择树

    万次阅读 2017-02-22 14:08:23
    效果图: 步骤 : 1 jsp文件引入 zTree对应的js 2 jsp 写如下html class="mide">: id="zzjgName" style=" margin-top:5px;display: none; width:210px" type="text" class="form-control"> id...
  • vue 下拉选择树

    2020-11-17 10:20:50
    最近在做项目的过程中频繁的用到下拉选择数的效果,那就分享一下吧~ 首先在vue工程中安装下拉选择树的插件 npm install --save @riophae/vue-treeselect 在安装成功之后就可以使用啦 在需要使用的文件中引入...
  • layui框架下拉选择树性图(转载)

    千次阅读 2018-12-21 17:35:23
    效果图 html代码 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;layui&lt;/title&gt; &lt;...
  • easyui 下拉选择树(ComboTree) 的实现

    万次阅读 2016-09-04 19:50:56
    有时候为了显示更好的效果, 会用到树型下拉框, 实际就是下拉框中带了一个树型的控件, 所以它自然继承自tree和combobox. 一: 前台: 1. 首先从前台来讲, 先把html元素写好 getValue 这里用js加载方式: $('#cc')....
  • 下拉树

    2016-12-12 09:28:47
     在做输入页面时,为了简化用户的输入,以及避免错误数据的录入,往往提供各种下拉框供用户选择,但是,有时候可供下拉的数据选项非常多,导致下拉选择也非常麻烦,要靠眼睛去寻找合适的选项,并不容易。...
  • Winform中如何实现下拉树效果 简介:Winform中如何实现下拉树效果(类似于ComboBox下拉时显示的是树状结构),  如果是BS的WebForm就有很多解决方案了,Devexpress就更方便,利用DropdownList和TreeView去组合控件实现  ...
  • 刚好项目需要用到在ExtJS的ComboBox组件中实现下拉树效果GOOGLE 就是好用 下面是我找的博文 看了很多关于EXT下拉树的实现, 发现很多例子都是对EXT原有的类进行扩展, 而且都发现用起来很费劲,在这里,本人实现的...
  • vue实现下拉菜单

    2021-01-18 16:30:35
    本文实例为大家分享了vue实现下拉菜单的具体代码,供大家参考,具体内容如下 效果:使用 Vue-Treeselect 实现 建议通过npm安装vue-treeselect,并使用webpack之类的捆绑器来构建您的应用程序。 npm install --...
  • Swing开发下拉树

    2019-11-14 14:16:55
    swing下拉树案例:详细描述效果图片实现代码 案例:详细描述 当我们在进行swing绘制界面时,查询条件可能会需要用到下拉树,而非下拉列表,下拉树可以更好的展示数据的层级关系(如图所示),之前有发过多选树,可以...
  • angularjs下拉树控件

    2016-06-06 17:15:31
    实现下拉效果,和ExtJs的treecombox大同小异。
  • 1-展开效果 HTML details class="details-2" open> summary tabindex="-1">a href="javascript:">这是示例a>summary> content>本案例隐藏原生小三角,使用自定义小三角。content>
  • 下拉树 T形下拉树 跳转
  • 形检索下拉选择

    千次阅读 2017-08-17 08:50:46
    级的搜索下拉框插件 带级的搜索下拉框插件       $(function(){ //当前使用调试数据,获取支撑数据 var url="${pageContext.request.contextPath}/js/select3/data/testData.json";
  • bootstrap input 下拉树 下拉菜单 下拉列表

    万次阅读 多人点赞 2017-01-11 15:12:47
    bootstrap input 下拉树 下拉菜单 下拉列表
  • 效果 <#assign tags=JspTaglibs["/WEB-INF/tld/tags.tld"] /> <!DOCTYPE html> <html> <head> <base href="${path}/"> <meta charset="utf-8"> <meta name="v...
  • 这是一款基于jquery实现的下拉列表树插件源码,是一款实用的jquery 树形下拉框下拉树代码。点击文本框即可弹出树形下拉列表,单击列表项即可选中列表对应文字,是一款非常实用的特效源码。 运行效果图: ————...
  • /// <summary> /// 根据DataTable生成下拉列表 /// </summary> public class DropDownListHelp { private string gridline; private DataTable dt; public DropDownListHelp() { // //TODO: 在此处添加构造函数...
  • 当点击树形导航中的任意一个内容后,当前内容赋值给select输入框,同时下拉树形导航消失 使用方法: 1、将head中的样式引入到你的样式表中 2、将body中的代码部分拷贝过去即可 (注意保持图片路径...
  • web页面下拉选择

    千次阅读 2015-02-08 15:01:39
    介绍一个web页面属性下拉列表框的实现,采用jquery的ztree框架。项目中的效果如图: 1 下载ztree插件,地址:http://www.ztree.me/v3/main.php#_zTreeInfo。 2 引入js和css。 3 编写页面。 城市: ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 18,221
精华内容 7,288
关键字:

下拉选择树效果