首页 > 代码库 > Easyui-datagrid 给标题列加上超链接(MVC3.0应用程序中)

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

 

 

  1. View中:先看页面实现:当然也要引用easyui中的5个文件到页面中(具体路径可能不一致)

    <scriptsrc=http://www.mamicode.com/Content/jquery-easyui-1.3.2/locale/easyui-lang-zh_CN.js"></script>>

页面具体实现代码

  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>

 

  1. 我们在标题列使用格式化方法:

                   

 <thdata-options="field:'TaskTitle',formatter: titleformater" style="width: 100px">任务标题</th>

格式化方法在页面javascript中如下:easyuidatagrid的每个单元格有三个参数组成,(值,行索引,列索引)

 

<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应用程序中)