1. 程式人生 > >JQueryEasyUI 元件 樹形下拉框 ComboTree

JQueryEasyUI 元件 樹形下拉框 ComboTree

1,介紹

定義  樹形下拉框結合選擇控制元件和下拉樹控制元件 
繼承關係  combo   tree

每個節點都具備以下屬性:

· id:節點ID,對載入遠端資料很重要。

· text:顯示節點文字。

· state:節點狀態,'open' 或 'closed',預設:'open'。如果為'closed'的時候,將不自動展開該節點。

· checked:表示該節點是否被選中。

· attributes: 被新增到節點的自定義屬性。

· children: 一個節點陣列聲明瞭若干節點。


2,屬性

屬性名 屬性值型別 描述
editable
boolean
定義使用者是否可以直接輸入文字到欄位中

命名限制   id  text  children 否則無效

語法

 ComboTree  元件 Json 資料來源格式

[
          {
              'ID':1
              'text':第一級資訊內容
               'children':[{
                        'ID':11
                        'text':第二級資訊內容
                        'children':[
                ]}
           }
        ]
資料來源中 ID 值不能重複

3,方法

方法名 方法引數型別 描述
getText
none
獲取輸入的文字
getValue
none
獲取元件的值 (ID值)

語法

$("#標籤ID").combotree("方法名")

4,例項

<select id="data">
        <option value="0">載入</option>
    </select>
       <a href="#" id="btn" class="easyui-linkbuttion" data-options="iconCls:'icon-add'">獲取</a>

 $(function () {
            $("#data").combotree({
                url: 'T8-1.aspx',
                method: 'post',
                editable: false,
                width:180
            })

            $("#btn").linkbutton({
                onClick: function () {
                    console.info($("#data").combotree("getText"));
                    console.info($("#data").combotree("getValue"));
                }
            });
        });