首頁 >web前端 >js教程 >Jquery EasyUI的添加,修改,刪除,查詢等基本操作介紹_jquery

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

WBOY
WBOY原創
2016-05-16 17:20:171270瀏覽

初識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實作資料的新增修改刪除



複製程式碼

程式碼如下:


   


陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn