欢迎来到福编程网,本站提供各种互联网专业知识!

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

发布时间:2016-08-01 作者:码农-小菜鸟 来源:转载
这篇文章主要介绍了jQueryEasyUIAPI中文帮助文档和扩展实例的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下

下载地址: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}-))?(0d2,3|0d{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}-))?(0d2,3|0d{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+[ws]+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?22(?: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 < 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 中文帮助文档和扩展实例,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对全福编程网网站的支持!

    相关推荐