oa_mvc_easyui_详细页(5)

1.表格详细列中添加a标签，给id参数

<a href="javascript:void(0)" class="details" ids="@newlist.Id">详细</a>

ids属性，便于jquery调用此参数

 

2.添加一个div，显示详细信息，并给定easyui--dialog样式，用于显示/隐藏

<div id="tbshowDetail" class="easyui-dialog" title="Basic Dialog" data-options="iconCls:'icon-save',modal:true" style="width:400px;height:200px;padding:10px">
            <table width="100%">
                <tr><td>编号</td><td><span id="show_Id"></span></td></tr>
                <tr><td>标题</td><td><span id="show_Title"></span></td></tr>
                <tr><td>作者</td><td><span id="show_Author"></span></td></tr>
                <tr><td>时间</td><td><span id="show_Time"></span></td></tr>
            </table>
        </div>

 

3.jquery的编写

<script type="text/javascript">

        $(function () {
            $('#tbshowDetail').dialog('close') //用于隐藏显示详细页的对话框
            //$("#tbshowDetail").css("display", "none");
            $(".details").click(function () {
                showDetail($(this).attr("ids"))//显示详细信息
            });
        })

        //显示详细信息的方法
        function showDetail(id) {
            //post异步请求
            $.post("/NewList/GetNewInfoModel", { "id": id }, function (data) {
                //回调函数绑定，返回的是json格式
                $("#show_Id").text(data.Id);
                $("#show_Title").text(data.Title);
                $("#show_Author").text(data.Author);
                $("#show_Time").text(ChangeDateFormat(data.SubDateTime));
            });
            //$("#tbshowDetail").css("display", "block");
            $('#tbshowDetail').dialog('open')
        }

        //将序列化成json格式后日期(毫秒数)转成日期格式
        function ChangeDateFormat(cellval) {
            var date = new Date(parseInt(cellval.replace("/Date(", "").replace(")/", ""), 10));
            var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
            var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
            return date.getFullYear() + "-" + month + "-" + currentDate;
        }

    </script>

 

4.数据层和业务层的编写，用于显示详细页

NewListInfoDal:

 /// <summary>
        /// 根据id获取一条详细信息
        /// </summary>
        /// <param name="id"></param>
        /// <returns></returns>
        public T_News GetModel(int id)
        {
            string sql = " select * from T_News where id =@id ";
            SqlParameter[] pars ={
                                      new SqlParameter("@id",SqlDbType.Int)
                                  };
            pars[0].Value = id;
            DataTable dt = DAL.SqlHelper.SelectSqlReturnDataTable(sql, CommandType.Text, pars);
            T_News newlist = null;
            if (dt.Rows.Count > 0)
            {
                newlist = new T_News();
                LoadEntity(dt.Rows[0], newlist);
            }
            return newlist;
        }

NewListInfoService:

 /// <summary>
        /// 返回一条信息
        /// </summary>
        /// <param name="id"></param>
        /// <returns></returns>
        public T_News GetModel(int id)
        {
            return NewListInfo.GetModel(id);
        }

 

5.视图中的返回，返回Json格式

/// <summary>
        /// 获取一条信息
        /// </summary>
        /// <returns></returns>
        public ActionResult GetNewInfoModel()
        {
            int id = int.Parse(Request["id"]);
            T_News newlist = NewListInfo.GetModel(id);

            return Json(newlist, JsonRequestBehavior.AllowGet);
        }