jquery easyui 使用 combobox动态加载数据

最新推荐文章于 2024-06-01 15:19:25 发布

sd6275832ght

最新推荐文章于 2024-06-01 15:19:25 发布

阅读量1.4w

点赞数 4

本文链接：https://blog.csdn.net/sd6275832ght/article/details/83992293

版权

首先引入相关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
清空所有的项目

sd6275832ght

关注

4
点赞
踩
22

收藏

觉得还不错? 一键收藏
0
评论
jquery easyui 使用 combobox动态加载数据

首先引入相关js 和css &lt;link href="css/themes/default/easyui.css" rel="stylesheet" type="text/css" /&gt; &lt;link href="css/themes/icon.css" rel="stylesheet" type="text/css" /&gt;
复制链接

扫一扫