If you use xjplugin to compile a web-based application system

Previously, some jquery-based js plug-ins were released to help you easily and quickly set up the client UI. The initial goal was to provide a UI solution to remove the server-side controls, previously, I separately wrote a brief implementation method and call description of each control, and provided a demo to demonstrate the use of the control, you can get the latest code through the svn OF THE http://code.google.com/p/xjplugin, in fact, all the latest js Code can also be obtained in the xEasyApp demo I am about to release.

As mentioned above, xEasyApp is just a demo. The purpose is to use xjplugin and ASP. net mvc is used to build a web-based application system. This demo implements a complete permission management module. I think it is also a necessary module of the application system, because first, it is quite common and basically all application systems are needed, so you can start working on the basis of this demo when starting encoding. The second module is simple and not simple. It is not complicated to say it is complicated. The interfaces contained in the module basically cover several commonly used lists and forms. I hope the problem can be explained.

Haha, This logon page is the last one for any system, but it is very interesting for me to introduce it first. I hope someone can understand it.

 

After successful login, go to the main interface of the page. This is a system that looks like a single page. In essence, it is not a single page. In the middle, it is actually using iframe to load their respective pages. The page style is similar to EXTJS, if you have good artists and js basics, you can replace them with image css skills, but I think it's quite easy to understand. Let's take a look at the interface.

We can see that the main interface uses two previously mentioned controls: tree (to create a jQuery-based high-performance TreeView) and tabpanel (to create a TabPanel Based on jQuery). I have left the homepage blank, in the actual system, you can enrich the homepage.

 

Click the user management menu on the left to add a tab in the main area on the right and automatically load the user management interface. The main interface is divided into two columns: The Department List on the left and the user list on the right. In this structure, basically all the forms of the master-slave table structure can be supported. The list on the right uses flexigrid. while writing this demo, I also made some modifications to flexigrid, such as adding the row number function and adding the column information to the server. In order to better work with the backend, to avoid the embarrassing problem that the backend fields must be in the same order as the front-end fields. At the same time, I added operation columns and gave up the original right-click menu (simple right-click menu.

 

Click the edit button to bring up the edit window (in fact, it is the modal window imitated by div). The control is jquery. ifrmdailog (this control has not been introduced before, but it has been used in xgcalendar. Many people have asked me about the code. If I have time, I will introduce the use of this control separately)

Click "move" to change the user's organization. A Selection box is displayed in the window (I used to use the Modal Dialog Box). The control is still jquery. ifrmdailog (note that there is no border here). There are many such applications in this demo, and there are more complicated ones such as multiple selections. As shown in

Is the selection interface for adding personnel to the role.

Client-side verification in the form is very practical and cannot be absent. The control used here is the famous jQuery Validation (which is not what I wrote). Of course, the cool prompt message is my masterpiece, haha ..

The last commonly used interface layout is the query page. For details about the query page, refer to the operation log query page.

 

 

The query conditions can be divided into one row and multiple rows. The log list or flexigrid is adjusted according to the actual condition tree.

Originally, I added a time/minute/second selection function for datepicker (create a date Selection Control Based on jQuery), haha, but there is no place to apply it. (I suddenly thought that the above page can be added .. )

The entire code can get the http://code.google.com/p/xeasyapp/downloads/list from here, then I will through a few blog posts, more detailed introduction of each control in actual use and server interaction, in addition, we will introduce the shortcuts I provided in the demo. I think it is a very good programming method and experience. You are also welcome to give your own comments and suggestions on this demo, as well as the voice of criticism. If the response is good, I will introduce how to better use xjplugin webform.

 

Your support is my motivation to continue writing!

 

Address: http://www.cnblogs.com/xuanye/archive/2011/06/27/xEasyApp_ByXjplugin.html

Reprinted and retained

Also make an advertisement oh, my microblog (http://weibo.com/redhu) Welcome everybody to watch.