jquery easyui 使用 combobox动态加载数据
首先引入相关js 和css
<link href="css/themes/default/easyui.css" rel="stylesheet" type="text/css" />
<link href="css/themes/icon.css" rel="stylesheet" type="text/css" />
<script src="jq/jquery.min.js" type="text/javascript"></script>
<script src="jq/jquery.easyui.min.js" type="text/javascript"></script>
前端代码
<script type="text/javascript">
$(function () {
$('#t1').combobox({ //初始化父级combobox控件
url: 'Type.ashx?id=0', //远程访问服务器端的地址
editable: false, //设置文本区域不能被编辑
valueField: 'id', //显示数据的键的值
textField: 'text', //显示数据的文本的值
onLoadSuccess: function (data) { //当成功加载数据后所引发的事件，data参数为 combobox中加载的值 以一个json类型的数组表示
$('#t1').combobox('setValue', data[0].id);//设置combobox中的首选项被选中
},
onSelect: function (rec) { //当选中combobox中的内容时候触发的事件 类似与change事件 参数rec 为当前选中项目的json 类型的数据 json中的键和值 应与 valueField和textField属性中的值一致 如 rec.id 为当前选中项的 id
t2.combobox({
editable: false,
url: 'Type.ashx?id=' + rec.id,//向服务器端发送请求 带参数
valueField: 'id',
textField: 'text',
onLoadSuccess: function (data) {
if (data.length <= 0) { //判断如果子项中没有数据
$('#t2').combobox('clear').combobox('setValue', '无子分类');//设置子项中无子分类
}
else {
var t22= $('#t2').combobox('setValue', data[0].id).combobox('getData');//子项中的数据默认第一项被选中
}
}
}).combobox('clear');//从新加载子项中的数据应首先清空子项中的数据
}
});
var t2 = $('#t2').combobox({ //初始化子项的combobox
editable: false,
valueField: 'id',
textField: 'text'
});
});
</script>
<body>
<form id="form1" runat="server">
<div>
一级别分类： <select id="t1" style="width:80px;"></select>
二级别分类: <select id="t2" style=" width:80px;"></select>
</div>
</form>
</body>
服务器端代码
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data;
using System.Web.Script.Serialization;
namespace jqeasyui
{
/// <summary>
/// Type 的摘要说明
/// </summary>
public class Type : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
int tid = 0;
//判断是否第一次请求
if (!string.IsNullOrEmpty(context.Request["id"]))
{
tid = int.Parse(context.Request["id"]);//获取父类中当前选中项目的id
}
web2Bll.TypeInfoBLL tpbll = new web2Bll.TypeInfoBLL();
List<web2Model.TypeInfo> list = new List<web2Model.TypeInfo>();
list=tpbll.GetListTypeInfo(" parentId="+tid,"");
List<TypeModel> listModel = new List<TypeModel>();//创建一个自定义类型的集合 ，类中属性 id 和 text 需要和前端 valueField 和 textField 属性中的值一样
foreach (web2Model.TypeInfo typeInfo in list)
{
listModel.Add(new TypeModel() {
id=typeInfo.TypeId,
text=typeInfo.TitleName
});
}
JavaScriptSerializer js = new JavaScriptSerializer();//序列化集合转换成json
context.Response.Write(js.Serialize(listModel));//返回到前端
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
combobox的其他方法，属性，事件
属性
groupField：
参数类型:string
说明:指示要被分组的字段。该属性自版本 1.3.4 起可用。
默认值:null
groupFormatter:
参数类型:function(group)
说明：返回要显示在分组项目上的分组文本。该属性自版本 1.3.4 起可用。
例如：
$('#cc').combobox({
groupFormatter: function(group){
return '<span style="color:red">' + group + '</span>';
}
});
mode
参数类型:string
说明:定义在文本改变时如何加载列表数据。如果组合框（combobox）从服务器加载就设置为 ‘remote’。当设置为 ‘remote’ 模式时，用户输入的值将会被作为名为 ‘q’ 的 http 请求参数发送到服务器，以获取新的数据。
默认值:local
method:
参数类型:string
说明:用来检索数据的 http 方法。
默认值:post
data:
参数类型: arr
说明：被加载列表数据
例子;
<input class="easyui-combobox" data-options="
valueField: 'label',
textField: 'value',
data: [{
label: 'java',
value: 'Java'
},{
label: 'perl',
value: 'Perl'
},{
label: 'ruby',
value: 'Ruby'
}]" />
默认值:null
filter:
参数类型:function
说明：定义如何呈现行。该函数有一个参数：row。
例子:
$('#cc').combobox({
filter: function(q, row){
var opts = $(this).combobox('options');
return row[opts.textField].indexOf(q) == 0;
}
});
formatter
参数:function(row) row为行内容
说明：如何呈现行
例子
$('#cc').combobox({
formatter: function(row){
var opts = $(this).combobox('options');
return row[opts.textField];
}
});
loader:
参数：function(param,success,error)
说明：定义如何从远程服务器加载数据。返回 false 则取消该动作。该函数有下列参数：
param：要传到远程服务器的参数对象。
success(data)：当获取数据成功时将被调用的回调函数。
error()：当获取数据失败时将被调用的回调函数。
默认值:json loader
事件
onBeforeLoad
参数：param
说明：在请求加载数据之前触发，返回 false 则取消加载动作。
例子
$('#cc').combobox({
onBeforeLoad: function(param){
param.id = 2;
param.language = 'js';
}
});
onLoadError
说明：当远程数据加载失败时触发。
onUnselect
参数：record
说明：当用户取消一个列表项时触发。
方法
getData
说明:返回加载的数据。
loadData
参数 data
说明:加载本地列表数据。
reload
参数: url
说明：请求远程的列表数据。传 ‘url’ 参数来重写原始的 URL 值。
例子：
$('#cc').combobox('reload'); // reload list data using old URL
$('#cc').combobox('reload','get_data.php'); // reload list data using new URL
setValues
参数 values
设置组合框（combobox）值的数组值。
如:
$('#cc').combobox('setValues', ['001','002']);
setValue
设置组合框值
getValue
获取组合框的值
var t1=$('#cc').combobox('getValue');
select , unSelect
获取选中的项目 ,取消选中的项目
clear
清空所有的项目