jQuery EasyUI API 中文帮助文档和扩展实例

//弹框$.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;" />

//动态构造列表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;}

<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>

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);}}});}

/// <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; }}

//采用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});}

//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'); }});}