zoukankan      html  css  js  c++  java
  • 利用easyui-combotree实现 下拉菜单 多选功能(带多选框)

    最终的效果图                                   原easyui-combotree样式

                   

    Html

    <select id="select_order_type" name="select_order_type" class="easyui-combotree"  multiple style="140px;"></select>

    JavaScript

    其中 <{$select_option_order_type}> 为 php后端 Smarty 赋值  例: { "id":1, "text":"订机"  }, { "id":2, "text":"My BBBBB"  }, { "id":3, "text":"My CCCCC"  }

    注意:双引号 必须要有

        //easyui-combotree 加载数据
        $("#select_order_type").combotree({
             data: [ <{$select_option_order_type}> ]
        });
        //页面加载完成后执行
        $(document).ready(function(){   
            //easyui-combotree 去掉图标
            $(".tree-icon,.tree-file").removeClass("tree-icon tree-file");
            $(".tree-icon,.tree-folder").removeClass("tree-icon tree-folder tree-folder-open tree-folder-closed"); 
          
        }); 
        //EasyUI Combotree 获取所有选中的节点
        function getCombotreePropValues(combotreeId){
            var result = "";
            var tr= $("#"+combotreeId).combotree('tree');
            var nodes = tr.tree('getChecked');
            if(nodes.length > 0){
                for(var i=0; i<nodes.length; i++){
                    //console.log(nodes[i] );
                    //result += nodes[i].id + ":"+nodes[i].text + "," ; //1:My AAAAA,2:My BBBBB,3:My CCCCC
                    result += nodes[i].text + "," ;
                }
                if(result.indexOf(",") > -1){
                    result = result.substring(0, result.length - 1);
                }
            }
            return result;
        };

    取值

    //easyui-combotree 获取选中值        
    var order_type=getCombotreePropValues("select_order_type");

    如果不选 则返回 空

    如果选一个 则返回 一个值没有逗号  如  订机

    如果选两个及以上  则返回多个值用 逗号分隔 如 订机,投诉,咨询

               

  • 相关阅读:
    软件策划书
    对开发团队的看法
    对敏捷开发的认识
    企业单位
    Pg数据库的基础安装
    Windows Server 任务计划执行.exe
    2020.04.08 重新开始
    20200211 Oracle监听启动异常
    20191225 医疗行业数据仓库
    20191224 多维数据库
  • 原文地址:https://www.cnblogs.com/hailexuexi/p/13150917.html
Copyright © 2011-2022 走看看