1.validatebox驗證和提示框擴展:
//彈框$.extend({show_alert: function (strTitle, strMsg) {$.messager.alert(strTitle, strMsg);}});//擴展validatebox,添加驗證$.extend($.fn.validatebox.defaults.rules, {eqPwd: {validator: function (value, param) {return value == $(param[0]).val();},message: '密碼不一致!'},idcard: {// 驗證身份證validator: function (value) {return /^/d{15}(/d{2}[A-Za-z0-9])?$/i.test(value);},message: '身份證號碼格式不正確'},minLength: {validator: function (value, param) {return value.length >= param[0];},message: '請輸入至少(2)個字符.'},length: {validator: function (value, param) {var len = $.trim(value).length;return len >= param[0] && len <= param[1];},message: "必須介于{0}和{1}之間."},phone: {// 驗證電話號碼validator: function (value) {return /^((/d2,3)|(/d{3}/-))?(0/d2,3|0/d{2,3}-)?[1-9]/d{6,7}(/-/d{1,4})?$/i.test(value);},message: '格式不正確,請使用下面格式:020-88888888'},mobile: {// 驗證手機號碼validator: function (value) {return /^(13|15|18)/d{9}$/i.test(value);},message: '手機號碼格式不正確'},intOrFloat: {// 驗證整數或小數validator: function (value) {return /^/d+(/./d+)?$/i.test(value);},message: '請輸入數字,并確保格式正確'},currency: {// 驗證貨幣validator: function (value) {return /^/d+(/./d+)?$/i.test(value);},message: '貨幣格式不正確'},qq: {// 驗證QQ,從10000開始validator: function (value) {return /^[1-9]/d{4,9}$/i.test(value);},message: 'QQ號碼格式不正確'},integer: {// 驗證整數 可正負數validator: function (value) {//return /^[+]?[1-9]+/d*$/i.test(value);return /^([+]?[0-9])|([-]?[0-9])+/d*$/i.test(value);},message: '請輸入整數'},age: {// 驗證年齡validator: function (value) {return /^(?:[1-9][0-9]?|1[01][0-9]|120)$/i.test(value);},message: '年齡必須是0到120之間的整數'},chinese: {// 驗證中文validator: function (value) {return /^[/Α-/¥]+$/i.test(value);},message: '請輸入中文'},english: {// 驗證英語validator: function (value) {return /^[A-Za-z]+$/i.test(value);},message: '請輸入英文'},unnormal: {// 驗證是否包含空格和非法字符validator: function (value) {return /.+/i.test(value);},message: '輸入值不能為空和包含其他非法字符'},username: {// 驗證用戶名validator: function (value) {return /^[a-zA-Z][a-zA-Z0-9_]{5,15}$/i.test(value);},message: '用戶名不合法(字母開頭,允許6-16字節,允許字母數字下劃線)'},dbname: {// 驗證字段表名validator: function (value) {return /^[a-zA-Z][a-zA-Z0-9]{3,19}$/i.test(value);},message: '輸入不合法(字母開頭,允許4-20字節,允許字母數字)'},faxno: {// 驗證傳真validator: function (value) {return /^((/d2,3)|(/d{3}/-))?(0/d2,3|0/d{2,3}-)?[1-9]/d{6,7}(/-/d{1,4})?$/i.test(value);},message: '傳真號碼不正確'},zip: {// 驗證郵政編碼validator: function (value) {return /^[1-9]/d{5}$/i.test(value);},message: '郵政編碼格式不正確'},ip: {// 驗證IP地址validator: function (value) {return /d+.d+.d+.d+/i.test(value);},message: 'IP地址格式不正確'},name: {// 驗證姓名,可以是中文或英文validator: function (value) {return /^[/Α-/¥]+$/i.test(value) | /^/w+[/w/s]+/w+$/i.test(value);},message: '請輸入姓名'},date: {// 驗證姓名,可以是中文或英文validator: function (value) {//格式yyyy-MM-dd或yyyy-M-dreturn /^(?:(?!0000)[0-9]{4}([-]?)(?:(?:0?[1-9]|1[0-2])/1(?:0?[1-9]|1[0-9]|2[0-8])|(?:0?[13-9]|1[0-2])/1(?:29|30)|(?:0?[13578]|1[02])/1(?:31))|(?:[0-9]{2}(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)([-]?)0?2/2(?:29))$/i.test(value);},message: '清輸入合適的日期格式'},msn: {validator: function (value) {return /^/w+([-+.]/w+)*@/w+([-.]/w+)*/./w+([-.]/w+)*$/.test(value);},message: '請輸入有效的msn賬號(例:abc@hotnail(msn/live).com)'},same: {validator: function (value, param) {if ($("#" + param[0]).val() != "" && value != "") {return $("#" + param[0]).val() == value;} else {return true;}},message: '兩次輸入的密碼不一致!'}});
使用方法:(紅色標記)
<input type="text" name="txtUserNameEdit" id="txtUserNameEdit" class="easyui-validatebox textbox" data-options="required:true,validType:'length[2,20]'" style="width:170px;height:22px;" /><input type="text" name="txtMobilePhone" id="txtMobilePhone" class="easyui-validatebox textbox" data-options="required:false,validType:'mobile'" style="width:170px;height:22px;" />
2.datagrid動態輸出列:
前端JS輸出:
//動態構造列表var option = {};$.ajax({url: "/Table/GetTabColsJsonStr",type: "post",data: {},dataType: "json",success: function (data) {option.columns = data.columns;$("#ui_TabData_dg").datagrid({url: "/Table/GetTabDataInfoByTabId",striped: true, rownumbers: true, pagination: true, pageSize: 20, singleSelect: true, multiSort: true,idField: 'Id',sortName: 'UpdateTime',sortOrder: 'desc',pageList: [20, 40, 60, 80, 100]});$('#ui_TabData_dg').datagrid(option);}})
后端:
/// <summary>/// 獲取列Json/// </summary>/// <param name="TabId"></param>/// <returns></returns>public string GetColumnsJsonStr(){string fieldJson = "{/"columns/":[[{/"field/":/"Id/",/"title/":/"主鍵/",/"width/":/"40/"},";//此處獲取輸出表的列...DataTable dtFields = new DataTable(); //SqlHelper.GetDataTable....if (dtFields.Rows.Count > 0){foreach (DataRow dr in dtFields.Rows){fieldJson += "{/"field/":/"" + dr["FieldName"].ToString() + "/",/"title/":/"" + dr["FieldViewName"].ToString() + "/",/"width/":/"100/"},";}}fieldJson += "{/"field/":/"CreateBy/",/"title/":/"創建人/",/"width/":/"80/"},";fieldJson += "{/"field/":/"CreateTime/",/"title/":/"創建時間/",/"width/":/"130/"},";fieldJson += "]]}";return fieldJson;}
3.easyui-accordion和easyui-tree構造多層級目錄一級選項卡菜單框架
如下圖:
菜單樹HTML:
<div data-options="region:'west',split:true,title:'功能導航'" style="width: 180px; background-color: white;"><div id="RightAccordion" class="easyui-accordion"></div></div><div data-options="region:'center'"><div id="tabs" class="easyui-tabs" fit="true" border="false" data-options="tools:[{iconCls : 'icon-arrow_refresh',text:'刷新',handler:refreshTab},{iconCls : 'icon-delete3',text:'關閉全部',handler:closeTab}]"><div id="home" title="我的主頁" data-options="iconCls:'icon-house',closable:false" style="padding:10px">This is the Home content.</div></div></div>
JS:
function BindRightAccordion() {$("#RightAccordion").accordion({ //初始化accordionfillSpace: true,fit: true,border: false,animate: false});//獲取第一層初始目錄$.post("/Home/GetTreeByEasyui", { "id": "0" },function (data) {if (data == "0") {window.location.href = '/Login/Index';}$.each(data, function (i, e) {var id = e.id;$('#RightAccordion').accordion('add', {title: e.text,content: "<ul id='tree" + id + "' ></ul>",selected: true,iconCls: e.iconCls});$.parser.parse();//獲取二級以下目錄 含2級$.post("/Home/GetTreeByEasyui?id=" + id, function (data) {$("#tree" + id).tree({data: data,onBeforeExpand: function (node, param) {$("#tree" + id).tree('options').url = "/Home/GetTreeByEasyui?id=" + node.id;},onClick: function (node) {if (node.state == 'closed') {$(this).tree('expand', node.target);} else if (node.state == 'open') {$(this).tree('collapse', node.target);var tabTitle = node.text;var url = node.attributes;var icon = node.iconCls;addTab(tabTitle, url, icon);}}});}, 'json');});}, "json");}//選項卡function addTab(subtitle, url, icon) {var strHtml = '<iframe id="frmWorkArea" width="99.5%" height="99%" style="padding:1px;" frameborder="0" scrolling="yes" src="' + url + '"></iframe>';if (!$('#tabs').tabs('exists', subtitle)) {$('#tabs').tabs('add', {title: subtitle,content: strHtml,iconCls: icon,closable: true,loadingMessage: '正在加載中......'});} else {$('#tabs').tabs('select', subtitle);}}//刷新選項卡function refreshTab() {var index = $('#tabs').tabs('getTabIndex', $('#tabs').tabs('getSelected'));if (index != -1) {var tab = $('#tabs').tabs('getTab', index);$('#tabs').tabs('update', {tab: tab,options: {selected: true}});}}//關閉選項卡function closeTab() {$('.tabs-inner span').each(function (i, n) {var t = $(n).text();if (t != '') {if (t != "我的主頁") {$('#tabs').tabs('close', t);}}});}
后端輸出Json代碼:
/// <summary>/// 獲取導航菜單/// </summary>/// <param name="id">所屬</param>/// <returns>樹</returns>public JsonResult GetTreeByEasyui(string id){try{if (uInfo != null){DataTable dt = new MenuBLL().GetUserMenuData( int.Parse(id));List<SysModuleNavModel> list = new List<SysModuleNavModel>();for (int i = 0; i < dt.Rows.Count; i++){SysModuleNavModel model = new SysModuleNavModel();model.id = dt.Rows[i]["menuid"].ToString();model.text = dt.Rows[i]["menuname"].ToString();model.attributes = dt.Rows[i]["linkaddress"].ToString();model.iconCls = dt.Rows[i]["icon"].ToString();if (new MenuBLL().GetMenuList(" AND ParentId= " + model.id).Rows.Count > 0){model.state = "closed";}else{model.state = "open";}list.Add(model);}return Json(list);}else{return Json("0", JsonRequestBehavior.AllowGet);}}catch (Exception ex){return Json("0", JsonRequestBehavior.AllowGet);}}public class SysModuleNavModel{public string id { get; set; }public string text { get; set; }public string iconCls { get; set; }public string attributes { get; set; }public string state { get; set; }public List<SysModuleNavModel> children { get; set; }}
3.dialog彈出窗口:
(1)內容頁為iframe:
//采用iframe框架function ShowNews() {var content = '<iframe src="/News/ShowNews" width="100%" height="99%" frameborder="0" scrolling="no"></iframe>';$("<div/>").dialog({id: "News",content: content,title: "公告",height:600,width: 800,modal: true});}
(2)內容頁為div:
//divfunction ShowNews() {$("<div/>").dialog({id: "ui_news_dialog",title: "公告",href: "/News/ShowNews",height: 600,width: 800,modal: true,buttons: [{id: "ui_AddNews_btn",//按鈕IDtext: '添 加',handler: function () {//這里寫form表單提交事件$("#NewsForm").form("submit", {url: "/News/AddNews",onSubmit: function (param) {param.ID = "";param.Name = "";if ($(this).form('validate')) {return true;}else {return false;}},success: function (data) {var dataJson = eval('(' + data + ')');if (dataJson.success) {//銷毀dialog對象$("#ui_news_dialog").dialog('destroy');$.show_alert("提示", dataJson.msg);} else {$.show_alert("提示", dataJson.msg);}}});}}, {text: '取 消',handler: function () {$("#ui_news_dialog").dialog('destroy');}}],onLoad: function () {//加載處理事件,例如:$("#txtName").focus();},onClose: function () {$("#ui_news_dialog").dialog('destroy'); }});}
以上所述是小編給大家介紹的jQuery EasyUI API 中文幫助文檔和擴展實例,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持!
新聞熱點
疑難解答