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[].Value = id;

            DataTable dt = DAL.SqlHelper.SelectSqlReturnDataTable(sql, CommandType.Text, pars);

            T_News newlist = null;

            if (dt.Rows.Count > )

            {

                newlist = new T_News();

                LoadEntity(dt.Rows[], 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);

        }

巴特西

oa_mvc_easyui_详细页(5)

最新文章

热门文章