The first list page based on MVC + Jqgrid in my and Xiaomei QR code diary (2), mvcjqgrid

The first list page based on MVC + Jqgrid in my and Xiaomei QR code diary (2), mvcjqgrid

I. Preface

"Nima Ge, you taught me how to change the UI of the OA system last week. Mr. Huang was very satisfied ."
"It's good. It seems that Xiaomei has made great progress. You can end the trial period ahead of time. Please don't forget to invite me to dinner when the salary increases !"
"Nima, do you have a girlfriend ?"

"Xiaomei, this is not good. Although I am very good, you are also very good, but I didn't teach you to write a program because I tried to you! Of course, if you want to do this, I have to leave you alone ."

"Nima Ge, you think too much, I just want to tell you that it's strange to make girls invite dinner so stingy as you are. Right. We used to use. net WebForm In the OA system, and the tables in it were all in the gridview. I didn't find them in MVC. What should I do ?"

"Well, the gridview is a server control, and it cannot be used directly in the view, and the user experience with the server control is not good. This time I will teach you a new things, use jqgrid. Jqgrid is a js open-source table plug-in. It is lightweight, well controlled, and has good results. Show you how the official website and I use it in other projects"

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

"What's Nima, what's the ghost? It's a very nice interface. What are you playing with Masek? Do you know that Masek has seriously affected human progress ?"

"Xiaomei, don't care about these details. The blog garden is a place where everyone learns the knowledge. So I coded some of the company's things. The key point is to learn technology with everyone. If you watch Teacher Cang, Which movie is not CAPTCHA-coded, people are not as red as they are ."

Ii. Use of Jqgrid in MVC

"Nima Ge, jqgrid is a js plug-in. How can we use jqgrid in combination with MVC ?"

"Xiaomei, you may not understand it. I will give you a chestnut to teach you how to make a basic material and make a 'department management ', then, let's talk about how I inserted jqgrid into your MVC step by step."

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

"Nima Ge, I checked MVC yesterday. It is actually model, View, Control, model is entity, View is used to display data, and Control mainly controls interaction between the front and back ends; the Jqgrid plug-in should be placed on The View."

"Smart, I was thinking about how to explain it to you. You have prepared for it yourself. It's good, Xiaomei. Okay, the foreplay is over. Let's officially start the workshop ."

"Nima Ge, Model I directly used the code generator to generate, and then I thought the Controller should have retrieved the Department list from the background, and then converted it into Json and passed it to the foreground, the Code is the same as the one you taught me to write the menu Json."

/// <Summary> /// Department management controller /// </summary> public class DepartmentController: PublicController <Base_Department> {Base_DepartmentBll base_departmentbll = new Base_DepartmentBll (); /// <summary> // [Department management] Return to the JONS list /// </summary> /// <returns> </returns> public ActionResult GridListJson (JqGridParam jqgridparam) {DataTable ListData = base_departmentbll.GetList (ref jqgridparam); return Content (ListData. toJson ());}} /// <summary> /// Department management /// <author> /// <name> she </name> /// <date> </date> /// </author> /// </summary> public class Base_DepartmentBll: repositoryFactory <Base_Department >{/// <summary> /// obtain the Department List /// </summary> /// <param name = "jqgridparam"> </param>/ // <returns> </returns> public DataTable GetList (ref JqGridParam jqgridparam) {StringBuilder strSql = new StringBuilder (); strSql. append (@ "SELECT * FROM (SELECT d. extends mentid, -- primary key c. fullName AS CompanyName, -- Company d. companyId, -- company Id d. code, -- encoding d. fullName, -- department name d. shortName, -- department d. nature, -- department Nature d. manager, -- owner d. phone, -- Phone d. fax, -- Fax d. enabled, -- valid d. sortCode, -- Sort? d. remark -- description 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 ());}}

"It's good. You have a strong learning ability. Xiaomei, you are like me !"
"Nima Ge, The GetList function has a ref JqGridParam jqgridparam parameter. I copied it. What is the use of this parameter ?"

"Xiaomei, you can see the final method FindTablePageBySql, which contains the word" Page ", which is obviously used for paging. Now, you can understand a lot of code. Don't just know how to call this type of public method, and you can skip F12 to see it. It is very helpful for you to learn how to develop it ."

"Well, I will teach you how to write the View-Layer Code. In fact, I also learned it from the official Demo. In the future, you may not simply watch Japanese movies, but also the European and American series. In the future, you will be able to understand English documents, which will help you improve your technology ."

 

@ {ViewBag. Title = "department management" ;}<! -- The framework must 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> <! -- Framework must end --> <! -- Jqgrid table component 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> <! -- Table component end --> <link href = "~ /Content/Scripts/tree/tree.css "rel =" stylesheet "/> <script src = "~ /Content/Scripts/tree. js "> </script> <script type =" text/javascript "> $ (document ). ready (function () {GetGrid ("") ;}); // load the table function GetGrid (CompanyId) {$ ("# gridTable "). jqGrid ({url: "/Department/GridListJson", datatype: "json", height: $ (window ). height ()-105, autowidth: true, colModel: [{label: 'Primary key', name: 'inclumentid', index: "inclumentid", hidden: true}, {label: 'code', name: 'code', index: "code", width: 80}, {label: 'authorization', name: 'fullname', index: "fullname ", width: 100 },{ label: 'abbreviation ', name: 'shortname', index: "shortname", width: 100 },{ label: 'properties', name: 'natural', index: "nature", width: 100, align: "center" },{ label: 'owner ', name: 'manager', index: "manager ", width: 80, align: "center" },{ label: 'tel', name: 'phone', index: "phone", width: 100, align: "center" },{ label: 'fax', name: 'fax', index: "fax", width: 100, align: "center" },{ label: 'Company ', name: 'companyname', index: "companyname", width: 120}, {label: 'payby', name: 'enabled', index: 'enabled', width: 45, align: 'center', formatter: function (cellvalue, options, rowObject) {if (cellvalue = '1 ') return " <div id = "layout" class = "layout"> <div class = "layoutPanel layout-center"> <div class = "btnbartitle"> <div> Department list <span id = "CenterTitle"> </span> </div> <table id = "gridTable"> </table> <div id = "gridPager"> </div>

"Nima Ge, you used to tell me how to use the AV Technology for frontend and backend interaction. Why didn't you see any trace of Ajax calls here ?"

"Xiaomei, you are stupid again. Do you still watch shy and shy movies in the office or in a company place like this? You must find a place to hide and secretly watch. Jqgrid is a plug-in, of course, it is encapsulated. You can see there is a URL parameter. I will point it to your controller to get the Json Action, so that Jqgrid can get the returned Json."

"Oh, they encapsulated things. The gridPager paging things must be encapsulated in the background. Otherwise, they won't be able to contact the list ."

"Yes, Xiaomei is very smart. This is an open-source product. If you have time to take a look at it, it will be helpful for you to use this plug-in the future. The source code is still stored on Baidu's online storage, go down on your own."

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

"Nima brother, how come the source code you gave me is a little different from the picture above. Why is the company tree on the left missing? No toolbar ."

"Xiaomei, I have told you, step by step. Let's take a look at it. You have finished the form and will teach you the rest next week ."