前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >新手学EasyUi+JS----ComboBox 级联

新手学EasyUi+JS----ComboBox 级联

作者头像
令仔很忙
发布2018-09-14 16:07:56
1.8K0
发布2018-09-14 16:07:56
举报
文章被收录于专栏:令仔很忙令仔很忙

      最近在做一个EasyUi ComboBox的级别联动的效果,相关的内容如下:

    EasyUI刚接触,JS之前学过,不过在怎么用这方面自己还是个新手,不过现在还在不断的学习,实践出真知,这是硬道理,直接上代码:

   前台的HTML代码:

代码语言:javascript
复制
 <span>学院:</span><input id="College" class="easyui-combobox"   name="DropDownList_Course" style="width: 180px;"/>                               
    @* 课程下拉框 *@
    <span style="margin-left:5px;">课程:</span><input id="Course" class="easyui-combobox"  name="DropDownList_Course" style="width: 180px;"data-options="valueField:'CourseId',textField:'CourseName'"/>
    @* 考试下拉框 *@
    <span style="margin-left:5px;">考试名称:</span><input id="ExamName" class="easyui-combobox"  name="DropDownList_ExamName" style="width: 180px;" data-options="valueField:'ExamId',textField:'ExamName'" />
    @* 场次下拉框 *@
    <span style="margin-left:5px;">考场:</span><input id="ClassRoom" class="easyui-combobox"  name="DropDownList_ExamRoom" style="width: 180px;" data-options="valueField:'VirtualExamRoomId',textField:'ClassRoomId'" />

 下面是JS的代码:

代码语言:javascript
复制
$(function () {
    //下拉级联框
    //学院
    var college = $('#College').combobox({
        valueField: 'OrganizationPID',
        textField: 'OrganizationName',
        method:'get',                       
        url: '/Examinee/QueryAllCollege',
        onLoadSuccess:onLoadSuccess,
        //查询所有学院
        onSelect: function (rec) {
            //根据学院查询所有课程
            $.get('/Examinee/QueryCouserInfobyOrganizationId', { "OrganizationPID": rec.OrganizationPID }, function (data) {
                course.combobox("clear").combobox('loadData', data);
                examname.combobox("clear");
                classname.combobox("clear");
            }, 'json');
        }
    });

    //课程
    var enCollege = $('#College').combobox('getText');
    var course = $('#Course').combobox({
        valueField: 'CourseID',
        textField: 'CourseName',
        method: 'get',
        onLoadSuccess:onLoadSuccess,
        onSelect: function (rec) {
            //根据课程ID查询考试名称
            $.get('/Examinee/QueryExamByCourseId', { 'CourseID': rec.CourseID, 'OrganizationName': enCollege }, function (data) {
                examname.combobox("clear").combobox('loadData', data);
                classname.combobox("clear");
            }, 'json');
        }
    });

    //考试名称
    var examname = $('#ExamName').combobox({
        valueField: 'ExamId',
        textField: 'ExamName',
        method: 'get',
        onLoadSuccess:onLoadSuccess,
        onSelect: function (rec) {   //查询考场信息
            $.get('/Examinee/QueryClassRoomIdByExamId', { 'ExamId': rec.ExamId }, function (data) {
                classname.combobox("clear").combobox('loadData', data);
            });
        }
    });

    //考场
    var classname = $('#ClassName').combobox({
        valueField: 'VirtualExamRoomId',
        textField: 'ClassRoomId',
        onLoadSuccess:onLoadSuccess
    });

    //初始化就选中第一个
    function onLoadSuccess() {
        var target = $(this);
        var data = target.combobox("getData");
        var options = target.combobox("options");
        if (data && data.length > 0) {
            var fs = data[0];
            target.combobox("setValue", fs[options.valueField]);
        }
    }
});

   好记性不如烂笔头,这些都是宝贵的经验。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2015年01月31日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档