jeasy ui的下拉列表与下拉树使用说明

1、jeasy ui下拉树，首先需要引入easyui.css，icon.css，jquery.easyui.min.js三个文件。

combotree显示的时候以下拉列表树的形式显示，允许在每个的选项前面有checkbox，并且可以实现多选。

使用方法如下，

<input id="txt_user_department" class="easyui-combotree" data-options="method:'get',required:false" style="width:122px;" />

在js里面调用如下：

$("document").ready(function(){

<!--赋值-->

var options = [{ "id": 1, "text": "销售部", "children": [{ "id": 101, "text": "销售一处", "children": [{ "id": 10101, "text": "一处一组" }, { "id": 10102, "text": "一处二组"}] }, { "id": 102, "text": "销售二处", "children": [{ "id": 10201, "text": "二处一组" }, { "id": 10202, "text": "二处二祖"}] }, { "id": 103, "text": "销售三处" }, { "id": 104, "text": "销售四处"}]}];//声明json对象。

$("#txt_user_department").combotree({
                data: options//调用赋值
    });

或者调用

$("#txt_user_department").combotree('loadData', options);

也可以设置每个选项前面的图标，如iconCls：icon-group 组图标，iconCls:icon_user用户图标，另外可以设置state为closed与open两种状态，还可以设置attribute属性。

<!--变化事件-->

$("#txt_user_department").combotree({

onChange:function(arg){

//arg是对象选项的参数值

}

});

<!--清空combotree中的值-->

$('#txt_user_department').combotree('clear');

<!--设置combotree的选择项-->

$('#txt_user_department').combotree('setvalue',0);//将相应选项的id设置为选中状态。

<!--获取combotree的选中项-->

$('#txt_user_department').combotree('getValue');

<!--判断是否是叶子节点-->

$("#txt_user_department").combotree({

onBeforeSelect: function (node) {
                    if (!$(this).tree('isLeaf', node.target)) {
                            return false;

}

}

});

});

2、jeasy ui下拉列表，同上需要引入相应的css与js文件。combobox当数据太多的时候允许用户输入值进行过滤，首项来定义要显示的数据

var optionscombox=[{"id":"0","text":"小张"},{"id":"1","text":"小王"},{"id":"2","text":"小李"}];

赋值如下：

$('#saleman').combobox({

valueField:"id",

textField:"text",

panelHeight:"auto",

onSelect:function(rect){

//rect获得相应选择项的参数

}

});

<!--设置选中项-->

$('#saleman').combobox('setValue', 0);

<!--获取选中项-->

$('#saleman').combobox('getValue');

<!--获取下拉列表下面的数据项长度-->

$('#saleman').combobox('getData').length//可以用来判断下拉列表下面有没有数据

<!--清空下拉列表-->

$('#saleman').combobox('clear');