首页 > 代码库 > Easyui-datagrid 给标题列加上超链接(MVC3.0应用程序中)
Easyui-datagrid 给标题列加上超链接(MVC3.0应用程序中)
在接触一项新东西时,首先就给了自己一种错觉,“肯定很难,肯定实现不了”,所以就根据任务标题链接到任务详情页这个功能,就一拖再拖,今天终于对自己狠了狠心,将其完成了。
现在的知识也进入了快餐社会,先让读者看看是否是自己想要的效果!
点击标题后出现的页面是:我们可以根据任务ID得到具体的任务,返回到界面显示给用户
由于MVC应用程序所走的路线是有所不同的,所以我们按断点调试走一遍代码:
- controller中
#region 获得分页数据+ 刘颖 2015-1-6 public JsonResult LoadPages() { //1、具体操作-调用后台方法,接收从后台传过来的--赋值 //调用假数据模仿 int pagesize =Request["rows"] == null ? 10 : int.Parse(Request["rows"]); int pagenum =Request["page"] == null ? 1 : int.Parse(Request["page"]); //需要根据页容量和页码进行查询,查询出来的数据,直接赋给底下dgmode对象的rows, //另外还需要进行页码总行数查询,查询出来的数据需要赋给total //查询任务信息 List<Task> lsTask = newList<Task>(); int total = 0; //查询任务信息 使用分页方法 lsTask =basictaskService.LoadPageTask(pagesize, pagenum, out total); //2 生成规定格式的 json字符串发回 给 异步对象 //生成符合EasyUi格式的数据 DataGridView dgModel = newDataGridView() { total = total, rows = lsTask, footer = null }; //2.0返回到前台的信息 return Json(dgModel,JsonRequestBehavior.AllowGet); } #endregion
- View中:先看页面实现:当然也要引用easyui中的5个文件到页面中(具体路径可能不一致)
<scriptsrc=http://www.mamicode.com/Content/jquery-easyui-1.3.2/locale/easyui-lang-zh_CN.js"></script>>页面具体实现代码
- url定义用于接收controller返回的数据
<table id="dg"class="easyui-datagrid" title="任务信息"data-options="rownumbers:true,singleSelect:true,autoRowHeight:true,pagination:true,url:'@ViewData["url"]'"toolbar:"#tb" > <thead> <tr> <thdata-options="field:'ck',checkbox:true"></th> <thdata-options="field:'TaskID'" style="width:80px">任务ID</th> <thdata-options="field:'TaskCode'" style="width: 80px; text-align:right">任务编号</th> <thdata-options="field:'TaskTitle',formatter: titleformater" style="width: 100px">任务标题</th> <thdata-options="field:'TaskContent'" style="width:80px">任务内容</th> <thdata-options="field:'AssignStartTime'" style="width: 80px;text-align: right">任务分配时间</th> <thdata-options="field:'ExpectFinish'" style="width: 100px;text-align: right">任务期望完成时间</th> <thdata-options="field:'RemindType'" style="width:110px">任务提醒方式</th> <thdata-options="field:'Note'" style="width:110px">任务备注</th> <thdata-options="field:'Operator'" style="width:110px">任务添加者</th> </tr> </thead> </table>
- 我们在标题列使用格式化方法:
<thdata-options="field:'TaskTitle',formatter: titleformater" style="width: 100px">任务标题</th>格式化方法在页面javascript中如下:easyui的datagrid的每个单元格有三个参数组成,(值,行索引,列索引)
<scripttype="text/javascript"> //将href导向控制器TaskDetails下Index中 function titleformater(value, row, index) { return "<ahref=http://www.mamicode.com/'TaskDetails/Index?TaskID=" + row.TaskID + "'target='_blank'>" + value + "";>
根据任务ID的得到任务实体,返回到界面中,请读者自行完成,或看我之后的文章!
Easyui-datagrid 给标题列加上超链接(MVC3.0应用程序中)
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。