【combotree】easyui的combotree(樹形下拉框)使用總結

時間 2019-11-07

標籤 combotree easyui 下拉使用總結简体版

原文原文鏈接

引言javascript

最近因爲工做的須要，須要使用到下拉樹，就是咱們有一個輸入框，用戶要輸入東西，可是輸入的東西是從咱們那個之中選的，爲了防止用戶輸入錯誤，咱們使用了下拉樹，由於爲一個樹形列表，用戶選擇點擊樹形列表的哪個，哪個就會上去。combotree,效果以下：php

1.建立combotree

咱們知道easyui的每個控件建立都有兩種方法，combotree也不例外，一種是使用html標籤直接初始化，一種是使用javascript方法實現。css

a.html標籤實現html

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

b.javascript建立java

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

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

能夠看得出，這兒加載數據都是在初始化的時候，直接去服務器請求，而後easyui本身加載的，其實就是加載json數據，可是咱們寫項目通常都是先用ajax請求下來，而後在本地加載該js對象，因此咱們通常使用loadData來加載數據：node

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

值得注意的是：該數據的格式，必須是以下：jquery

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

就是初始化的時候請求遠程的數據，該數據也同樣須要是這個格式。ajax

2.取值

其實有不少種方法，下面舉兩種json

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>

打完收工！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。