专栏首页令仔很忙新手学EasyUi+JS----ComboBox 级联

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

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

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

   前台的HTML代码:

 <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的代码:

$(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]);
        }
    }
});

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 天干地支五行八卦的对应关系

    一石匠人
  • 儿童创造力教育与编程教育的碰撞——MIT雷斯尼克教授最新理论梗概

    儿童编程教育已经在我国各一线二线城市疯狂出现,颇有“烂大街”的趋势。我们不禁要问很多很多问题:

    一石匠人
  • 【系统设置】CentOS 修改机器名

    ken.io
  • 我不是算命先生,却对占卜有了疑惑——如何论证“占卜前提”的正确与否

    事出有因,我对《周易》感兴趣了很多年。只是觉得特别有趣,断断续续学习了一些皮毛。这几天又偶然接触到了《梅花易数》,觉得很是精彩,将五行八卦天干地支都串联了起来。...

    一石匠人
  • 《动物魔法学校》儿童学编程Scratch之“外观”部分

    导读:本文通过一个案例《动物魔法学校》来学习Scratch语言的“外观”部分。之后通过一系列其他功能的综合运用对作品功能进行了扩展。

    一石匠人
  • 一张图理清《梅花易数》梗概

    学《易经》的目的不一定是为了卜卦,但是了解卜卦绝对能够让你更好地了解易学。今天用一张思维导图对《梅花易数》的主要内容进行概括,希望能够给学友们提供帮助。

    一石匠人
  • 什么样的人生才是有意义的人生——没有标准的标准答案

    【导读】其实我们可以跳出这个小圈圈去更加科客观地看一下这个世界。在夜晚的时候我们仰望天空,浩瀚的宇宙中整个地球只是一粒浮尘,何况地球上一个小小的人类?在漫长的历...

    一石匠人
  • 声音功能让儿童编程更有创造性

    导读:Scratch中声音功能非常强大,除了常规的音效,你甚至可以模拟各种乐器的各个发音、设置节拍、休止……如果你愿意,甚至可以用它创作一个交响乐。我们可以引导...

    一石匠人
  • 复杂业务下向Mysql导入30万条数据代码优化的踩坑记录

    从毕业到现在第一次接触到超过30万条数据导入MySQL的场景(有点low),就是在顺丰公司接入我司EMM产品时需要将AD中的员工数据导入MySQL中,因此楼主负...

    haifeiWu
  • SQL中GROUP BY用法示例

    GROUP BY我们可以先从字面上来理解,GROUP表示分组,BY后面写字段名,就表示根据哪个字段进行分组,如果有用Excel比较多的话,GROUP BY比较类...

    Awesome_Tang

扫码关注云+社区

领取腾讯云代金券