jQuery EasyUI是一組基於jQuery的UI插件集合體，而jQuery EasyUI的目標就是幫助web開發
者更輕鬆的打造出功能豐富並且美觀的UI界面。開發者不需要編寫複雜的javascript，也不需要對css
樣式有深入的瞭解，開發者需要了解的只有一些簡單的html標籤。
1.接觸 EasyUI 兩天了,對它的方法調用一直是不太理解,比如:
$('#tt').tabs('add',
{
title: 'new tab',
selected: false
//...
});
這是一個選項卡調用它的add方法,乍一看跟java的對象掉方法的思想差別很大,今天再來看,發現
其實就是對象調方法,分析如下:
1. $('#tt')這個是對象,
2. 'add'這個是方法,
3. .tabs這個又算是什麼呢?
是這樣的,對象還是那個對象,方法還是那個方法,只是在 EasyUI 中它不像java那樣對象和方法
之間的聯繫緊密性那麼高,而在 EasyUI 中一個對象調方法,由於對象和方法的聯繫不夠緊密,導致
一個對象調方法時,不能準確知道是調用的那個類的方法,所以就需要指明是哪個類的方法,所以
.tabs 就是指明瞭後邊調的方法是 tabs(選項卡)的方法,這樣就解釋清楚了 EasyUI 調方法的原理;
2. EasyUI 中的依賴--- "繼承";
跟java中的繼承對應,EasyUI中提供類的依賴 當A類依賴B類時,A的對象就具有了B類中的方法,這也就
便於功能的擴展;
3. 理解了1. 就明白了對象調方法,
理解了2. 就明白了對象調依賴 父類的方法; 這樣在需要一些功能在本類中找不到時,可以嘗試從父類中找;
4.功能更強大的樹形插件 zTree(不屬於easyUI)
1. 將json數據解析成樹形結構:(兩種json)
1.標準json數據
標準的 JSON 數據需要嵌套表示節點的父子包含關係
例如：
var nodes = [
{name: "父節點1", children: [
{name: "子節點1"},
{name: "子節點2"}
]}
];
默認展開的節點，請設置 treeNode.open 屬性
無子節點的父節點，請設置 treeNode.isParent 屬性
其他屬性說明請參考 API 文檔中 "treeNode 節點數據詳解
2.簡單json數據
簡單模式的 JSON 數據需要使用 id / pId 表示節點的父子包含關係，如使用其他屬性設置父子關聯關
系請參考 setting.data.simple 內各項說明
例如：
var nodes = [
{id:1, pId:0, name: "父節點1"},
{id:11, pId:1, name: "子節點1"},
{id:12, pId:1, name: "子節點2"}
];
5. 使用zTree生成樹形結構的步驟:
1. 在html的<body>中給樹形結構找一個放置位置: 提供一個<ul>標籤
<ul id="tree" class="ztree" style="width:260px; overflow:auto;"></ul>
2. 在js代碼中:
1. setting 配置示例:
var setting = {
view: {
dblClickExpand: false,
showLine: true,
selectedMulti: false
},
data: {
simpleData: {
enable:true, //啓用簡單數據格式;
idKey: "id",
pIdKey: "pId",
rootPId: ""
}
},
callback: { //回掉函數 ,相當於給每一個節點綁定監聽
beforeClick: function(treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("tree");
if (treeNode.isParent) {
zTree.expandNode(treeNode);
return false;
} else {
demoIframe.attr("src",treeNode.file + ".html");
return true;
}
}
}
};
2. zNodes 節點配置示例:
var zNodes =[
{id:1, pId:0, name:"[core] 基本功能 演示", open:true},
{id:101, pId:1, name:"最簡單的樹 -- 標準 JSON 數據", file:"core/standardData"},
{id:102, pId:1, name:"最簡單的樹 -- 簡單 JSON 數據", file:"core/simpleData"},
{id:103, pId:1, name:"不顯示 連接線", file:"core/noline"},
{id:104, pId:1, name:"不顯示 節點 圖標", file:"core/noicon"},
{id:105, pId:1, name:"自定義圖標 -- icon 屬性", file:"core/custom_icon"},
{id:106, pId:1, name:"自定義圖標 -- iconSkin 屬性", file:"core/custom_iconSkin"},
{id:107, pId:1, name:"自定義字體", file:"core/custom_font"},
{id:115, pId:1, name:"超鏈接演示", file:"core/url"},];
3. 生成樹形結構:
var t = $("#tree");
t = $.fn.zTree.init(t, setting, zNodes);
1.form插件中 combox的知識點,url:數據獲取; valueField:數據接收;textField:顯示的值;
<input id="cc" name="dept" value="aa">
$('#cc').combobox({
url:'combobox_data.json',
valueField:'id',
textField:'text'
});
2. form的load方法:
加載記錄填表。數據參數可以是一個字符串或一個對象類型,當字符串作爲一個遠程URL,否則作爲一個當地的記錄。
代碼示例:
$('#ff').form('load','get_data.php'); // load from URL $('#ff').form('load',{
name:'name2',
email:'[email protected]',
subject:'subject2',
message:'message2',
language:5
});
2. datagrid中的load方法的使用;
加載和顯示第一頁行。如果指定的param”,它將取代與queryParams 的屬性。通常一個查詢通過一些參數,這種方法可以調用從服務器加載新數據。
$('#dg').datagrid('load',{
code: '01',
name: 'name01'
});
3.root.get("屬性名") 獲得的是屬性的路徑path ,這個path是什麼?
4. QBC查詢出現的價值:
查詢語句的生成 用編碼的方式來生成,這樣帶來了一個好處就是最終生成的Sql語句動態化;
簡單一句化就是 編碼本身的動態化這個特性用到SQL語句的生成,使一些動態查詢得到了實現,
不然你要動態查詢,單純用sql語句來實現動態查詢,或者從邏輯上難於實現,或者代碼量很龐雜;
5.fastjson 中的屬性過濾標籤:
/*
* 第一種：在對象響應字段前加註解，這樣生成的json也不包含該字段。
* @JSONField(serialize=false)
* private String name;
*/
/*
* 第二種：在對象對應字段前面加transient，表示該字段不用序列化，即在生成json的時候就不會包含該字段了。
* private transient String name;
*/
/*
* 第三種：使用fastjson的攔截器
* PropertyFilter profilter = new PropertyFilter(){
@Override
public boolean apply(Object object, String name, Object value) {
if(name.equalsIgnoreCase("last")){
//false表示last字段將被排除在外
return false;
}
return true;
}
};
json = JSON.toJSONString(user, profilter);
System.out.println(json);
*/
/*
* 第四種，直接填寫屬性
* SimplePropertyPreFilter filter = new SimplePropertyPreFilter(TTown.class, "id","townname");
response.getWriter().write(JSONObject.toJSONString(townList,filter));
*/
6. ocupload one click upload (一鍵上傳)