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

这篇文章主要介绍了jQuery EasyUI API 中文帮助文档和扩展实例 的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下

下载地址：jQuery EasyUI API 中文帮助文档

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-d return /^(?:(?!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: '两次输入的密码不一致！' } });

使用方法：(红色标记)

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

后端：

 /// 
 /// 获取列Json /// 
 ///  ///  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：

      This is the Home content. 

JS：

 function BindRightAccordion() { $("#RightAccordion").accordion({ //初始化accordion fillSpace: 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: "
", 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 = ''; 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代码:

 /// 
 /// 获取导航菜单 /// 
 /// 所属 /// 树 public JsonResult GetTreeByEasyui(string id) { try { if (uInfo != null) { DataTable dt = new MenuBLL().GetUserMenuData( int.Parse(id)); List list = new List(); for (int i = 0; i 
 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 children { get; set; } }

3.dialog弹出窗口：

(1)内容页为iframe:

 //采用iframe框架 function ShowNews() { var content = ''; $("").dialog({ id: "News", content: content, title: "公告", height:600, width: 800, modal: true }); }

(2)内容页为div:

 //div function ShowNews() { $("").dialog({ id: "ui_news_dialog", title: "公告", href: "/News/ShowNews", height: 600, width: 800, modal: true, buttons: [{ id: "ui_AddNews_btn",//按钮ID text: '添 加', 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 中文帮助文档和扩展实例，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对本站网站的支持！

以上就是jQuery EasyUI API 中文帮助文档和扩展实例的详细内容，更多请关注本站其它相关文章！