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 相关文章推荐
判断iframe是否加载完成的完美方法
Jan 07 Javascript
Jquery练习之表单验证实现代码
Dec 14 Javascript
javascript常见用法总结
May 22 Javascript
充分发挥Node.js程序性能的一些方法介绍
Jun 23 Javascript
jquery中ajax处理跨域的三大方式
Jan 05 Javascript
jquery弹出框插件jquery.ui.dialog用法分析
Aug 20 Javascript
js数组常用最重要的方法
Feb 04 Javascript
element-ui 限制日期选择的方法(datepicker)
May 16 Javascript
Angular事件之不同组件间传递数据的方法
Nov 15 Javascript
vue+element表格导出为Excel文件
Sep 26 Javascript
vue实现输入一位数字转汉字功能
Dec 13 Javascript
JavaScript实现简单验证码
Aug 24 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中的Class的几点个人看法
2006/10/09 PHP
域名查询代码公布
2006/10/09 PHP
dedecms系统的广告设置代码 基础版本
2010/04/09 PHP
php中时间轴开发(刚刚、5分钟前、昨天10:23等)
2011/10/03 PHP
php匹配字符中链接地址的方法
2014/12/22 PHP
php编写的一个E-mail验证类
2015/03/25 PHP
简单谈谈PHP中的trait
2017/02/25 PHP
javascript+css 网页每次加载不同样式的实现方法
2009/12/27 Javascript
在一个js文件里远程调用jquery.js会在ie8下的一个奇怪问题
2010/11/28 Javascript
jquery插件splitScren实现页面分屏切换模板特效
2015/06/16 Javascript
innerHTML中标签可以换行的方法汇总
2015/08/14 Javascript
详解maxlength属性在textarea里奇怪的表现
2015/12/27 Javascript
jQuery基于扩展实现的倒计时效果
2016/05/14 Javascript
React组件中的this的具体使用
2018/02/28 Javascript
Vue页面骨架屏的实现方法
2018/05/22 Javascript
详解Webpack-dev-server的proxy用法
2018/09/08 Javascript
layer iframe 设置关闭按钮的方法
2019/09/12 Javascript
详解基于element的区间选择组件校验(交易金额)
2021/01/07 Javascript
[33:23]VG vs Pain 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python类和对象的定义与实际应用案例分析
2018/12/27 Python
python3.4中清屏的处理方法
2020/07/06 Python
关于html字符串正则判断和匹配的具体使用
2019/12/12 HTML / CSS
Under Armour澳大利亚官网:美国知名的高端功能性运动品牌
2018/02/22 全球购物
澳大利高级泳装品牌:Bondi Born
2018/05/23 全球购物
实习生个人找工作的自我评价
2013/10/30 职场文书
致全体运动员广播稿
2014/02/01 职场文书
学生干部学习的自我评价
2014/02/18 职场文书
小学生演讲稿大全
2014/04/25 职场文书
怀念母亲教学反思
2014/04/28 职场文书
乡镇领导干部个人对照检查材料思想汇报
2014/09/23 职场文书
工作疏忽检讨书500字
2014/10/26 职场文书
个人工作保证书
2015/02/28 职场文书
2015年初中生自我评价范文
2015/03/03 职场文书
计划生育工作总结2015
2015/04/03 职场文书
六一文艺汇演主持词
2015/06/30 职场文书
CSS 使用 resize 实现图片拖拽切换预览功能(强大功能)
2021/08/23 HTML / CSS