【combotree】easyui的combotree(树形下拉框)使用总结

EasyUI CombTree 使用详解

最新推荐文章于 2021-04-17 16:51:33 发布

weixin_34301132

最新推荐文章于 2021-04-17 16:51:33 发布

阅读量2.8k

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript python json ViewUI

原文链接：https://my.oschina.net/u/1540325/blog/780751

本文介绍了EasyUI的combotree（树形下拉框）的创建、取值、设置值的方法，以及解决多个combotree在同一页面加载相同数据时出现的问题。重点讲解了loadData方法加载JSON数据的格式要求，onSelect事件获取选中值，以及通过onShowPanel事件避免加载冲突。

2019独角兽企业重金招聘Python工程师标准>>>

引言

最近由于工作的需要，需要使用到下拉树，就是我们有一个输入框，用户要输入东西，但是输入的东西是从我们那个之中选的，为了防止用户输入错误，我们使用了下拉树，因为为一个树形列表，用户选择点击树形列表的哪一个，哪一个就会上去。combotree,效果如下：

1.创建combotree

我们知道easyui的每一个控件创建都有两种方法，combotree也不例外，一种是使用html标签直接初始化，一种是使用javascript方法实现。

a.html标签实现

<select id="cc" class="easyui-combotree" style="width:200px;"
    data-options="url:'get_data.php',required:true">
</select>

b.javascript创建

<input id="cc" value="01">

$('#cc').combotree({
   url: 'get_data.php',
   required: true
});

可以看得出，这儿加载数据都是在初始化的时候，直接去服务器请求，然后easyui自己加载的，其实就是加载json数据，但是我们写项目一般都是先用ajax请求下来，然后在本地加载该js对象，所以我们一般使用loadData来加载数据：

$('#addEmailform #ifinereportCptNameUrl').combotree('loadData',data );

值得注意的是：该数据的格式，必须是如下：

var data=[{id: 1,
	text: 'Languages',
	children: [{
		id: 11,
		text: 'Java'
	},{
		id: 12,
		text: 'C++'
	}]
   }]

就是初始化的时候请求远程的数据，该数据也一样需要是这个格式。

2.取值

其实有很多种方法，下面举两种

a.combotree的onSelect事件中就可以得到

$('#addEmailform #ifinereportCptNameUrl').combotree({
	required: true,
	width:350,
	height:35,
	onSelect :function(node){
			alert(node.id+node.text)		    				
	}
					    			
 });

上述方法，就是在初始化combotree的时候，注册一个onSelect事件，但是有更多的时候，我们在在别的函数里面需要得到现在已经选中的节点的值，就必须采用第二种方法了。

b.方法如下

 var tCpt = $('#addEmailform #ifinereportCptNameUrl').combotree('tree');	// get the tree object
 var n = tCpt.tree('getSelected');		// get selected node	 
 alert(n.id+n.text)

3.设置值

setValues	values	设置组件值的数组。代码实例： $('#cc').combotree('setValues', [1,3,21]);
setValue	value	设置组件的值。代码实例： $('#cc').combotree('setValue', 6);

注意第二个参数树该节点的id

至此，基础知识普及完成。

4.easyui的combotree的一个小坑，值得注意。

就是同一个页面，有好几个combotree加载同一个本地数据的时候，只有最后一个combotree起作用，废话不多说，贴bug的代码：

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>form-combotree - jQuery EasyUI Demo</title>
  <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
  <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
  <link rel="stylesheet" type="text/css" href="../demo.css">
  <script type="text/javascript" src="../../jquery.min.js"></script>
  <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
  <script type="text/javascript">
  $(function() {
    var data = [{
      id: 1,
      text: 'Languages',
      children: [{
        id: 11,
        text: 'Java'
      },{
        id: 12,
        text: 'C++'
      }]
    },{
      id: 2,
      text: 'book',
      children: [{
        id: 13,
        text: 'xxx1'
      },{
        id: 14,
        text: 'ccc'
      }]
    }];
    $('#cc').combotree({
        required: true
    });
    $('#cc').combotree('loadData',data );

    $('#cc1').combotree({
        required: true
    });

    $('#cc1').combotree('loadData',data );


    $('#cc2').combotree({
        required: true,
        multiple: true,
        height:50
    });

    $('#cc2').combotree('loadData',data );

  })
  function setvalue(){
      $.messager.prompt('SetValue','Please input the value(1,2,3,etc):',function(v){
        if (v){
          $('#cc1').combotree('setValue',v);
        }
      });
    }
  </script>
</head>
<body>
  <h2>Basic Form combotree </h2>
    <div style="margin:20px 0;"></div>
    <div class="easyui-panel" title="New Topic" style="width:400px">
        <div style="padding:10px 60px 20px 60px" >
          <div>combotree</div>
          <input id="cc" >
        </div>

        <div style="padding:10px 60px 20px 60px" >

          combotree action

          <div style="margin:20px 0;">
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="setvalue()">SetValue</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="alert('key:'+$('#cc1').combotree('getValue'))">GetValue</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#cc1').combotree('disable')">Disable</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#cc1').combotree('enable')">Enable</a>
          </div>
          <input id="cc1" >
        </div>

        <div style="padding:10px 60px 20px 60px" >
          <div>combotree multiple</div>
          <input id="cc2" >
        </div>



  </div>
</body>
</html>

你会发现只有第三个起作用，其余的不起作用，原因在于，三个加载的是同一份data数据，而且时间点很近，解决办法，给每一个combotree注册一个 onShowPanel事件，然后再在这个事件里面加载data数据，就可以，解决之后的代入如下：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Basic Dialog - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="themes/icon.css">
	<script type="text/javascript" src="jquery.min.js"></script>
	<script type="text/javascript" src="jquery.easyui.min.js"></script>
	<script type="text/javascript">
	 $(function() {
    var data = [{
      id: 1,
      text: 'Languages',
      children: [{
        id: 11,
        text: 'Java'
      },{
        id: 12,
        text: 'C++'
      }]
    },{
      id: 2,
      text: 'book',
      children: [{
        id: 13,
        text: 'xxx1'
      },{
        id: 14,
        text: 'ccc'
      }]
    }];
    $('#cc').combotree({
        required: true,
		onShowPanel:function(){
			 $('#cc').combotree('loadData',data );
		}
    });
    //$('#cc').combotree('loadData',data );

    $('#cc1').combotree({
		 required: true,
		 onShowPanel:function(){
			 $('#cc1').combotree('loadData',data );
		 }
    });

    //$('#cc1').combotree('loadData',data );


    $('#cc2').combotree({
        required: true,
        multiple: true,
        height:50,
		 onShowPanel:function(){
			 $('#cc2').combotree('loadData',data );
		 }
    });

    //$('#cc2').combotree('loadData',data );

  })
  function setvalue(){
      $.messager.prompt('SetValue','Please input the value(1,2,3,etc):',function(v){
        if (v){
          $('#cc1').combotree('setValue',v);
        }
      });
    }
	
	function getText(){
		var tCpt = $('#cc1').combotree('tree');	// get the tree object
	    var n = tCpt.tree('getSelected');		// get selected node
	    alert(n.text);
	   
	}
  </script>
</head>
<body>
    <h2>Basic Form combotree </h2>
    <div style="margin:20px 0;"></div>
    <div class="easyui-panel" title="New Topic" style="width:400px">
        <div style="padding:10px 60px 20px 60px" >
          <div>combotree</div>
          <input id="cc" >
        </div>

        <div style="padding:10px 60px 20px 60px" >

          combotree action

          <div style="margin:20px 0;">
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="setvalue()">SetValue</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="alert('key:'+$('#cc1').combotree('getValue'))">GetValue</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#cc1').combotree('disable')">Disable</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#cc1').combotree('enable')">Enable</a>
			 <a href="javascript:void(0)" class="easyui-linkbutton" onclick="getText()">getText</a>
          </div>
          <input id="cc1" >
        </div>

        <div style="padding:10px 60px 20px 60px" >
          <div>combotree multiple</div>
          <input id="cc2" >
        </div>



    </div>
</body>
</html>

打完收工！

转载于:https://my.oschina.net/u/1540325/blog/780751