新手学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]); } } });
好记性不如烂笔头,这些都是宝贵的经验。
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。