新手學EasyUi+JS----ComboBox 級聯

標籤：easyui   combobox   js   

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

   好記性不如爛筆頭，這些都是寶貴的經驗。

    

      

新手學EasyUi+JS----ComboBox 級聯