Easyui-datagrid 给标题列加上超链接(MVC3.0应用程序中)

    在接触一项新东西时，首先就给了自己一种错觉，“肯定很难，肯定实现不了”，所以就根据任务标题链接到任务详情页这个功能，就一拖再拖，今天终于对自己狠了狠心，将其完成了。

       现在的知识也进入了快餐社会，先让读者看看是否是自己想要的效果！

 

点击标题后出现的页面是：我们可以根据任务ID得到具体的任务，返回到界面显示给用户

 

 

由于MVC应用程序所走的路线是有所不同的，所以我们按断点调试走一遍代码：

1. 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

 

 

2. View中：先看页面实现：当然也要引用easyui中的5个文件到页面中（具体路径可能不一致）

    <scriptsrc="../../Content/jquery-easyui-1.3.2/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript"src="../../Content/jquery-easyui-1.3.2/jquery.easyui.min.js"></script>
    <link rel="stylesheet"type="text/css"href="../../Content/jquery-easyui-1.3.2/themes/default/easyui.css">
    <link rel="stylesheet"type="text/css"href="../../Content/jquery-easyui-1.3.2/themes/icon.css">
    <link rel="stylesheet"type="text/css"href="../../Content/jquery-easyui-1.3.2/demo/demo.css">

页面具体实现代码

1. 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>

 

2. 我们在标题列使用格式化方法：

                   

 <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='TaskDetails/Index?TaskID=" + row.TaskID + "'target='_blank'>" + value + "</a>";
 
    }
</script>

 

 

根据任务ID的得到任务实体，返回到界面中，请读者自行完成，或看我之后的文章！