jQuery EasyUI API 中文帮助文档和扩展实例（jquery是框架还是库）-eolink官网

jQuery EasyUI API 中文帮助文档和扩展实例（jquery是框架还是库）

下载地址：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：

", 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 < 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 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是框架还是库）

Flask接口签名sign原理与实例代码浅析

zookeeper python接口实例详解

c#自定义Attribute获取接口实现示例代码

推荐文章

接口调用是什么意思？几种常用接口调用方式

接口设计原则

8款在线 API 接口文档管理工具

api管理系统是什么？

什么是接口调试？接口调试的步骤有哪些？

api 接口管理系统有哪些？

接口测试有几种测试方法

API文档生成工具有哪些？

微服务和api网关区别

交换机配置步骤

最近发表

热评文章

在线接口文档管理工具推荐，支持在线测试，HTTP接口

开源的在线接口文档wiki工具Mindoc的介绍与使

如何优雅的进行接口设计？接口设计的六大原则是什么？

什么是API测试,api检测公司

软件接口设计怎么做？前后端分离软件接口设计思路

接口管理平台推荐，几大接口管理平台总有一款适合你！