easyui combobox支持动态加载数据

最新推荐文章于 2025-02-28 00:15:00 发布

KenLiu123

最新推荐文章于 2025-02-28 00:15:00 发布

阅读量1.7k

点赞数

文章标签： easyui 前端 javascript

本文链接：https://blog.csdn.net/u012339069/article/details/128113440

版权

这段代码展示了如何使用jQuery的Combobox组件结合Ajax实现动态数据加载。在用户选择列表项时，通过onSelect事件记录状态，避免重复加载。而在onChange事件中，根据状态决定是否重新获取数据并更新Combobox选项。通过这种方式优化了用户交互体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

var comboxSelectOrg = 0; //定义变量，用来判断在onChange 事件中是否需要重新加载数据，因为onSelect事件(选中)后实际是不需要重新加载数据的
$(function(){
    if($('.comboboxorg').length <= 0){ //判断是否存在这个组件，如果不存在这个组件，可以不需要执行整个js代码。
        return;
    }
    $.ajax({
        url: BASE_URL + '/v1/common/queryCustNameAndIdByType',
        dataType: 'json',
        method : 'get',
        success: function (data) {
            var items = $.map(data.result, function (item) {
                return {
                    custId: item.custId,
                    name: item.name
                };
            });
            $('.comboboxorg').combobox({data:items,valueField:'custId',textField:'name'});
        }
    });

    $(".comboboxorg").combobox({
        onSelect: function(row){ //当用户选择一个列表项时触发。
            // console.log("custId:"+row.custId+" name:"+row.name);
            comboxSelectOrg = 1;//重置状态后，无需重新获取新数据
        },
        onChange: function(newValue,oldValue){ //当用户选择一个列表项时触发。
            // console.log("newValue:"+newValue);
            if(comboxSelectOrg == 1){
                // console.log("无需刷新");
                comboxSelectOrg=0;
                return;
            }
             $.ajax({
                url: BASE_URL + '/v1/common/queryCustNameAndIdByType?orgName='+newValue,
                dataType: 'json',
                method : 'get',
                success: function (data) {
                    $(".comboboxorg").combobox("loadData", data.result);
                }
            });
        }
    })
});