Jquery EasyUI的添加，修改，刪除，查詢等基本操作介紹_jquery

初識Jquery EasyUI看了一些博主用其開發出來的項目，頁面很炫，感覺功能挺強大，效果也挺不錯，最近一直想系統學習一套前台控件，於是在網上找了一些參考範例。寫了一些基本的增刪改查功能，算是對此控制的基本入門。後續有時間繼續深入學習。

學習jquery easyui前應先到官網下載最新版本http://www.jeasyui.com/download/index.php

先看一下運行後的頁面

1、列表展示

2、新增頁

3、修改頁

把jquery easyui下載好之後，一般引用下頁幾個檔案

複製碼 代碼如下:

            type="text/css" />
//頁面圖示樣式
   
   
//jquery easyui主要的js
   

首先是清單展示資料

複製程式碼 程式碼如下:

        url="http://www.cnblogs.com/GetJson/CreateJson.aspx" toolbar="#oolcnblogblogs.com/GetJson/CreateJson.aspx" toolbar="#oolcnblogs." true" rownumbers="true"
        fitcolumns="true" singleselect="true">
       
                    編號
            th field="AccountName" width="50">
                   已卡名
          
   

密碼		創建者

jquery easyui是用datagrid對資料進行展示的，所以class要選擇easyui-datagrid；url是本列表的一個json格式的資料來源toobar後面跟著的"#toobar"是列表的一個工具欄，本範例在清單上顯示的是添加，修改，刪除功能按鈕對資料進行操作。 pagination是否顯示分頁，rownumbers顯示行數，分頁時向後台傳去兩個參數，一個就是當前頁數另一個就是每頁顯示行數；fitcolumns：自適應列寬；singleselected:單選。
工具條代碼

複製碼 代碼如下:

a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-add" onclick="newuser()"

            plain="true">新增                void(0)" class="easyui-linkbutton"

                   iconcls="
資料來源格式

資料來源新增彈出框

複製程式碼

程式碼如下:

  pad -按鈕">
      

;
           資訊編輯
         

;
           ;
                   
      

;
      

;
         🎜>          
      

;
      

;
       密碼
          
      

;
       ;
          
   
           ;
              創建者;       

;
      
      
   /div>;

?

        存檔;
                    iconcls="icon -cancel">取消
   

;



註：class為彈出框類型；close:目前顯示狀態為隱藏狀態；buttons:彈出框的功能按鈕；

為彈出的新增頁面新增樣式

複製程式碼

程式碼如下：

?



 js實作資料的新增修改刪除

複製程式碼

程式碼如下: