新手学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]);
        }
    }
});

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

时间: 2024-08-23 01:17:15

新手学EasyUi+JS----ComboBox 级联的相关文章

easyui enableFilter combobox级联 combotree

//网格过滤         function datagridFilter(dg){             dg.datagrid('enableFilter');             dg.datagrid('enableFilter',[{                 field:'townName',                  type:'combobox',                  options:{                    url:'area

使用EasyUI的combobox控件实现级联搜索条件

昨天接到一个需求,是做一个简单的查询页面,相对于目前公司系统有一个新的东西,需要实现多级机构的级联查询.公司系统的前端框架采用的是jquery-easyui-1.4.3, 在以前接触到的系统中,前端做的不是太多,有采用velocity+html的,实现这种级联倒是做过,只是没怎么记录.现在使用easyui,需要学习一下. 看了些关于easyui的东东,打算采用combobox的input来实现这个级联查询功能. 首先,combobox 实现 动态加载 选项的方法有: reload(url)  .

vs2013+MVC3.0+EasyUI的ComboBox联动使用(二)

?? vs2013+MVC3.0+EasyUI的ComboBox联动使用(二) 简单介绍:在vs2013(.net4.0)中使用MVC3.0对于EasyUI中ComboBox的联动使用. 载入ComboBox数据,而且实现联动效果, 本文将採用EasyUI中的Date控件与ComboBox实现联动效果,如图: ----------------------------------------------------------------------------------------------

利用easyUI的combobox打造自动提示组件

自动提示是时下一个很流行的功能,比如说百度.谷歌的搜索输入框都使用到了这么一个功能. 由于easyUI的combobox设计师已经考虑到了这个功能,所以只需简单几步我们可以轻松打造自己的自动提示组件. 自动提示有两种模式,一种是本地(local)一种是远程的(remote). local的意思也就是说先将所有的数据都加载到客户端页面,之后仅仅是在这些已加载的数据中去过滤,不会向服务器发出额外的请求 而remote呢,也就是说事先并不加载所有数据,而是等到用户输入关键字之后,再向服务器发出请求,返

【高德地图API】从零开始学高德JS API(七)——定位方式大揭秘

摘要:关于定位,分为GPS定位和网络定位2种.GPS定位,精度较高,可达到10米,但室内不可用,且超级费电.网络定位,分为wifi定位和基站定位,都是通过获取wifi或者基站信息,然后查询对应的wifi或者基站位置数据库,得到的定位地点.定位数据库可以不断完善不断补充,所以,越定位越准确.本文详细描述了,如果使用高德JS API来实现位置定位.城市定位的方法,包含了IP定位,浏览器定位,检索定位等多种网络定位方法.当然,如果您的手机有GPS功能,那么使用浏览器定位的时候,会自动获取GPS信息,使

【高德地图API】从零开始学高德JS API(四)搜索服务

摘要:地图服务,大家能想到哪些?POI搜素,输入提示,地址解析,公交导航,驾车导航,步行导航,道路查询(交叉口),行政区划等等.如果说覆盖物Marker是地图的骨骼,那么服务,就是地图的气血.有个各种各样的地图服务,我们的地图应用才能变得有血有肉,活灵活现.第四篇拆成了几个要点,本篇主要讲搜索服务.包括周边搜索,关键词搜索,范围搜索,搜索提示(自动完成,输入提示),行政区域,交叉路口,检索自有数据(云图). demo:http://zhaoziang.com/amap/zero_4_1.html

【高德地图API】从零开始学高德JS API(二)地图控件与插件——测距、圆形编辑器、鼠标工具、地图类型切换、鹰眼鱼骨

摘要:无论是控件还是插件,都是在一级API接口的基础上,进行二次开发,封装的一系列更加便于开发者使用,减少开发者工作量的二级API接口.除了官方通用的鱼骨.鹰眼控件,还有大量官方开发的地图插件,类似谷歌的lib.当然本文还会介绍自定义插件的使用. ------------------------------------------------------------------------------------------------- 第一部分 控件 目前官方支持的控件包含:缩放控制条-地图

利用easyUI的combobox打造自己主动提示组件

自己主动提示是时下一个非常流行的功能,比方说百度.谷歌的搜索输入框都使用到了这么一个功能. 因为easyUI的combobox设计师已经考虑到了这个功能.所以仅仅需简单几步我们能够轻松打造自己的自己主动提示组件. 自己主动提示有两种模式,一种是本地(local)一种是远程的(remote). local的意思也就是说先将全部的数据都载入到client页面,之后不过在这些已载入的数据中去过滤,不会向server发出额外的请求 而remote呢,也就是说事先并不载入全部数据.而是等到用户输入keyw

JS 省市区级联 修改地址操作时的默认选中方法

省市区级联JS控件 下载地址http://files.cnblogs.com/bin-pureLife/%E5%B0%8F%E5%9B%BE%E6%A0%87.zip function update(province,city,county){ $("#s_province option").each(function(){ if($(this).val()==province){ $(this).attr('selected',true) change(1); } }); $(&qu