jquery easyui的應用-1

下載地址是: www.jeasyui.com/download 當前版本是1.6.7 是由 jquery ui 擴展而來的.

像jquery ui, bootstrap, jquery easyui三者都是相似的ui框架, 感受 easyui如其名同樣, 是最簡單最宜用的, 並且包含的 前端組件是最全面的. 當jquery ui和easyui的 tabs dialog等組件名稱有 衝突(相同時), 能夠

定製jQuery組件，只保留jQueryUI中的Tabs, Dialog. （其餘的如DatatimePicker等使用EasyUI重寫）；這樣咱們會獲得一個只有40K的jQueryUI文件. 而後 將精簡後的jQueryUI加載到EasyUI引用以後，這樣EasyUI的Tabs和Dialog就會被複寫。

easyui 比jquey ui 要"重一些", 因此 jquery ui適合前臺,easyui適合後臺,但我想何須添加2個庫呢,直接一個easyui不就好了,反正也不大多少.

如何選擇 bootstrap和 easyui?
bootstrap側重於css, 側重於前端, 樣式很美觀精美, 可是js/組件功能不是很全面充足, 而easyui則 側重於 後臺, 有不少強大的js, 因此作後臺通常用easyui.

---

所謂的web開發有不少ui框架, 可是就這樣定了, 前端用bootstrap的css, 後臺用 easyui的各類組件, 或用easyui的 bootstrap主題

• local和 locale的區別: 前者是一個形容詞, 標識"局部的, 當地的", 後者 是一個 名詞, ['l2u'k2l] 表示 "地點, 地方, 場所"等.
• 在 easyui的 語言包中是 : locale/ 文件夾.

====================================

• js中有兩個函數，之前很混淆， 其實仍是很簡單的：
  setTimeout是隻執行一次， 而setInterval是重複屢次週期性的執行回調函數。 兩個函數的時間都是以 毫秒爲單位， 好比 1000， 2000表示1秒， 2秒
  setInterval 會返回一個 定時器的句柄handle， 這個句柄就是 用來關閉定時器的， 用 clearInterval
  Interval是 inter + val （inter value） 間隔值的意思

• easyui有不少組件能夠方便的和後臺php之間進行數據交換, 獲取後臺的數據裝載到組件中, 主要是經過 "href或url"屬性來實現的. 並且是ajax方式, 還有loading效果, 這一點很重要也很方便, 雖然都寫得來,可是不必本身去寫, 能夠更專一於業務代碼的書寫.
  php中 , (包括全部的語言中), 都要善於使用 "等待/ 延時, 延遲"的語句, 並非 全部的代碼都必需要一開始就執行, 有的時候, 須要 "等一下" 再執行! 必定要有這樣的意識! php中用 sleep($second秒數)函數 來等待

• 因爲eu=easyui 在構造 組件的時候, 不須要本身去寫大量的 html, 因此 很是簡潔和方便(相比 bootstrap那樣要記憶大量的類名而言)

• 在eu, bs等框架中, 所謂的 "摺疊" 面板, 摺疊就是 面板上有一個 按鈕, 經過這個按鈕, 能夠顯示和隱藏 面板的 內容部分: 這個是經過 css的 屬性 : display: none 來實現的. (display的屬性不少, 有 block, inline等等, 也有none 這個屬性, 表示不顯示)

• div和p元素的自動增高? 和最小高度?
  div和p自己就是 自動增高的, 不須要設置.
  只是當div和p中 的內容不多的時候, 他的高度會塌陷, 你能夠設置固定的 尺寸, 也能夠設置一個 最小高度, 這樣 即便內容不多, 也能保證 不塌陷.
  最小高度 也是一個標準的css屬性: 瀏覽器都支持, 好比:div { min-height: 200px; }

=================================

json格式自己就是 用大括號括起來的 鍵值對 的字符串， 一個 json至少 必須是 用 { }括起來的， 或者是 多個 { }組成的數組， 因此， 對json 變量是能夠用 （js中 的 + 號運算） 和 php中的 點號 鏈接運算。

好比： $json = ''; while(...) {... ; $json .= $row; } echo $json;

• 打印數組的效果，因爲瀏覽器 會 忽略源代碼中的 回車鍵enter， 使得數組的輸出擠在同一行， 這時能夠配合 「查看頁面源代碼 」 來查看， 在源代碼中就會顯示得 比較 "可讀". 更加清晰。
  好比 print_r($json 數組） -> "查看頁面源代碼"

• 在大多數框架中，當元素支持ajax 後臺數據獲取和交換的時候， 使用 url和 href屬性的時候， 是從後臺獲取數據的。 爲了可以看到、模擬出 在實際遠程、慢速http網絡中的 等待載入loading... 的效果，一般能夠在後臺php文件中， 用 sleep（waitSecond）; 來寫。 要靈活的， 善於使用 sleep函數 。

• php的後臺 文件 、不是函數， 用來向 前臺頁面提供 ajax返回數據的時候， 不是用的 return語句（return語句是 函數返回時用的）， 而是用的 echo語句輸出： 非輸出語句 對前臺是沒有影響的， 只有echo語句的結果纔有效

• 字符串截取函數再也不疑惑： 在php中 用substr(start, len)，索引從0開始； 在mysql中 用substring ， 索引 從1 開始； 而在JavaScript中 用substr和substring 兩個函數， 前者是 substr（start, len）,後者是 substring(start, end);

  重要的是， php中 若是要表示 "只取字符前面多少個字符= =去掉字符串最後面幾個字符" 此時使用 substr($json, 0, len),可是也可使用 substr($json, 0, -1/- 去掉最後的結尾字符的個數， 好比 -2， -3等等) 去掉字符串最後的一個字符 會更簡潔。 比 substr($json, 0 , $len-1) 更簡潔並且沒必要知道字符串的長度了。

• 一般 什麼叫異步的？ 就是 回調函數 就是 異步的！

======================================

一般狀況下， eu中的組件 ， 「方法」調用的方式是 $ ('#節點'). 組件名('方法名', [參數]) 可是 消息框組件messager 比較特殊， 他的方法調用不依賴於dom中的節點， 直接用 $ 來調用。 並且方法調用 是普通的 函數名加 參數的方式，好比： 警告框的調用是： $. messager. alert('標題名', '警告內容', '圖標的名稱error, warning, info, question' , function(){..回調函數 } 其餘消息框的 回調函數， 有一個 r 參數， r表示的是 response 迴應， 即你按的是 哪一個 「ok」 仍是 「cancel」 按鈕， 因此 有 if(r) {...}

分頁的原理是：頁面的pagination 其實是一個 div， 顯示的內容 你是能夠自定義的。 根據 預先設置的pageSize， pageList 和 當前你選定的頁面序號 pageNumber, 來決定當前頁要顯示的內容。 關鍵是每頁顯示的內容 是從後臺url.php頁面ajax過來的， url.php要傳遞回來的數據包括兩個， 一個是 記錄的總條數totals， 這樣來決定分多少頁； 另外一個是rows： [{...}, {....}, {...}] 的json數組，來決定每一次返回的是哪些不一樣的記錄數據。 所以， 在url.php中， 就是根據從前端傳遞過去的這些 pageSize， pageList 和 當前你選定的頁面序號 pageNumber 參數， (這些參數 默認的是 經過 post方法 傳遞到後臺的), 你能夠在 firebug中 看到 前臺頁面傳遞到 後臺的 參數, 你就 在 url.php的後臺頁面中 去 $_POST['參數'] 獲取到這些參數, 而後 使用 thinkphp的 find 方法, select方法等去 limit () 鏈式操做去 獲取數據庫中的 記錄 ,而後 把這些記錄 賦值給 rows 變量. 那麼這個 rows就會 返回到 前臺頁面顯示出來了.

關於 easyui的一些知識點

1. eu中的組件 在 進行一些操做(主要 是 顯示/隱藏 操做) 後, 可能會形成 位置的 錯位, 爲了恢復到 原來的位置 狀態, 能夠調用 它的 resize 方法, 好比 : $('acc').accordion('resize');

2. eu中的通用的思想, 能夠設置通用的 "默認設置 / 屬性" : $.fn.resizable.disabled = true;
   通用的默認方法有: disable, enable, options , 注意這個是沒有 ed的
   通用的事件有: onStart, onStop等...
   屬性 是 disabled , 帶ed的, 表示 狀態, 方法是 動詞, 好比 enable, 是 表示 去作什麼, 而事件 是表示 當 什麼的時候 去作什麼 動做, 因此 也是 : on + 動詞, 好比: onSelect等
   eu的方法, 都是 在 對應 的 組件名稱 後 ( '方法名', [參數]), 好比: $('prog'). progressbar('setValue', 60);

3. eu中的 寬度和 高度等 表示 數值的 , 使用的格式 都是 純數字的, 不須要在後面 加px了, 好比: width: 500

4. eu中的組件,比 bs的使用方法 要 簡單 得多, 基本上 你不須要 去記憶那麼多複雜的 class, 你只須要寫html結構就行了, 並且 絕大多數 都是使用的 div 結構, 只有 少數的幾個 組件使用 是 a 標籤 好比 linkbutton 組件等.
   注意, accordion 組件的 單詞寫法, 兩個 字母 都是 o, 最後一個不是 字母a.

• 注意 pagination 組件的傳參， 是在firebug中查看 究竟是傳了哪一個 參數、什麼參數， 這樣纔好在url.php服務器端獲取這個參數

panel和window等組件, 從外形上來講, 都差很少, 都有標題欄和客戶區, 主要仍是一個 語義上的差異: 它們 默認 提供的方法和事件 不一樣. 你也能夠把 panel經過定義 一些自定義的屬性,改形成 window, 可是這樣作就不合適.
若是你從 語義上 來講, 就是須要的 一個 window, 那麼你就是用window 組件, 而不要是用 panel, 若是你並不須要 窗口的事件和方法, 那麼你就只使用 panel就行了.

panel組件是不少組件的基礎, 都依賴於它, 如tabs, accordion(分類組件), 這些組件其實是 多個panel 的組合.
所以, 這些組件就會有兩種屬性和方法, 一個是 組件自身的 獨有的方法和屬性; 另外一個是從 panel繼承來的屬性.

• ajax從後臺獲取的交換數據文件, 能夠是任意的文件,不必定 必須是 php文件, 任何的 txt, html, asp,jsp文件都是能夠的, 只要是有 "輸出" 內容的 均可以!

• tabs組件 在eu中是 很簡單的,其索引是從 0 開始, 並且 並非必需要有一個選項卡被選中的, 能夠都不被選中的.

關於 onbefore和 onAfter事件?

凡是onBefore... 的均可以在 事件的函數 代碼中, 根據不一樣的 狀況返回 false, 那麼對應的 ... 事件 將不會被執行;而 on... 的事件 一般是 指 相應的事件/動做 完成以後 執行的, 而不是指 事件正在執行的同時 去執行 on...函數體, 由於js 不可能 在 事件正在執行的時候, 去執行js代碼，因此onload是指所有的 document文檔都被加載完成後， 纔去執行的代碼，而不多是 一邊加載文檔dom ， 一邊去執行js代碼的。 跟 onAfter...做用是同樣的， 而一般不少組件都沒有提供 onAfter...事件

• 全部的瀏覽器頁面內容， 都是window對象， window對象是一個最大的 基類對象。window對象 有不少屬性和方法，好比history, 好比 location， 好比document等， 並且，這些屬性 自己也是一個對象，自己也有一些屬性和方法， 好比 location.href ， 好比document.click(function(){...}); 因此 要注意 區分 window和 document的 關係， 不要把它們搞混了。
  一般 在 調用 window的方法 和屬性時， 能夠省略這個 window對象。 好比：window.alert(...) 就寫 alert（....)

=========================================

區別 方法和 方法選項?

onStartDrag等事件, 是做爲 { 屬性中的選項} 來使用的, 放在 初始化方法 Draggable裏面的,
而方法 好比 Disable等 則是 放在 初始化 方法 外面的, 跟初始化 方法 是 並立 平齊的.

• 要修改 kindeditor的 背景, 須要在css文件中的 項目 : .ke-container 和 .ke-edit-textarea 中 進行修改

• 如何設置 kindeditor 的 文本框區域 自動 隨內容 增高?

在create方法的選項中: 

    afterCreate: function(){
        this.loadPlugin('autoheight');
},

myeditor. edit.setHeight(500);    ///////  注意:  kindeditor 的 myeditor是 整個editor組件對象, 其中的 可編輯區 是myeditor的一個屬性:  edit, 它也是一個對象, 有相關的方法...


或者:

editor.edit.setHeight("600");
var autoheight = editor .edit.doc.body. scrollHeight;
editor.edit.setHeight(autoheight);

php的類的const?

const 常量 是屬於 類, 而不是屬於 某個具體的對象的, 因此 要用 類名 來引用 好比: const INSERT_MODE=1; 引用時 className::INSERT_MODE
一般使用的場合是: 若是隻是在類的內部, 要定義幾種並列的情形, 有幾種選擇, 想用數字來區分, 可是爲了便於 記憶和 表義, 就可使用 類的 常量來作.

若是要在 全局都使用 的常量, 就使用 全局 常量, 使用 define來定義

• tp的命名範圍: 定義一個變量 $_scope 注意不是 命名空間, 實際的目的, 是將前面 的多個連貫操做換了一個方式, 將多個連貫操做封裝 /集合到一塊兒了的意思.

• 對tp 的查詢結果 也能夠 強制 使用索引, 即便用 index連貫操做. 方法是: $user->index('user') -> select(); 要注意 這個索引 字段 必須是 實實在在的/ 已經在 數據庫的數據表上 建立了 對應的 字段 'user' 的 索引了.

token是表單提交時 用來 防止 重複 /屢次 提交表單的 連貫 操做, 通常 放在 create方法以前：　$user->token(false/true是否採用 令牌隨機數驗證) -> create();

token的原理?
token就是 令牌, 實際上就是 session 中的一個隨機數, 隨機id.其最大特色是隨機性, 不可預測, 通常黑客或軟件沒法猜想出來.
token主要用於兩個地方: 放在表單 重複提交; 防止 anti csrf攻擊(cross server/site request fault 跨站點請求僞造)
二者在原理上都是經過 session token 來實現的, 當客戶端請求頁面時, 服務器會生成一個隨機數token, 而且將token放到服務器上session當中, 而後將token放在發給用戶的數據文件中,( 通常是用 hidden隱藏表單的方式), 下次客戶端提交請求時, toke 會隨表單一塊兒提交到服務器.

• 當用於 anti-csrf攻擊, 服務器端會對 token值進行驗證, 判斷請求中 的token和 服務器上保持的 token值是否相等...

• 若是用於 防止表單重複提交, 則在服務器端第一次驗證相同事後, 會將 session中的token值更新一次, 因此 當用戶重複提交時, 後面的驗證就會失敗, 由於用戶提交的表單中的token沒變, 但服務器端session中的token已經改變了.

• strict連貫操做 "是否嚴格檢查", 是 tp的3.2.3 新增的, 主要是 用於 設置 在 新增/更新(add操做和 save)記錄時, 判斷 數據源中的字段 是否 跟數據表中的 字段 (個數和類型 )是否 徹底一致, 若是 不一致, 在strict(false)時, 會忽略 數據表中沒有 而數據源中 有的字段, 若是strict(true)時, 則會 拋出異常.
  $user -> strict(true) -> add($data);

做爲tp框架, 的開發者,確定是要完善和提供 各類各樣的 features和 functionalities, 可是做爲 使用者, 實際上是沒有必要 把它的各個方面 完徹底全的掌握的, 只要掌握 最主要的//大約 60% 的東西 和 內容 就能夠了, 如同咱們在使用 office等任何其餘軟件同樣.

====================================

從多個表中取得數據, 能夠有三種方法/方式, 牽涉到 三個方面的東西: 聯合操做join查詢; 視圖模型; 關聯/關係(relation)模型. 三個方面究竟哪一個更好更科學呢?

tp的數據庫操做

1. delete方法返回值, 是成功刪除的記錄數; 若是返回值是false, 表示sql查詢語句出錯; 若是返回0 表示沒有刪除任何數據(即: 沒有符號條件的記錄)
2. 對數據庫的全部操做, 都應該限制條件或 個數?? 一般 用 order和limit 來限制.

關聯模型
關聯模型中 有兩個表, 當前模型類所對應的表, 或者說,mysql當前正在操做的/執行的表, 叫 主表, 參照表, 那麼另外一個表(被關聯的/被躺槍的表)叫 關聯表.
關聯表的關聯 一般用 mapping 來表示

• 只有當前 操做的表 即 參照表 所對應的 模型類 才須要建立, 其餘 被關聯表 的模型都不須要建立, 會自動定位到對應的關聯表.
• 即便定義了關聯模型類, 也能夠只是對當前表 (就它一個表) 進行curd操做, 只要你不寫 relation 連貫操做方法.
• relation(的參數, true表示獲取全部被關聯的數據, 也能夠只獲取某一個關聯模型的數據), 也能夠先獲取 參照表 數據, 而後用 relationGet去獲取關聯數據
• 關聯操做, 只是在普通操做(單表操做)的基礎上 加一個relation()的連貫操做而已, 主體操做仍是 find, select, add, save等

==================================================

惟一數據記錄查詢?

查詢惟一數據的時候, 是 使用distinct 關鍵字, 這個distinct至關於一個 形容詞, 修飾語, 用來 修飾 要查詢的字段 , 是 惟一的, 不能重複. 若是 使用 "distinct * " 而又有 id 主鍵的話, 將不能 過濾惟一性字段的值 , 由於有主鍵id自己就是 惟一的了.

要注意的是, distinct 是 根據 distinct 後面全部字段 合起來時 的數據 一塊兒 來判斷 是不是相同的. 而不是 緊挨着 distinct關鍵字的那個字段. 好比: distinct name, 則只會看name字段 是否相同的惟一性, 若是 是 distinct name, age 則會 判斷 只有當 name和age兩個 字段的 值 都相同時 , 才認爲是 相同記錄, 被 過濾掉, 若是 只是 name相同, 而age不一樣, 則認爲是兩條 不一樣的記錄, 不會被 distinct 所過濾.

避免在最高層使用 distinct 應該是一條基本規則 。緣由在於，即便咱們遺漏了鏈接的某個條件， distinct 也會使查詢 " 看似正確 " 地執行 —— 無能否認，發現重複數據容易，發現數據不許確很難，因此避免在最高層使用 distinct 應該是一條基本規則。 發現結果不正確更難.....

mysql> select * from user;
+----+----------+------+
| id | name     | age  |
+----+----------+------+
|  1 | zhangsan |   20 |
|  2 | lisi     |   30 |
|  3 | jack     |   20 |
|  4 | mike     |   20 |
|  5 | jack     |   10 |
|  6 | ???      |   10 |
|  7 | jack     |   10 |
+----+----------+------+
7 rows in set (0.00 sec)

mysql> select distinct name, age from user;
+----------+------+
| name     | age  |
+----------+------+
| zhangsan |   20 |
| lisi     |   30 |
| jack     |   20 |      //  這裏的 兩個 jack age 會認爲是不一樣的記錄
| mike     |   20 |
| jack     |   10 |
| ???      |   10 |
+----------+------+
6 rows in set (0.00 sec)

mysql> select distinct name from user;
+----------+
| name     |
+----------+
| zhangsan |
| lisi     |
| jack     |    // 這裏的兩個 jack 被 distinct所過濾
| mike     |
| ???      |
+----------+
5 rows in set (0.00 sec)

mysql>