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


Posted in Javascript onAugust 01, 2016

下载地址: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: '两次输入的密码不一致!'
}
});

使用方法:(红色标记)

<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构造多层级目录一级选项卡菜单框架

如下图:

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

菜单树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({ //初始化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: "<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:

//div
function ShowNews() {
$("<div/>").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 中文帮助文档和扩展实例,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js直接编辑当前cookie的脚本
Sep 14 Javascript
GreyBox技术总结(转)
Nov 23 Javascript
js 控制下拉菜单刷新的方法
Mar 03 Javascript
详解JavaScript的策略模式编程
Jun 24 Javascript
JS代码随机生成姓名、手机号、身份证号、银行卡号
Apr 27 Javascript
jQuery 特性操作详解及实例代码
Sep 29 Javascript
解决vue.js在编写过程中出现空格不规范报错的问题
Sep 20 Javascript
js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能
Jan 09 Javascript
jQuery表单元素过滤选择器用法实例分析
Feb 20 jQuery
一些手写JavaScript常用的函数汇总
Apr 16 Javascript
在vue中实现给每个页面顶部设置title
Jul 29 Javascript
关于React Native 无法链接模拟器的问题
Jun 21 Javascript
AngularJS入门教程之ng-class 指令用法
Aug 01 #Javascript
Three.js学习之正交投影照相机
Aug 01 #Javascript
jQuery简单实现iframe的高度根据页面内容自适应的方法
Aug 01 #Javascript
JQuery之proxy实现绑定代理方法
Aug 01 #Javascript
AngularJS入门教程之ng-checked 指令详解
Aug 01 #Javascript
浅谈JavaScript中面向对象的的深拷贝和浅拷贝
Aug 01 #Javascript
Javascript OOP之面向对象
Jul 31 #Javascript
You might like
php面向对象全攻略 (十一)__toString()用法 克隆对象 __call处理调用错误
2009/09/30 PHP
php获取ip的三个属性区别介绍(HTTP_X_FORWARDED_FOR,HTTP_VIA,REMOTE_ADDR)
2012/09/23 PHP
php中钩子(hook)的原理与简单应用demo示例
2019/09/03 PHP
ie7+背景透明文字不透明超级简单的实现方法
2014/01/17 Javascript
简单易用的倒计时js代码
2014/08/04 Javascript
jquery实现鼠标滑过显示二级下拉菜单效果
2015/08/24 Javascript
jquery实现平滑的二级下拉菜单效果
2015/08/26 Javascript
深入浅出讲解ES6的解构
2016/08/03 Javascript
总结AngularJS开发者最常犯的十个错误
2016/08/31 Javascript
浅谈js键盘事件全面控制
2016/12/01 Javascript
使用Bootstrap Tabs选项卡Ajax加载数据实现
2016/12/23 Javascript
浅谈react.js 之 批量添加与删除功能
2017/04/17 Javascript
微信小程序自定义tabBar组件开发详解
2020/09/24 Javascript
ES6 Class中实现私有属性的一些方法总结
2019/07/08 Javascript
浅谈layer弹出层按钮颜色修改方法
2019/09/11 Javascript
Python获取单个程序CPU使用情况趋势图
2015/03/10 Python
Python基础篇之初识Python必看攻略
2016/06/23 Python
Python3.5编程实现修改IIS WEB.CONFIG的方法示例
2017/08/18 Python
使用python将图片按标签分入不同文件夹的方法
2018/12/08 Python
pandas.cut具体使用总结
2019/06/24 Python
Python求两点之间的直线距离(2种实现方法)
2019/07/07 Python
Python Pandas 箱线图的实现
2019/07/23 Python
pytorch实现查看当前学习率
2020/06/24 Python
详解Pymongo常用查询方法总结
2021/01/29 Python
澳大利亚排名第一的狂热牛仔品牌:ONETEASPOON
2018/11/20 全球购物
如何使用PHP session
2015/04/21 面试题
一套带答案的C++笔试题
2014/01/10 面试题
菜篮子工程实施方案
2014/03/08 职场文书
小学一年级数学教学计划
2015/01/20 职场文书
2016新年感言
2015/08/03 职场文书
酒吧七夕情人节宣传语
2015/11/24 职场文书
Django与数据库交互的实现
2021/06/03 Python
浅谈MySQL 亿级数据分页的优化
2021/06/15 MySQL
十大最强火系宝可梦,喷火龙上榜,第一名有双火属性
2022/03/18 日漫
Sql Server 行数据的某列值想作为字段列显示的方法
2022/04/20 SQL Server
instantclient客户端 连接oracle数据库
2022/04/26 Oracle