衆所周知，jQuery Easyui 的tabs插件有兩種方式加載某個tab(標籤頁)上的內容：“href遠程請求”和“content本地內容”，本文就兩種方式的優缺點進行簡單分析和思考。
- 被加載的頁面只有body元素內部的內容纔會被加載，也就是jQuery的ajax請求的只是html片段。
- 加載遠程url時有遮罩效果，也就是“等待中……”效果，用戶體驗較好。
- 當加載的頁面佈局較爲複雜，或者有較多的js腳本需要運行的時候，編碼往往就需要謹慎了，容易出問題，後面會詳細談。
- 比較靈活，你可以在腳本里面拼寫html代碼，然後賦值給tab的content屬性，不過這種寫法會使得代碼易讀性變差。
- 可以把iframe賦給content，把一個iframe嵌入也就沒有什麼不能完成的了。
- 使用iframe會造成客戶端js重複加載，浪費資源，比如說你主頁面要引用easyui的庫，你的iframe也要引用，浪費就產生了。
根據上面的分析，使用content的方式較爲簡潔，而且可以引入iframe來搞定一切，缺點也很明顯，系統較爲複雜的話，將帶來極大地資源浪費，只適合較爲簡單的頁面系統；
而href方式則對編碼能力要求的稍微高一些，因爲html的片段，稍微不注意就會處理不好，不過熟練的話，個人覺得href方式是不二之選。
href常見問題： 1.href只加載目標URL的html片段這個特性是由jQuery封裝的ajax請求處理機制所決定的，所以目標URL頁面裏不需要有html,head,body等標籤，即使有這些元素，也會被忽略，所以放在head標籤裏面的任何腳本也不會被引入或者執行。
2.短暫的頁面混亂：href鏈接的頁面比較複雜的時候，easyui對其渲染往往需要一個較長的過程，這時候，加載進來的html片段毫無佈局可以，過一會自動會好，這時候easyui已經完成對它的渲染。如何避免這個混亂的過程呢，還得靠easyui的一個基礎插件——解析器(Parser)。
Parser有個onComplete事件，這個事件就是指easyui對頁面完成渲染時觸發，這樣思路就很清晰了：用一個div遮罩住讓被加載進來的html片段，在onComplete事件中，讓這個div淡出，這時候渲染好的html片段就能美人出浴了，同時還整了個等待中的效果，一舉兩得。這樣要做兩件事：
第一是在要加載的html片段中放一個遮罩用的div：
<div id="loading" style="position: absolute; z-index: 1000; top: 0px; left: 0px; width: 100%; height: 100%; background: #DDDDDB; text-align: center; padding-top: 20%;"></div>
第二是在被加載的html片段尾部處理相關事件：
function show(){
$("#loading").fadeOut("normal", function(){
$(this).remove();
});
}
var delayTime;
$.parser.onComplete = function(){
if(delayTime)
clearTimeout(delayTime);
delayTime = setTimeout(show,500);
}
需要注意的是，如果多個tab頁面都使用了onComplete事件，當前定義的會覆蓋之前定義的。其實每次easyui渲染完成均會調用onComplete事件，所以每打開一個包含easyui控件的tab頁，onComplete事件就會被調用。
3.html片段的easyui組件相關腳本莫名地報錯：其實這個現象是跟第一個現象的原因一樣的，easyui完成對html片段渲染需要一定的時間，頁面越複雜，耗時越長，這時候難以避免html存在的腳本存在對easyui某些插件的調用，比如datagrid等，這個時候就會報錯，解決方案同上，將這些腳本放到onComplete事件裏處理，也就保證了渲染完成前，不會被執行。
4.放在window裏面表單驗證的提示信息會亂串：這個現象應該是插件自身的bug，對位置的計算沒有考慮到這些特殊的事情，解決方式可以投機取巧，在打開window後，讓表單不符合驗證的input獲得焦點就可以了。
5.兩次或者多次加載遠程數據問題：官方已經說明在1.2.5的版本中已經修正了這個Bug，但是還是有不少人反應會出現兩次加載遠程數據的現象，甚至在1.2.6版本中也會遇到，如果您確實遇到這種情況了，則可能有以下情況造成的：
5.1,自己的代碼不嚴謹造成的，這是比較低級的錯誤，如果遇到請按照以下兩個步驟檢查原因：
- 遠程數據返回的數據中是否包含class="easyui-tabs"或者class="easyui-datagrid"這樣的樣式了， 如果有的話，easyui在獲取html片段後會自動渲染，這時候已經對遠程數據源做了一次請求；
- 您是否又用javascript去$('#tabsId').tabs({...});或者$('#tabsId').datagrid({...});去綁定事件或者設置屬性，其實等於又一次渲染了該應控件，會再次請求遠程數據。
爲什麼會這樣，看看源碼便知道了：
$.fn.tabs = function(options, param){
if (typeof options == 'string') {
//這個地方的分支很清楚，只有當options爲字符串的時候，纔是直接調用控件本身提供的方法。
return $.fn.tabs.methods[options](this, param);
}
//如果options不是字符串，直接構造控件，進行渲染。
options = options || {};
return this.each(function(){
var state = $.data(this, 'tabs');
var opts;
if (state) {
opts = $.extend(state.options, options);
state.options = opts;
}
else {
$.data(this, 'tabs', {
options: $.extend({}, $.fn.tabs.defaults, $.fn.tabs.parseOptions(this), options),
tabs: wrapTabs(this),
selectHis: []
});
}
buildButton(this);
setProperties(this);
setSize(this);
initSelectTab(this);
});
};
所以請大家寫代碼的時候還是要注意點，有現成的控件方法就用該方法，直接傳入對象的話，所有控件都會重新構造的，tabs多次加載的問題大多數就是這麼發生的。
5.2,事件冒泡引起的二次加載也是有可能的，詳細情況請參照：
http://www.easyui.info/archives/501.html
【轉載】EasyUI 驗證框使用方法
missingMessage：未填寫時右邊顯示的信息
validType：驗證類型
invalidMessage：無效的數據類型時顯示的信息
required="true" 必填項
class="easyui-validatebox" 文本驗證
class="easyui-numberbox" 數字驗證
1.調用數據驗證方法
return $("#form1").form('validate');
示例：
<asp:Button ID="btn_Save" runat="server" Text="保存" OnClick ="btn_Save_Click" OnClientClick="return $("#form1").form('validate');" />
2.驗證是否必填
class="easyui-validatebox" missingMessage="xxx必須填寫"
3.驗證字符串長度
class="easyui-validatebox" missingMessage="xxx必須填寫少於10個字符" validType="length[0,2]" invalidMessage="不能超過2個字符！"
示例：
<input class="easyui-validatebox" required="true" missingMessage="姓名必須填寫" size="10" type="text" name="realName"></input>
3、驗證數字必須是5.5-20之間 precision="2"表示是2爲小數
class="easyui-numberbox" min="5.5" max="20" precision="2" required="true" missingMessage="必須填寫5.5~10之間的數字"
4、驗證必須是日期yyyy-MM-dd（只能選擇不可編輯）
<script>
$.fn.datebox.defaults.formatter = function (date) {
var y = date.getFullYear();
var m = date.getMonth() + 1;
var d = date.getDate();
return y + '-' + (m < 10 ? '0' + m : m) + '-' + (d < 10 ? '0' + d : d);
};
$.fn.datebox.defaults.parser = function (s) {
if (s) {
var a = s.split('-');
var d = new Date(parseInt(a[0]), parseInt(a[1]) - 1, parseInt(a[2]));
return d;
} else {
return new Date();
}
};
</script>
class="easyui-datebox" required="true" missingMessage="日期必須填寫" editable="false"
//如果需要填寫其他格式的類型請自行修改formatter函數
5、驗證必須是郵件
class="easyui-validatebox" missingMessage="郵件必須填寫" validType="email" invalidMessage="請填寫正確的郵件格式"
6、頁面時間段判斷 name爲s1的時間必須大於name爲s2的時間 s3必須大於s2
<script>
$.extend($.fn.validatebox.defaults.rules,{
TimeCheck:{
validator:function(value,param){
var s = $("input[name="+param[0]+"]").val();
//因爲日期是統一格式的所以可以直接比較字符串 否則需要Date.parse(_date)轉換
return value>=s;
},
message:'非法數據'
}
});
</script>
<input name="s1" class="easyui-datebox" required="true" missingMessage="日期必須填寫" editable="false"></input>
<input name="s2" class="easyui-datebox" required="true" validType="TimeCheck['s1']" invalidMessage="s1必須大於s2" editable="false"></input>
<input name="s3" class="easyui-datebox" required="true" validType="TimeCheck['s2']" editable="false"></input>
7、詢問對話框提交：
function Confirmbtn(msg, control) {
$.messager.confirm('確認', msg, function (r) {
if (r) {
__doPostBack("ctl00$ContentPH_Main$Button1", "");
//alert('aa');
}
});
return false;
}
OnClientClick="return Confirmbtn('確認嗎？', this);
8.
當然也可以自定義驗證規則，重寫$.fn.validatebox.defaults.rules 可以定義一個校驗器的功能和無效的顯示消息。例如，要定義一個minLength有效的類型：
$.extend($.fn.validatebox.defaults.rules, {
minLength: {
validator: function(value, param){
return value.length >= param[0];
},
message: 'Please enter at least {0} characters.'
}
});
定義好以後我們就可以使用了，下面的代碼表示輸入的最小長度是5個字符：
<input class="easyui-validatebox" validType="minLength[5]">
下面來介紹更多的用法：屬性
屬性名 類型 描述 默認值
required 布爾 定義文本域是否爲必填項 false
validType 字符串 定義字段的驗證類型，比如email, url, etc. null
missingMessage 字符串 當文本框爲空時提示的文本信息 This field is required.
invalidMessage 字符串 當文本框內容不合法時提示的文本信息 null
方法
方法名 參數 描述
destroy none 刪除並且銷燬組件
validate none 做驗證以確定文本框的內容是否是有效的。
isValid none 調用驗證方法並返回驗證結果，true或者false
【轉載】Jquery.EasyUI 抽屜控件
<div class="easyui-accordion" fit="true" border="false" id="main_menu">
<div title="信息維護">
<a href="http://blog.163.com/zhchf_52@yeah/blog/#" class="accordion-menu" onclick="UserClick()" id="miUser">用戶維護</a>
……
選擇"信息維護"
$("#main_menu").accordion("select", "用戶維護");
【轉載】easyui tree展開樹節點時自定義向struts後臺傳遞參數（默認是自動傳遞id）,該
最近項目中用的easyui tree，發現這個插件在展開樹節點時，向後臺自動傳遞id參數，爲保持以前的開發模式，希望對它的傳參模式更改爲用戶自定義，不知道到大家有做過這樣的改動嗎？分享一下！
------------------------------------------------------------------------------------------------------------------
問題補充：
myali88 寫道
easyui tree裏面不是有個attributes用做這個的麼？
引用
attributes: Custom attributes bind to the node.
attributes屬性是自定義的node屬性，對於向後臺傳遞參數，如何使用？？
另外還有個問題，需要請教一下，在新增樹節點時，使用appendNodes方法如何做到新增選中節點的同級樹節點（它的文檔api中，appendNodes可以實現新增選中節點的子節點）。 現在解決了
------解決方案--------------------------------------------------------
easyui tree裏面不是有個attributes用做這個的麼？
引用
attributes: Custom attributes bind to the node.
------解決方案--------------------------------------------------------
可參考:
哪位高手使用過jquery easyui的tree http://www.myexception.cn/asp-dotnet/319105.html
【轉載】異步(ajax)動態加載無限級聯樹(tree)代碼示例
在網上看了很多示例，發現都是用tree控件的各種事件去修改url參數實現的，我這裏介紹一種前端最簡單的實現方法。
在前端不寫任何多餘的代碼。前端代碼非常簡單，如下：
HTML和JS代碼:
- <ul id="tt4"></ul>
- $(function(){
- $('#tt4').tree({
- date:[{"id":1 , "text":"Folder1"}],
- url: '/egov/egs/prm/citizen-treedemo-ajax.action?id='
- });
- });
重點在後臺代碼,先說下原理。
第一次訪問當然ID是空的，這時候判斷ID爲空就默認使用根節點查找，當然根節點的ID是多少一般是固定的。
以後再點擊前臺樹(tree)的節點(node)時，展開文件夾的時候樹控件，會自動將點擊的ID傳到後臺，這個應該是easyui的tree默認的一個特性。
下面是後臺代碼，這裏是JAVA實現：
- /**
- * 異步加載模塊樹
- *
- * @return
- */
- public String treeDemoAjax() {
- // 獲取ID
- String id = this.getString("id");
- TreeNode treeNode = null;
- String treeJson = "";
- // 如果是空，就默認根目錄
- if (StringUtils.isBlank(id)) {
- treeNode = new TreeNode("0", "模塊根目錄");
- List<TreeNode> treeChildren = queryAjaxTreeChildren(treeNode);
- treeNode.setChildren(treeChildren);
- treeJson = new JsonObject(treeNode).toString();
- } else {
- // 加載子節點
- treeNode = new TreeNode(id, "");
- List<TreeNode> treeChildren = queryAjaxTreeChildren(treeNode);
- treeJson = new JsonArray(treeChildren).toString();
- if (!StringUtils.isBlank(treeJson) && treeJson.length() > 2) {
- treeJson = treeJson.substring(1);
- treeJson = treeJson.substring(0, treeJson.length() - 1);
- }
- }
- this.put("msg", "[" + treeJson + "]");
- return Action.SUCCESS;
- }
上面的queryAjaxTreeChildren 函數爲遞歸查找子節點。
函數實現如下：
- /**
- * 查詢父節點下的子節點
- *
- * @return
- */
- private List<TreeNode> queryTreeChildren(TreeNode pNode) {
- List<Hashtable> treeData = deployService.querySQL("select id,name text from sys_module where parentid='" + pNode.getId() + "' order by list");
- List<TreeNode> treeNodeList = new ArrayList<TreeNode>();
- if (treeData != null && treeData.size() > 0) {
- for (Hashtable ht : treeData) {
- String id = (String) ht.get("id");
- String text = (String) ht.get("text");
- TreeNode childNode = new TreeNode(id, text);
- treeNodeList.add(childNode);
- }
- }
- return treeNodeList;
- }
- /**
- * 查詢父節點下的子節點,並且查詢子節點的子節點，如果有子節點就將子節點設置成state:closed
- *
- * @return
- */
- private List<TreeNode> queryAjaxTreeChildren(TreeNode pNode) {
- List<Hashtable> treeData = deployService.querySQL("select id,name text from sys_module where parentid='" + pNode.getId() + "' order by list");
- List<TreeNode> treeNodeList = new ArrayList<TreeNode>();
- if (treeData != null && treeData.size() > 0) {
- for (Hashtable ht : treeData) {
- String id = (String) ht.get("id");
- String text = (String) ht.get("text");
- TreeNode childNode = new TreeNode(id, text);
- // 查詢子節點的是否有子節點
- List<TreeNode> childNodeChildren = queryTreeChildren(childNode);
- if (childNodeChildren.size() > 0) {
- childNode.setState(TreeNode.STATE_CLOSED);
- }
- treeNodeList.add(childNode);
- }
- }
- return treeNodeList;
- }
注意這裏我們需要判斷子節點是否還有子節點，因爲這樣我們才能判斷在界面上是將節點顯示成文件還是文件夾。
這裏對easyui 樹的節點JAVA代碼封裝模型TreeNode的代碼看這裏：http://luju.me/easyui/tree_for_javacode.html
OK，異步(ajax)動態加載無限級聯樹(tree)就做好了。
來運行一下，當我們點擊“用戶服務”的時候，後臺是異步加載的。
本文爲《魯炬的博客》原創。
歡迎轉載，但請務必註明出處，尊重他人勞動。
轉載請註明：原文地址：http://luju.me/easyui/ajax_tree.html
【轉載】jQuery EasyUI一些功能總結
jQuery EasyUI 是幫助構建web頁面的 一個框架，官方網址：http://www.jeasyui.com
前段時間鑑於項目需要，就用EasyUI做了一些東西（項目中EasyUI版本是jquery-easyui-1.3.2），現將做過的一些功能做下說明和整理，以便以後用到，先來看一下EasyUI可實現哪些功能吧！
用EasyUI可輕鬆實現特殊查詢功能的展示
用EasyUI可輕鬆實現普通的增、刪、改功能
和其它一些功能實現
上面是一些樣式展示，下面就來說說個別功能的實現步驟：
首先下載官方包到自己的項目中（注：除了官方包外還需要下載相應的jQuery包支持），
下載地址：http://www.jeasyui.com/download/index.php
然後在自己的項目中進行引用就行，別的都可以不要但關鍵的幾個js和樣式還是需要的
DataGrid實現（數據填充、增刪改查等）：
js實現方式
1.聲明DataGrid
2.然後再用js方法操作其屬性
3.上面這段代碼用於實現表格列的顯示與隱藏，以及排序功能等，效果如下
編輯功能：
跨行跨列以及凍結列凍結行代碼如下：
還可以用js的方式來實現上面的表格樣式：
設置單元格樣式代碼：
其中將部分Java代碼如下：
【轉載】C#將datatable生成easyui的綁定tree 的json數據格式
在用easyui控件的時候常用到他能解析的接送數據，我們可以通過c#將我們從數據庫中得到datatable轉換成那樣的格式，datagrid的好轉換，簡單的循環拼串就可以，不過easyui綁定樹的時候的接送數據格式稍有不同，比datagrid和datagridtree得到json數據要稍微複雜一些，我寫了性能雖然不是很好的，但是也能得到想要的數據！
/// <summary>
/// 根據DataTable生成Json樹結構
/// </summary>
/// <param name="tabel">數據源</param>
/// <param name="idCol">ID列</param>
/// <param name="txtCol">Text列</param>
/// <param name="rela">關係字段</param>
/// <param name="pId">父ID</param>
StringBuilder result = new StringBuilder();
StringBuilder sb = new StringBuilder();
private void GetTreeJsonByTable(DataTable tabel, string idCol, string txtCol, string rela, object pId)
{
result.Append(sb.ToString());
sb.Clear();
if (tabel.Rows.Count > 0)
{
sb.Append("[");
string filer = string.Format("{0}='{1}'", rela, pId);
DataRow[] rows = tabel.Select(filer);
if (rows.Length > 0)
{
foreach (DataRow row in rows)
{
sb.Append("{\"id\":\"" + row[idCol] + "\",\"text\":\"" + row[txtCol] + "\",\"state\":\"open\"");
if (tabel.Select(string.Format("{0}='{1}'", rela, row[idCol])).Length > 0)
{
sb.Append(",\"children\":");
GetTreeJsonByTable(tabel, idCol, txtCol, rela, row[idCol]);
result.Append(sb.ToString());
sb.Clear();
}
result.Append(sb.ToString());
sb.Clear();
sb.Append("},");
}
sb = sb.Remove(sb.Length - 1, 1);
}
sb.Append("]");
result.Append(sb.ToString());
sb.Clear();
}
}
調用方法很簡單，運行這個void 類型的函數，然後取result 的值就行了，
//GetTreeJsonByTable(datatable, "id", "title", "pid", "0");
//string content = result.ToString();
【轉載】擴展easyui 的表單驗證
easyui 的validatebox()提供了自定義驗證的方法，爲此我把一些常用的數據驗證彙總了一下，代碼如下：
$.extend($.fn.validatebox.defaults.rules, {
CHS: {
validator: function (value, param) {
return /^[\u0391-\uFFE5]+$/.test(value);
},
message: '請輸入漢字'
},
ZIP: {
validator: function (value, param) {
return /^[1-9]\d{5}$/.test(value);
},
message: '郵政編碼不存在'
},
QQ: {
validator: function (value, param) {
return /^[1-9]\d{4,10}$/.test(value);
},
message: 'QQ號碼不正確'
},
mobile: {
validator: function (value, param) {
return /^((\(\d{2,3}\))|(\d{3}\-))?13\d{9}$/.test(value);
},
message: '手機號碼不正確'
},
loginName: {
validator: function (value, param) {
return /^[\u0391-\uFFE5\w]+$/.test(value);
},
message: '登錄名稱只允許漢字、英文字母、數字及下劃線。'
},
safepass: {
validator: function (value, param) {
return safePassword(value);
},
message: '密碼由字母和數字組成，至少6位'
},
equalTo: {
validator: function (value, param) {
return value == $(param[0]).val();
},
message: '兩次輸入的字符不一至'
},
number: {
validator: function (value, param) {
return /^\d+$/.test(value);
},
message: '請輸入數字'
},
idcard: {
validator: function (value, param) {
return idCard(value);
},
message:'請輸入正確的身份證號碼'
}
});
/* 密碼由字母和數字組成，至少6位 */
var safePassword = function (value) {
return !(/^(([A-Z]*|[a-z]*|\d*|[-_\~!@#\$%\^&\*\.\(\)\[\]\{\}<>\?\\\/\'\"]*)|.{0,5})$|\s/.test(value));
}
var idCard = function (value) {
if (value.length == 18 && 18 != value.length) return false;
var number = value.toLowerCase();
var d, sum = 0, v = '10x98765432', w = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2], a = '11,12,13,14,15,21,22,23,31,32,33,34,35,36,37,41,42,43,44,45,46,50,51,52,53,54,61,62,63,64,65,71,81,82,91';
var re = number.match(/^(\d{2})\d{4}(((\d{2})(\d{2})(\d{2})(\d{3}))|((\d{4})(\d{2})(\d{2})(\d{3}[x\d])))$/);
if (re == null || a.indexOf(re[1]) < 0) return false;
if (re[2].length == 9) {
number = number.substr(0, 6) + '19' + number.substr(6);
d = ['19' + re[4], re[5], re[6]].join('-');
} else d = [re[9], re[10], re[11]].join('-');
if (!isDateTime.call(d, 'yyyy-MM-dd')) return false;
for (var i = 0; i < 17; i++) sum += number.charAt(i) * w[i];
return (re[2].length == 9 || number.charAt(17) == v.charAt(sum % 11));
}
var isDateTime = function (format, reObj) {
format = format || 'yyyy-MM-dd';
var input = this, o = {}, d = new Date();
var f1 = format.split(/[^a-z]+/gi), f2 = input.split(/\D+/g), f3 = format.split(/[a-z]+/gi), f4 = input.split(/\d+/g);
var len = f1.length, len1 = f3.length;
if (len != f2.length || len1 != f4.length) return false;
for (var i = 0; i < len1; i++) if (f3[i] != f4[i]) return false;
for (var i = 0; i < len; i++) o[f1[i]] = f2[i];
o.yyyy = s(o.yyyy, o.yy, d.getFullYear(), 9999, 4);
o.MM = s(o.MM, o.M, d.getMonth() + 1, 12);
o.dd = s(o.dd, o.d, d.getDate(), 31);
o.hh = s(o.hh, o.h, d.getHours(), 24);
o.mm = s(o.mm, o.m, d.getMinutes());
o.ss = s(o.ss, o.s, d.getSeconds());
o.ms = s(o.ms, o.ms, d.getMilliseconds(), 999, 3);
if (o.yyyy + o.MM + o.dd + o.hh + o.mm + o.ss + o.ms < 0) return false;
if (o.yyyy < 100) o.yyyy += (o.yyyy > 30 ? 1900 : 2000);
d = new Date(o.yyyy, o.MM - 1, o.dd, o.hh, o.mm, o.ss, o.ms);
var reVal = d.getFullYear() == o.yyyy && d.getMonth() + 1 == o.MM && d.getDate() == o.dd && d.getHours() == o.hh && d.getMinutes() == o.mm && d.getSeconds() == o.ss && d.getMilliseconds() == o.ms;
return reVal && reObj ? d : reVal;
function s(s1, s2, s3, s4, s5) {
s4 = s4 || 60, s5 = s5 || 2;
var reVal = s3;
if (s1 != undefined && s1 != '' || !isNaN(s1)) reVal = s1 * 1;
if (s2 != undefined && s2 != '' && !isNaN(s2)) reVal = s2 * 1;
return (reVal == s1 && s1.length != s5 || reVal > s4) ? -10000 : reVal;
}
};
頁面中要引入jquery.js 和 easyui.min.js
html 代碼中使用如下
<table class="grid" id="uiform">
<tr>
<td>登錄名：</td>
<td><input required="true" id="txtUsername" type="text" class="txt03" /></td>
<td>真實姓名：</td>
<td><input id="txtTruename" validType="CHS" required="true" type="text" class="txt03" /></td>
</tr>
<tr>
<td>登錄密碼：</td>
<td><input validType="safepass" required="true" id="txtPassword" name="password" type="password" class="txt03" /></td>
<td>Email：</td>
<td><input id="txtEmail" name="email" validType="email" type="text" class="txt03" /></td>
</tr>
<tr>
<td>身份證號：</td>
<td><input validType="idcard" id="txtIdcard" name="idcard" type="text" class="txt03" /></td>
<td>QQ：</td>
<td><input validType="QQ" id="txtQq" name="qq" type="text" class="txt03" /></td>
</tr>
<tr>
<td>手機：</td>
<td><input validType="mobile" id="txtMobile" name="mobile" type="text" class="txt03" /></td>
<td>電話：</td>
<td><input id="txtTel" name="tel" type="text" class="txt03" /></td>
</tr>
<tr>
<td>家庭住址：</td>
<td colspan="3"><input validType="equalTo[txtMobile]" style="width:80%" id="txtHomeaddr" name="homeaddr" type="text" class="txt03" /></td>
</tr>
<tr>
<td>備註：</td>
<td colspan="3"> <input type="text" style="width:80%" class="txt03" id="txtRemark"></textarea></td>
</tr>
<tr>
<td> </td>
<td colspan="3"><input id="Checkbox1" type="checkbox" /><label>超級管理員</label> <input id="Checkbox2" type="checkbox" /><label>禁用</label></td>
</tr>
</table>
注：文中紅色字體部分的js正則表達式在Asp.net MVC文件中，即cshtml文件中由於@符號是標識符，所以需要進行轉義，即將表達式改成下列形式。
/* 密碼由字母和數字組成，至少6位 */
var safePassword = function (value) {
return !(/^(([A-Z]*|[a-z]*|\d*|[-_\~!@@#\$%\^&\*\.\(\)\[\]\{\}<>\?\\\/\'\"]*)|.{0,5})$|\s/.test(value));
}
【轉載】初試jQuery EasyUI
想必關注jQuery的同學們對jQuery EasyUI已經有所耳聞了，目前已經更新到1.0.5版本，風格與EXTJS有點相似，可以很好的滿足開發人員對UI的需求。
jQuery
EasyUI
jQuery EasyUI是一組基於jQuery的UI插件集合，而jQuery EasyUI的目標就是幫助web開發者更輕鬆的打造出功能豐富並且美觀的UI界面。開發者不需要編寫複雜的javascript，也不需要對css樣式有深入的瞭解，開發者需要了解的只有一些簡單的html標籤。
jQuery EasyUI爲我們提供了大多數UI控件的使用，如：accordion，combobox，menu，dialog，tabs，tree，window等等。
OK，下面就開始我們的初探之旅。
jQuery
EasyUI---Accordion
手風琴效果，大家應該很熟悉。
基本代碼：
代碼
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Accordion</title>
<script src="../jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="../jquery.easyui.min.js" type="text/javascript"></script>
<link href="../themes/default/easyui.css" rel="stylesheet" type="text/css" />
<link href="../themes/icon.css" rel="stylesheet" type="text/css" />
<script type="text/javascript"></script>
</head>
<body>
<div style="overflow:auto;width:600px;height:300px;padding:10px;border:1px solid #ccc;">
<div id="aa" class="easyui-accordion" fit="true" style="width:300px;height:200px;">
<div title="Title1" style="overflow:auto;padding:10px;">
<h3>Accordion1</h3>
</div>
<div title="Title2" style="padding:10px;">
<h3>Accordion2</h3>
</div>
<div title="Title3">
<h3>Accordion3</h3>
</div>
</div>
</div>
</body>
</html>
代碼非常簡單，只需要簡單的html就可以實現。這裏最重要的就是首先要引用jquery-1.4.2.min.js和jquery.easyui.min.js。
效果：
由於只是簡單的html，所以我們可以通過js輕鬆的對Accordion進行操控，控制大小，位置等等。
jQuery
EasyUI---DataGrid
從名字就可以知道這是個數據的綁定和顯示控件。
基本代碼：
代碼
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DataGrid</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="../jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="../jquery.easyui.min.js" type="text/javascript"></script>
<link href="../themes/default/easyui.css" rel="stylesheet" type="text/css" />
<link href="../themes/icon.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function() {
$('#test').datagrid({
title: 'jQuery EasyUI---DataGrid',
iconCls: 'icon-save',
width: 500,
height: 350,
nowrap: false,
striped: true,
url: '../Data/datagrid_data.json',
sortName: 'ID',
sortOrder: 'desc',
idField: 'ID',
frozenColumns: [[
{ field: 'ck', checkbox: true },
{ title: 'ID', field: 'ID', width: 80, sortable: true }
]],
columns: [[
{ title: '基本信息', colspan: 2 },
{ field: 'opt', title: '操作', width: 100, align: 'center', rowspan: 2,
formatter: function(value, rec) {
return '<span style="color:red">編輯 刪除</span>';
}
}
], [
{ field: 'name', title: 'Name', width: 120 },
{ field: 'addr', title: 'Address', width: 120, rowspan: 2, sortable: true }
]],
pagination: true,
rownumbers: true,
singleSelect: false,
toolbar: [{
text: '添加',
iconCls: 'icon-add',
handler: function() {
alert('添加數據')
}
}, '-', {
text: '保存',
iconCls: 'icon-save',
handler: function() {
alert('保存數據')
}
}]
});
});
</script>
</head>
<body>
<table id="test"></table>
</body>
</html>
這裏我們從datagrid_data.json中獲取數據，代碼的編寫風格同EXTIS十分相似。ExtJS開發實踐
效果：
jQuery
EasyUI---Dialog
網頁窗體效果。
基本代碼：
代碼
效果：
jQuery
EasyUI---Tabs
無論是網站還是管理軟件，我們越來越多的使用Tabs，EasyUI自然也進行了支持。
基本代碼：
代碼
效果：
jQuery
EasyUI---Messager
信息提示控件，可以很好的進行數據的提示，推薦。
基本代碼：
代碼
效果：
頁面左下角信息提示
jQuery
EasyUI---ValidateBox
數據驗證控件，可以很好的對錶單數據進行驗證。
基本代碼：
代碼
不需要寫任何函數，只需對要驗證的控件required="true" validType="url"就可以。
效果：
jQuery
EasyUI---LayOut
頁面佈局，可以將整個頁面劃分成幾個區域。類似ExtJS中的Border佈局。
基本代碼：
代碼
效果：
jQuery
EasyUI---換膚
jQuery EasyUI使用了統一的CSS樣式，在修改方面也很是方便：
如圖所示，對於每一個控件，都有專有的CSS。相應對其修改就可以，只需簡單的瞭解CSS即可。
http://www.cnblogs.com/gaoweipeng/archive/2010/03/31/1701094.html
【轉載】解決ie瀏覽器對easyui加載時候彈出的div一閃而過的問題
彈出div代碼：
<div class="easyui-panel", data-options="fit:true ,border:false " >
<div id="p" class="easyui-panel" data-options="title:'當前位置：會議配置 - 會議簽到',fit:true,border:false " tools="#backButton">
<div id="backButton"><a href="http://blog.163.com/lixiaofengfly@126/blog/${pageContext.request.contextPath}/meet/backMeet" class="icon-back" style="margin-top:-2px;width:51px;height:21px;"></a></div>
<div class="easyui-panel panel-body" fit="true" style="border:0px;display:none" id="a">
<table class="pn-ftable" cellpadding="2" cellspacing="1" border="0" style="font-size:12px;background-color:#B4CFCF;margin-top:5px;"
class="pn-ftable" id="test" data-options="fit:true">
<tr>
<td class="pn-flabel pn-flabel-h" width="300px">二維碼簽到圖片：</td>
<td class="pn-fcontent" style="height:200px;width:900px;" >
<div id="aa" ${meetingVO.twodcode == ""?" style='display:none' ":"style='display:block' " }>
<span id="deparmentnamespan" style="height:200px;width:200px" >
<img style="height:200px;width:200px" id="twowordimg" src="http://blog.163.com/lixiaofengfly@126/blog/${meetingVO.twodcode == ""?"":"/MS/signin/showimg" }">
</span>
<span class="pn-fhelp" >下載二維碼圖片方式：對圖片右鍵圖片另存爲,選擇您要保存的位置</span>
</div>
<div id="bb" ${meetingVO.twodcode == ""?" style='display:block' ":"style='display:none' " }>
<span class="pn-fhelp" >暫無圖片,請初始化二維碼</span>
</div>
</td>
</tr>
<tr>
<td colspan="2" class="pn-fbutton">
<div id="cc" ${meetingVO.twodcode == ""?" style='display:none' ":"style='display:block' "}>
<span class="pn-fhelp" ><a id="btnSaveConference" class="easyui-linkbutton" onclick="changetwoword()">更換二維碼</a></span>
<span class="pn-fhelp" ><a id="btnSaveConference" class="easyui-linkbutton" onclick="beforeprinttwoword()">打印預覽</a></span>
</div>
<div id="dd" ${meetingVO.twodcode == ""?" style='display:block' ":"style='display:none' " } >
<span class="pn-fhelp" ><a id="btnSaveConference" class="easyui-linkbutton" onclick="changetwoword()">初始化二維碼</a></span>
</div>
</td>
</tr>
</table>
</div>
</div>
<div id="addDig" style="background:#B4CFCF"></div>
</div>
當頁面全部加載完畢調用初始化代碼
<body onload="init()" >
初始化代碼
function init(){
document.getElementById("a").style.display="block";
document.getElementById("b").style.display="block";
}
總結： 先將要彈出的div隱藏 當頁面全部加載完畢時候 在顯示出來