Introduction to basic operations such as adding, modifying, deleting, and querying Jquery EasyUI

I first met Jquery EasyUI and saw some projects developed by bloggers. The page is very cool, the function is very powerful, and the effect is quite good. Recently, I have been wanting to learn a set of front-end controls systematically, so I found some references on the Internet. Example. I wrote some basic addition, deletion, modification and search functions, which is a basic introduction to this control. There will be time to continue learning in depth later.

Before learning jquery easyui, you should first download the latest version from the official website http://www.jeasyui.com/download/index.php

Let’s take a look at the page after running it

1. List display

2. New page

3. Modify the page

After downloading jquery easyui, generally quote several files on the next page

Copy code The code is as follows:

  type="text/css" />
//Page icon style
 
//jquery easyui main js

The first is the list display data

Copy code The code is as follows:

url="http://www.cnblogs.com/GetJson/CreateJson.aspx" toolbar="#toolbar" pagination= "true" rownumbers = "true" "50">
                                                             Card name
                                               >                                                                                                                        ateTime" width="50">
                                                          Time
                                                                                                                                 lt;/th>
                                                          >

jquery easyui uses datagrid to display data, so the class must select easyui-datagrid; the url is a json format data source for this list. The "#toobar" followed by toobar is a toolbar of the list. This example Displayed on the list are add, modify, and delete function buttons to operate the data. Whether pagination displays paging, and rownumbers displays the number of rows. When paging, two parameters are passed to the background, one is the current page number and the other is the number of rows displayed on each page; fitcolumns: adaptive column width; singleselected: radio selection.
Toolbar code

Copy code The code is as follows:

Data source format

Add pop-up box to data source

Copy code The code is as follows:

closed="true" buttons="#dlg-buttons">

信息编辑

               编号

               卡号

               密码

               创建时间

               创建人

        保存
                    iconcls="icon-cancel">取消

注：class为弹出框类型；closed:当前显示状态为隐藏；buttons:弹出框的功能按钮；

对弹出的添加页面添加样式

复制代码代码如下:

Introduction to basic operations such as adding, modifying, deleting, and querying Jquery EasyUI_jquery