MVC+easyui-datagrid之查看详情

r囧r小猫 2022-08-06 14:16 179阅读 0赞

在做GXPT时，我负责课表这块儿，而这块儿最大的特点是很难用到大家公共的东西，只能自己一点点去做，其中之一就是查看详情，这个功能我做了大概有两天时间，下面是我做的成果：

![Center][]

点击查看详情后，要弹出对应ID 的内容，如下：

![Center 1][]

下面看一下这个功能的具体实现：

先看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='#' οnclick='<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>

代码的实现到此为止，可是其中的思路和遇到问题时的心态回想起来比敲代码更加重要，因为查看详情这个问题在一开始做的时候确实没有头绪， 查完资料，看完前辈们的之后，然后会感觉无从下手，于是一开始的时候就会有些焦虑，消极，但是现在想想，一切的焦虑、心烦只能是为自己的问题火上焦油，根本起不到任何好的作用，还有就是在遇到问题时，用工具的技巧、意识的培养都很重要，当我让其他的同学来帮我调的时候，我发现自己欠缺的更多的是工具的使用技巧，所以说用好工具可以助自己一臂之力啊！

[Center]: /images/20220806/9f1c397b3c9a4494b5db10cc29d3accf.png
[Center 1]: /images/20220806/f8e97cfd56d140479445913b492958b5.png