easyui-combobox下拉框异步级联选择

效果图

这里写图片描述

功能描述:
- 如图,首先无视掉任课班级,与本文章无关的功能
- 当我们选择任课学段时,应该加载任课学科信息且将任课学科、任课版本、任课年级默认选择一个属性(我定义为‘请选择’)
- 当选择任课学科时应该加载任课版本信息且将任课版本、任课年级默认选择一个属性(我定义为‘请选择’)
- 同理当选择任课版本时应该加载任课年级信息且将任课年级默认选择一个属性(我定义为‘请选择’)

代码:

//将下拉框定义为变量,方便调用
//任课学段下拉框
var stageItemSelect = $("#stageItem");
var stageItem_sign = 0;
//任课学科下拉框
var studyItemSelect = $("#studyItem");
var studyItem_sign = 0;
//任课版本下拉框
var versionItemSelect = $("#versionItem");
var versionItem_sign = 0;
//任课年级下拉框
var gradeItemSelect = $("#gradeItem");
var gradeItem_sign = 0;
//############################################################################//
//任课学段下拉框属性
stageItemSelect.combobox({
    valueField : 'id',
    textField : 'stagename',
    url : 'sys/course/stageQuery',
    editable : false,
    onLoadSuccess: function() {//当下拉框加载完毕时触发
        if(stageItem_sign == 0) {//因为需要手动添加一个‘请选择’选项,所以需要调用‘loadData’方法,而此方法也会触发onLoadSuccess回调函数,为了防止无限死循环,故使用此变量控制。
            var data = $(this).combobox('getData');//获取远程加载来的数据
            data.unshift({'id':'-1','stagename':'请选择'});//给远程加载的数据前置添加一个‘请选择’,字段id定义为‘-1’用于默认选择
            stageItem_sign++;
            stageItemSelect.combobox("loadData", data);//重新加载数据
            stageItemSelect.combobox('select','-1');//选中添加的默认选项
        }
    }, 
    onSelect : function(rec) {//当我们选择一个下拉框数据时应该做以下事情
        //将此下拉框下面所有的级联下拉框的控制变量初始化,否则再次选择时不会触发添加‘请选择’功能
        studyItem_sign = 0;
        versionItem_sign = 0;
        gradeItem_sign = 0;

        var url = 'sys/course/forQuery?stageId=' + rec.id;
        studyItemSelect.combobox('reload', url);//将于本下拉框直接相关的级联下拉框数据重载
    }
});

//以下同理

//任课学科下拉框属性
studyItemSelect.combobox({
    valueField : 'studyid',
    textField : 'studyname',
    editable : false,
    onLoadSuccess: function() {
        if(studyItem_sign == 0) {
            var data = $(this).combobox('getData');
            data.unshift({'studyid':'-1','studyname':'请选择'});
            studyItem_sign++;
            studyItemSelect.combobox("loadData", data);
            studyItemSelect.combobox('select','-1');
        }
    },
    onSelect : function(rec) {
        versionItem_sign = 0;
        gradeItem_sign = 0;
        var stageId = stageItemSelect.combobox('getValue');
        var url = 'sys/course/forQuery?stageId=' + stageId + '&studyId=' + rec.studyid;
        versionItemSelect.combobox('reload', url);
    }
});
//任课版本下拉框属性
versionItemSelect.combobox({
    valueField : 'versionid',
    textField : 'versionname',
    editable : false,
    onLoadSuccess: function() {
        if(versionItem_sign == 0) {
            var data = $(this).combobox('getData');
            data.unshift({'versionid':'-1','versionname':'请选择'});
            versionItem_sign++;
            versionItemSelect.combobox("loadData", data);
            versionItemSelect.combobox('select','-1');
        }
    },
    onSelect : function(rec) {
        gradeItem_sign = 0;
        var stageId = stageItemSelect.combobox('getValue');
        var stydyId = studyItemSelect.combobox('getValue');
        var url = 'sys/course/forQuery?stageId=' + stageId + '&studyId=' + stydyId + '&versionId=' + rec.versionid;
        gradeItemSelect.combobox("reload", url);
    }
});
//任课年级下拉框属性
gradeItemSelect.combobox({
    valueField : 'gradeid',
    textField : 'gradename',
    editable : false,
    onLoadSuccess: function() {
        if(gradeItem_sign == 0) {
            var data = $(this).combobox('getData');
            data.unshift({'gradeid':'-1','gradename':'请选择'});
            gradeItem_sign++;
            gradeItemSelect.combobox("loadData", data);
            gradeItemSelect.combobox('select','-1');
        }
    }
});

最后，当选择任课学段下拉框时，触发onSelect事件，会重载任课学科下拉框并触发任课学科的onLoadSuccess事件，接着会选中自身默认属性，从而继续触发任课学科的onSelect事件，然后继续触发任课版本的重载…以此类推…

easyui-combobox下拉框异步级联选择

猜你喜欢