新手学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-11-17 06:38:30

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

新手学EasyUI(八)----SubGrid三级嵌套

最近做的项目中要实现一项功能,如下: 本来是想用tree来实现的,但是无奈时间紧张,能力有限,暂时没有方法来实现这样的树,于是就换了一种方式.在EasyUi中有一种表格可以满足上面的样式-–SubGrid表格 STEP1 创建主网格 <table id="subDatagrid" style="width: 100%; height: 90%;" data-options="" title="综合安防系统集成管理平台"&

新手学EasyUI(七)----DataGrid CheckBox 动态选中

先上一张图: 下面说一下具体实现的功能是什么样的. 页面首次加载的时候,右面的表格中的CheckBox都处于未选中的状态,现在是这么设计的,时段只有这么8条数据在一张单独的表里面. 用户和时段的关系放在另一张表中,当点击左侧具体的用户的时候,根据表中的关系,勾选右侧DataGrid中与之对应的数据.这就是要实现的功能. 具体的实现如下: 根据选中的用户ID去表中查询与之对应的时段数据,然后当数据返回到前台之后,先将json串转换成json对象,然后循环遍历对象中的数据,将表格中对应的数据选中,代

Easyui的combobox实现动态数据级联效果_java

实现从数据库中动态获取对应的List集合,并在Easyui的combobox中显示出来. 实现的效果如下: 1.数据库的表设计如图所示 2.数据库中填写相关的数据,如图所示.如图所示[法律法规]是所属栏目,因此他的字段parentid是0.[中国公民出国].[内地居民往来港澳]是属于法律法规的类别.因此他们的字段parentid是对应1,[法律法规]的字段categoryid是1. 3.相关的配置:已经在前面的博客中写了http://www.jb51.net/article/86381.htm

新手学HighCharts(二)----对比柱状图的动态加载

highcharts数据显示形式 后台 B层实现层 Controller层 前台 JSP JavaScript     上一篇文章 新手学HighCharts(一)--基本使用 中介绍了highCharts的基本使用,今天给大家介绍对比柱状图的使用,贴张图先: highcharts数据显示形式     在highcharts中有一个属性series,这个属性主要是配置图表要展示的数据. var series = [ { name: 'Tokyo', data: [7.0, 6.9, 9.5, 1

新手学JAVA(三)----StringBuilder类

   上一篇文章新手学JAVA(二)----String类与StringBuffer类的区别中了解到,String的值是不可变的,这就导致 每次对String的操作都会生成新的String对象,不仅效率低下,而且大量浪费有限的内存空间,StringBuffer是可变 类,和线程安全的字符串操作类,任何对它指向的字符串的操作都不会产生新的对象.       StringBuffer类和StringBuilder类功能基本相似.算是两个双胞胎.   下面主要说两点   第一点  线程安全   Str

EasyUI中combobox默认值注意事项

 这篇文章主要介绍了EasyUI中combobox默认值注意事项,是个人在项目中遇到并解决的事宜,分享给大家,需要的朋友可以参考下     在修改数据时,需要先加载数据. 在加载combobox数据的时候,从后台传来的应该int类型的数据. html代码   代码如下: <tr> <td style="text-align: right;">院系:</td> <input type="hidden" id="bel

新手学android,监听两个按钮的问题,出现错误

问题描述 新手学android,监听两个按钮的问题,出现错误 package com.example.xingpengfei.guessnumber; import android.content.DialogInterface; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.widget.Button; imp

跪求大神解答-新手学java有几个不懂得问题求各位大神解答

问题描述 新手学java有几个不懂得问题求各位大神解答 封装有什么意义.为什么要用prative封装呢.直接public不行吗?都说为了安全难道用一个方法setter getter 改变数据这样就安全么?.直接public 多方便.求大神举个例子说明. 第二个问题static:证明此方法是由类名称调用的这句话怎么理解. 第三个问题static有什么作用,我就知道他在类里最先执行然后可以不实力化调用,然后有什么用这有点蒙. 第四个问题我理解的映射就是一项与另一项的关系.他也可以用属性表示.但是之所

123-求教大神C++问题,新手学C++编程

问题描述 求教大神C++问题,新手学C++编程 源程序如下: #include #include using namespace std; class student { public: student(int n,string nam,char s) { num=n; name=nam; sex=s; cout<<"construct called"<<endl; } ~student() {cout<<"destruct called.