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

前端之家收集整理的这篇文章主要介绍了jQuery EasyUI API 中文帮助文档和扩展实例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

下载地址:中文版.rar">jQuery EasyUI API 中文帮助文档

1.validateBox验证和提示框扩展:

= 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,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输出

后端:

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

功能导航'" style="width: 180px; background-color: white;">
dion" class="easyui-accordion">
关闭全部',handler:closeTab} ]">

JS:

dion() { $("#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,icon) { var strHtml = ''; $("
    ").dialog({ id: "News",content: content,title: "公告",height:600,width: 800,modal: true }); }

    (2)内容页为div:

    ").dialog({ id: "ui_news_dialog",href: "/News/ShowNews",height: 600,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 中文帮助文档和扩展实例。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

    原文链接:https://www.f2er.com/jquery/46983.html

    猜你在找的jQuery相关文章