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='#' ο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>
代码的实现到此为止,可是其中的思路和遇到问题时的心态回想起来比敲代码更加重要,因为查看详情这个问题在一开始做的时候确实没有头绪, 查完资料,看完前辈们的之后,然后会感觉无从下手,于是一开始的时候就会有些焦虑,消极,但是现在想想,一切的焦虑、心烦只能是为自己的问题火上焦油,根本起不到任何好的作用,还有就是在遇到问题时,用工具的技巧、意识的培养都很重要,当我让其他的同学来帮我调的时候,我发现自己欠缺的更多的是工具的使用技巧,所以说用好工具可以助自己一臂之力啊!
MVC+easyui-datagrid之查看详情相关推荐
- SSM查看详情功能逻辑代码以及关联码表显示
场景 在后台管理中,有些报表要显示的字段很多,当进入报表的主页面时,往往只显示部分重要的内容,然后在每一条记录的后面添加一个查看详情按钮,通过点击详情按钮,跳转到显示所有信息的页面. 有时一张报表中存 ...
- jQuery EasyUI DataGrid Checkbox 数据设定与取值
纯粹做个记录,以免日后忘记该怎么设定. 这一篇将会说明两种使用 jQuery EasyUI DataGrid 的 Checkbox 设定方式,以及在既有数据下将 checked 为 true 的该笔数 ...
- easyui 修改单元格内容_jquery easyui datagrid实现增加,修改,删除方法总结
本文实例讲述了jquery easyui datagrid实现增加,修改,删除的方法.分享给大家供大家参考,具体如下: 页面: 引用的JS: JS: $(function(){ $('#tt').da ...
- 使用easyUI datagrid分页
使用easyUI datagrid分页 我用了比较简单的sturts2和mybatis结合的小测试demo实现的. 一.使用easyUI datagrid分页注意事项及原理: 1.EasyUI的Dat ...
- EasyUI DataGrid根据字段动态合并单元格
为什么80%的码农都做不了架构师?>>> 1.合并方法 /** * EasyUI DataGrid根据字段动态合并单元格 * 参数 tableID 要合并table的id * ...
- 移动端web页面列表类上拉加载,查看详情,iframe嵌套第三方页面遇到的问题以及解决办法...
1.移动端上拉加载 网上有很多成熟的插件,比如iscroll.在这里介绍一下用jquery和js写的上拉加载方法.使用原生的去写上拉加载更多需要三个高度去做对比,以新闻类列表举例,首先需要整个dom的 ...
- jQuery EasyUI DataGrid - 格式化列(formatter )
以下实例格式化在 easyui DataGrid 里的列数据,并使用自定义列的 formatter,如果价格小于 20 就将文本变为红色. 为了格式化一个数据网格(DataGrid)列,我们需要设置 ...
- JAVA实现查看详情功能_【JavaWeb】111:详情页面的实现
今天是刘小爱自学Java的第111天. 感谢你的观看,谢谢你. 话不多说,开始今天的学习: 我们浏览网页时看到的数据无外乎两种:静态数据和动态数据. 静态数据是将数据给写死了,需要修改时得去改对应的某 ...
- easyui datagrid 表头固定(垂直滚动条)、列固定(水平滚动条)
easyui datagrid 表头固定(垂直滚动条).列固定(水平滚动条),每页显示1000行 最近用多了easyui 之后还是觉得它的功能还是很强大的.它原有的功能就已经能够满足90%以上的界面需 ...
- 某银行信用卡中心——大数据反欺诈应用案例 2017-06-23 10:54 本篇案例为数据猿推出的大型“金融大数据主题策划”活动(查看详情)第一部分的系列案例/征文;感谢 百融金服 的投递 作为整体
某银行信用卡中心--大数据反欺诈应用案例 2017-06-23 10:54 本篇案例为数据猿推出的大型"金融大数据主题策划"活动(查看详情)第一部分的系列案例/征文:感谢 百融金服 ...
最新文章
- REST 在 Java 中的使用
- 在游戏里模拟天空的颜色,太迷人了!
- LEGO EV3 通信开发者套件
- mysql慢查询检查流程_简单谈谈MySQL优化利器-慢查询
- Oracle 查看表空间、数据文件的大小及使用情况
- 有福利! 好书推荐:从《实用推荐系统》学习寻找用户行为之法
- 此表单只能填写一次_暴雪战网国服账号修改邮箱只能填写表单申请
- android车载支持格式视频播放器,Android智能车机必备:十大车载影音应用推荐
- 篮球计时计分器c语言程序,篮球赛计时计分器程序源代码.doc
- FileUpload1文件上传
- DCDC基础(10)-- BUCK电路的CCM和DCM模式
- 测试点击屏幕次数的软件_红蜘蛛5校色仪怎么用?显示器校色及测试色域和色彩精准度详细教程...
- Android 质量优化工具 Booster实践
- html+css实现静态小米商城界面的学习感受与收获
- 怎样快速用计算机做字处理,怎样快速处理Word表格的技巧 -电脑资料
- 【OpenJudge】白细胞计数
- 智能座舱又迎来一个新的「蓝海」赛道!谁在领跑?
- 安装sql server走过的弯路,收集了一些安装sql遇到的问题
- howler.js_Howler.js可能是周围最好JavaScript音频库
- 在Adobe Acrobat Pro DC中为什么注释会莫名其妙消失怎么办
热门文章
- 香农编码的gui编码_香农编码
- 小米汽车VS苹果汽车,相同赛道不同逻辑
- 学而时习之语言篇: 我工作这么多年, 为什么不能准确读 “音标“ ?
- 端口扫描工具Zenmap超详细使用方法+使用案例(windows)
- 2020年中国办公软件行业市场现状分析,多端协作化、智能化、集成化是方向「图」
- reviewboard mysql_Ubuntu下ReviewBoard安装全过程_MySQL
- 数据备份与恢复、系统备份与恢复
- 计算机VFP基础知识,计算机二级《VFP》考试基础知识:VisualFoxPro基础
- 上海市职称英语计算机报名,全国职称计算机考试
- 教你电脑系统如何深度清理c盘空间