MVC+easyui-datagrid之查看详情
在做GXPT时,我负责课表这块儿,而这块儿最大的特点是很难用到大家公共的东西,只能自己一点点去做,其中之一就是查看详情,这个功能我做了大概有两天时间,下面是我做的成果:
点击查看详情后,要弹出对应ID 的内容,如下:
下面看一下这个功能的具体实现:
先看View:
<span style="font-size:14px;"><table id="dgTimeTable" class="easyui-datagrid" style="position: relative;height:auto;" data-options="url:'/BasicTimeTable/QueryTimeTable/',checkbox:true,resizable:true,collapsible:true,method:'get',autoColWidth:true,pageSize:10,rownumbers:true,pagination:'true',fitColumns:true"> <thead> <tr> <th data-options="field:'ck',checkbox:true"></th> <th data-options="field:'TimeTableID',hidden:true">课表ID</th> <th data-options="field:'OnClassName',hidden:true">上课班名称</th> <th data-options="field:'CourseName'">课程名称</th> <th data-options="field:'Cycle'">周期</th> @*<th data-options="field:'weekly',width:100">周次</th>*@ <th data-options="field:'StratWeek'">开始周</th> <th data-options="field:'EndWeek'">结束周</th> <th data-options="field:'StartSectionName'">开始节次</th> <th data-options="field:'EndSectionName'">结束节次</th> <th data-options="field:'Week'">星期</th> <th data-options="field:'BuildingName'">建筑</th> <th data-options="field:'RoomName'">教室</th> <th data-options="field:'OnClassNamey',<strong><span style="color:#ff0000;">formatter: rowformater</span></strong>">上课班信息</th> <th data-options="field:'operation',formatter:formatOper,hidden:true">操作</th> <th data-options="field:'TeacherName',hidden:true">授课教师</th> <th data-options="field:'courseID',hidden:true">课程ID</th> <th data-options="field:'CourseType',hidden:true">课程类型</th> <th data-options="field:'CourseProperty',hidden:true">课程性质</th> <th data-options="field:'Semeter',hidden:true">学年学期</th> <th data-options="field:'Period',hidden:true">学时</th> <th data-options="field:'Credit',hidden:true">学分</th> <th data-options="field:'Totalmember',hidden:true"> 人数</th> <th data-options="field:'StudentNo',hidden:true"> 学号</th> <th data-options="field:'Name',hidden:true">姓名</th> <th data-options="field:'ClassName',hidden:true">班级</th> <th data-options="field:'GradeName',hidden:true">年级</th> <th data-options="field:'Profession',hidden:true">专业</th> <th data-options="field:'pProfession',hidden:true">学院</th> </tr> </thead> </table> </div> </div> </div></span>加红处就是我要处理的“查看详情”的地方,下面再JS中给这个字段附上事件:
<span style="font-size:14px;"><script type="text/javascript"> //查看详情界面 function <strong>showDialog</strong>(aa, courseName, courseType, teacherName, semeter, period, credit, totalmember, organization, timetableid) { //document.getElementById("courseID").innerText = courseid; document.getElementById("CourseProperty").innerText = aa; document.getElementById("CourseName").innerText = courseName; document.getElementById("CourseType").innerText = courseType; document.getElementById("TeacherName").innerText = teacherName; document.getElementById("semeter").innerText = semeter; document.getElementById("Period").innerText = period; document.getElementById("Credit").innerText = credit; document.getElementById("Totalmember").innerText = '45'; document.getElementById("Organization").innerText = organization; document.getElementById("TimeTableID").value = timetableid; $('#dlgOnClassDetail').dialog('open').dialog('setTitle', '上课班信息'); } //查看详情超链接 function rowformater(value, row, index) { return "<a href='#' onclick='<strong><span style="color:#ff0000;">showDialog</span></strong>(" + '" ' + row.CoursepropertyName + '"' + "," + '" ' + row.CourseName + '"' + "," + '" ' + row.CourseTypeName + '"' + "," + '"' + row.teacherName + '"' + "," + '" ' + row.Semeter + '"' + "," + '" ' + row.Period + '"' + "," + '" ' + row.Credit + '"' + "," + '" ' + row.TotalMember + '"' + "," + '" ' + row.OrganizationName + '"' + "," + '"' + row.TimeTableID + '"' + ")'>查看详情</a>"; } </script></span>下面是controller中的内容:
<span style="font-size:14px;"> public ActionResult QueryTimeTable(string strLike) { int pageSize = Request["rows"] == null ? 10 : int.Parse(Request["rows"]); int pageIndex = Request["page"] == null ? 1 : int.Parse(Request["page"]); int total; List<TimeTable> timetableList = new List<TimeTable>(); //strLike = Request.Form["strLike"]; if (strLike == "" || strLike == null) { timetableList = iBasicTimeTable.QueryTimeTable(pageSize, pageIndex, out total); } else { timetableList = iBasicTimeTable.FuzzyQueryTimeTable(strLike);//查询到匹配的list } //将list转换成json字串,需要序列化 JavaScriptSerializer servializer = new JavaScriptSerializer();//实例化一个序列化对象 string strTimeTableJson = servializer.Serialize(timetableList); var data = new { //total, rows = timetableList }; return Json(data, JsonRequestBehavior.AllowGet); }</span>在我的需求中用到了对多个表的操作,包括节次、上课班、课程、教师、学生、建筑,所以说在底层,也就是WCF中的实现,难度也大大加大,因为返回的界面的内容很多,包括很多的表,所以,下面来看看我底层的实现:底层用的是三层+WCF+ViewModel+EF
<span style="font-size:14px;"> public List<TimeTable> QueryTimeTable(int pageSize, int pageIndex, out int total) { //实例化一个数据泛型集合 List<TimeTable> timetablelist = new List<TimeTable>(); //调用BLL层接口 var result = IBasicTimeTable.LoadPageItems(pageSize, pageIndex, out total, p => p.TimeTableID, true); //使用循环,遍历IQuerble集合,赋值到数据契约 foreach (var item in result) { List<Student> studentlist = new List<Student>(); //构造器 //var onclassstudentlist = IBasicOnClass.LoadEnities(n => n.OnClassID == item.OnClassID).ToList(); var onclassstudentlist = IBasicOnClassStudent.LoadEnities(n => n.OnClassID == item.OnClassID).ToList(); foreach (var studentTmp in onclassstudentlist) { Student student = new Student { StudentID = studentTmp.StudentID, StudentNo = studentTmp.BasicStudentEntity.StudentNo, Name = studentTmp.BasicStudentEntity.Name, ClassName = studentTmp.BasicStudentEntity.BasicClassEntity.ClassName , GradeName = studentTmp.BasicStudentEntity.BasicClassEntity.BasicGradeEntity.GradeName, TrainDestination = studentTmp.BasicStudentEntity.TrainDestination, OrganizationName = studentTmp.BasicStudentEntity.BasicClassEntity.BasicOrganizationEntity.OrganizationName //学院 }; studentlist.Add(student); } TimeTable timetable = new TimeTable { TimeTableID = item.TimeTableID, OnClassName=item.BasicOnClassEntity.OnClassName, EndWeek = item.EndWeek, StratWeek = item.StratWeek, Cycle = item.Cycle, OnClassID = item.BasicOnClassEntity.OnClassID, CourseName = item.BasicOnClassEntity.BasicCourseEntity.CourseName, StartSectionName = item.BasicSectionEntity.SectionName, EndSectionName = item.BasicSectionEntity1.SectionName, Week = item.Week, BuildingName = item.BasicRoomEntity.BasicBuildingEntity.BuildingName, RoomName = item.BasicRoomEntity.RoomName, CourseTypeName = item.BasicOnClassEntity.BasicCourseEntity.BasicCourseTypeEntity.CourseTypeName, CoursepropertyName = item.BasicOnClassEntity.BasicCourseEntity.BasicCoursepropertyEntity.CoursepropertyName, OrganizationName = item.BasicOnClassEntity.BasicCourseEntity.BasicOrganizationEntity.OrganizationName, teacherName = item.BasicOnClassEntity.BasicTeacherEntity.Name, SchoolYear = item.BasicOnClassEntity.BasicSchoolCalendarEntity.SchoolYear, Term=item.BasicOnClassEntity.BasicSchoolCalendarEntity.Term, Period = item.BasicOnClassEntity.BasicCourseEntity.Period, Credit = item.BasicOnClassEntity.BasicCourseEntity.Credit, studentSum = item.BasicOnClassEntity.TotalMember, studentList = studentlist }; timetablelist.Add(timetable); } return timetablelist; }</span>代码的实现到此为止,可是其中的思路和遇到问题时的心态回想起来比敲代码更加重要,因为查看详情这个问题在一开始做的时候确实没有头绪, 查完资料,看完前辈们的之后,然后会感觉无从下手,于是一开始的时候就会有些焦虑,消极,但是现在想想,一切的焦虑、心烦只能是为自己的问题火上焦油,根本起不到任何好的作用,还有就是在遇到问题时,用工具的技巧、意识的培养都很重要,当我让其他的同学来帮我调的时候,我发现自己欠缺的更多的是工具的使用技巧,所以说用好工具可以助自己一臂之力啊!
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。