Xiaomei and I's Coding Diary (2) The first list page based on MVC Jqgrid_html/css

1. Foreword

"Brother Nima, last week you taught me how to change the OA system UI. Mr. Huang was very satisfied with it."
"Not bad, it seems. Xiaomei has made great progress. You can end your probation period early. Don’t forget to treat me to dinner when your salary increases!”
“Brother Nima, do you have a girlfriend?”

“Xiaomei , This is not good, although I am very good, and you are also very good, but I am not teaching you to write programs because I have any intention for you! Of course, if you insist on doing this, I will have to obey you. "

"Brother Nima, you are overthinking. I just want to tell you that if you are so stingy and ask girls to treat you to dinner, it would be weird if you can get a girlfriend. By the way, our OA system used to be .net WebForm Yes, the tables inside are all from gridview. I can't find them in MVC. What should I do? "

"Well, gridview is a server control and cannot be used directly in the view, and the server control user The experience is not good. This time I will teach you a new thing, use jqgrid. jqgrid is a js open source table plug-in. It is lightweight, easy to control, and the effect is very good. Let me show you the official website and my other projects. Use effect”

Jqgrid official website: http://www.trirand.com/blog/

“Brother Nima, what are you doing? Ah, the interface is originally very beautiful, why are you shading it? Don’t you know that shading has seriously affected the progress of mankind?” It’s a place to learn knowledge, so I coded some things about the company. The point is to learn technology with everyone. Look at Teacher Cang, any movie that is not coded will still be popular.”

2. The use of Jqgrid in MVC

"Brother Nima, jqgrid is a js plug-in. How can I use it in combination with MVC?"

"Xiaomei, Just saying that you may not understand, let me give you an example, teach you how to make a basic data, do a 'department management', and then tell you step by step how I insert jqgrid into your MVC."

"It is actually very simple to use Jqgrid to display data. After introducing this plug-in, we only need to stuff it with a Json data packet, and a beautiful data list will be displayed in front of us immediately."

"Brother Nima, I checked MVC yesterday. It is actually model, View, and Control. Model is an entity, View is used to display data, and Control mainly controls the interaction between the front and backends; then this Jqgrid plug-in should be placed It’s on the View.”

“Smart, I was thinking about how to explain it to you, so you previewed it yourself. That’s good, Xiaomei. Okay, the foreplay is over, let’s officially start masturbating. "

"Brother Nima, I directly generated the Model using the code generator. Then I think the controller should get the department list from the backend, and then convert it into Json and pass it to the frontend. The code is modeled on your last time. Teach me how to write the menu in Json, see if you can do it. "

/// <summary>    /// 部门管理控制器    /// </summary>    public class DepartmentController : PublicController<Base_Department>    {        Base_DepartmentBll base_departmentbll = new Base_DepartmentBll();        /// <summary>        /// 【部门管理】返回列表JONS        /// </summary>        /// <returns></returns>        public ActionResult GridListJson(JqGridParam jqgridparam)        {            DataTable ListData = base_departmentbll.GetList(ref jqgridparam);            return Content(ListData.ToJson());        }    }    /// <summary>    /// 部门管理    /// <author>    ///        <name>she</name>    ///        <date>2014.08.07 12:34</date>    /// </author>    /// </summary>    public class Base_DepartmentBll : RepositoryFactory<Base_Department>    {            /// <summary>        /// 获取部门 列表        /// </summary>        /// <param name="jqgridparam"></param>        /// <returns></returns>        public DataTable GetList( ref JqGridParam jqgridparam)        {            StringBuilder strSql = new StringBuilder();            strSql.Append(@"SELECT  *                            FROM    ( SELECT    d.DepartmentId ,            --主键                                                c.FullName AS CompanyName ,    --所属公司                                                d.CompanyId ,                --所属公司Id                                                d.Code ,                    --编码                                                d.FullName ,                --部门名称                                                d.ShortName ,                --部门简称                                                d.Nature ,                    --部门性质                                                d.Manager ,                    --负责人                                                d.Phone ,                    --电话                                                d.Fax ,                        --传真                                                d.Enabled ,                    --有效                                                d.SortCode,                 --排序吗                                                d.Remark                    --说明                                      FROM      Base_Department d                                                LEFT JOIN Base_Company c ON c.CompanyId = d.CompanyId                                    ) T WHERE 1=1 ");            List<DbParameter> parameter = new List<DbParameter>();            return Repository().FindTablePageBySql(strSql.ToString(), parameter.ToArray(), ref jqgridparam);            return Repository().FindTableBySql(strSql.ToString(), parameter.ToArray());        }    }

Copy after login

" Not bad, you have a strong learning ability. Xiaomei, you are a lot like me in this way! " "Brother Nima, there is a ref JqGridParam jqgridparam parameter in the GetList function. I copied it. What is the use of that parameter? "

"Xiaomei, look at the last method called FindTablePageBySql. It has the word Page in it, which is obviously used for paging. What's more, you can understand a lot of code now. When you encounter such public methods, don't just know how to call them. You can also jump in with F12 and have a look. It will be very helpful for you to learn development. "

"Okay, let me teach you how to write the View layer code. In fact, I also learned it from the official Demo. From now on, don’t just watch Japanese movies, but also watch European and American series. In the future, you will be able to understand English documents, which will help you improve your skills. "

@{    ViewBag.Title = "部门管理";}<!--框架必需start--><link href="~/Content/Styles/learunui-framework.css" rel="stylesheet" /><script src="~/Content/Scripts/jquery/jquery-1.8.2.min.js"></script><script src="~/Content/Scripts/learunui-framework.js"></script><!--框架必需end--><!--jqgrid表格组件start--><script src="~/Content/Scripts/jqgrid/jquery-ui-custom.min.js"></script><script src="~/Content/Scripts/jqgrid/grid.locale-cn.js"></script><link href="~/Content/Scripts/jqgrid/css/jqgrid.css" rel="stylesheet" /><script src="~/Content/Scripts/jqgrid/jqGrid.js"></script><!--表格组件end--><link href="~/Content/Scripts/tree/tree.css" rel="stylesheet" /><script src="~/Content/Scripts/tree/tree.js"></script><script type="text/javascript">    $(document).ready(function () {        GetGrid("");    });    //加载表格    function GetGrid(CompanyId) {        $("#gridTable").jqGrid({            url: "/Department/GridListJson",            datatype: "json",            height: $(window).height() - 105,            autowidth: true,            colModel: [                { label: '主键', name: 'departmentid', index: "departmentid", hidden: true },                { label: '编码', name: 'code', index: "code", width: 80 },                { label: '部门', name: 'fullname', index: "fullname", width: 100 },                { label: '简称', name: 'shortname', index: "shortname", width: 100 },                { label: '性质', name: 'nature', index: "nature", width: 100, align: "center" },                { label: '负责人', name: 'manager', index: "manager", width: 80, align: "center" },                { label: '电话', name: 'phone', index: "phone", width: 100, align: "center" },                { label: '传真', name: 'fax', index: "fax", width: 100, align: "center" },                { label: '所属公司', name: 'companyname', index: "companyname", width: 120 },                {                    label: '有效', name: 'enabled', index: 'enabled', width: 45, align: 'center',                    formatter: function (cellvalue, options, rowObject) {                        if (cellvalue == '1') return "<img src='/Content/Images/checkokmark.gif'/>";                        if (cellvalue == '0') return "<img src='/Content/Images/checknomark.gif'/>";                    }                },                { label: '说明', name: 'remark', index: "remark", width: 300 }            ],            pager: "#gridPager",            sortname: 'SortCode',            sortorder: 'asc',            rownumbers: true,            shrinkToFit: false,            gridview: true,        });    }</script><div id="layout" class="layout">    <div class="layoutPanel layout-center">        <div class="btnbartitle">            <div>                部门列表<span id="CenterTitle"></span>            </div>        </div>        <table id="gridTable"></table>        <div id="gridPager"></div>    </div></div>

Copy after login

"Brother Nima, you told me before that AV technology is needed for front-end and back-end interaction. Why don't you see Ajax calls here? Where are the traces? "

"Xiaomei, are you stupid again? When you watch the shy little movie, are you still watching it in a company setting like the office? You must be hiding somewhere to watch it secretly. Jqgrid is a plug-in. It Of course it is encapsulated. You see there is a URL parameter there. I point it to the Action in your controller to get Json, so that Jqgrid can get the returned Json. "

"Oh, it turns out that they encapsulated things. Then the gridPager paging thing must also have encapsulated things in the background, otherwise it would not be connected with the list at all. "

"Yes, Xiaomei is very smart. This thing is open source. You should check it out when you have time. It will also be helpful for you to use this plug-in in the future. The source code is still on Baidu Netdisk. You Go down by yourself. "

Source code download address: http://pan.baidu.com/s/1gdiVKJp

"Brother Nima, why is the source code you gave me a little different from the picture above? Why is the company tree on the left missing? There is no toolbar either. "

"Xiaomei, I told you, step by step, take your time, you have to complete this form first, and I will teach you the rest next week. ”