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

简介: <p><span style="font-size:18px">      最近在做一个EasyUi ComboBox的级别联动的效果,相关的内容如下:</span></p> <p><span style="font-size:18px">  <img src="http://img.blog.csdn.net/20150131164601387?watermark/2/text/aHR

      最近在做一个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]);
        }
    }
});

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

    


      

相关文章
|
1月前
|
JavaScript
EasyUi js 加载数据进下拉框combobox
EasyUi js 加载数据进下拉框combobox
|
1月前
|
JavaScript 前端开发
EasyUi js 加载数据表格DataGrid
EasyUi js 加载数据表格DataGrid
|
前端开发 测试技术
Easyui 修改|新增jquery-easyui icon图标
Easyui 修改|新增jquery-easyui icon图标
87 0
|
JavaScript 前端开发
【前端】用jquery或js获取select标签中选中的option值及文本
用jquery或js获取select标签中选中的option值及文本
1099 0
|
JavaScript 容器
jQuery EasyUI 重写datagrid的datetimebox编辑类型
jQuery EasyUI 重写datagrid的datetimebox编辑类型
1904 0