网站后台如何管理,网站怎么加站长统计,专门做西装网站,汕头好的建站网站带参提交一次查询#xff0c;从服务器加载新数据。这是一个神奇的方法
$(#dg).datagrid(load,{code: 01,name: name01
});easyui修改操作的回显方法 $(#standardForm).form(load,rows[0]); var toolbar [ {id : button-add,text : 增加,iconCls : icon-add,han…带参提交一次查询从服务器加载新数据。这是一个神奇的方法
$(#dg).datagrid(load,{code: 01,name: name01
});easyui修改操作的回显方法 $(#standardForm).form(load,rows[0]); var toolbar [ {id : button-add,text : 增加,iconCls : icon-add,handler : function(){$(#standardWindow).window(open);}}, {id : button-edit,text : 修改,iconCls : icon-edit,handler : function(){//判断选中记录数 调用数据表格方法 返回所有选定的行,当没有记录被选中,我将返回空数组。var rows $(#grid).datagrid(getSelections);console.info(rows);if(rows.length!1){$.messager.alert(系统信息,只能选中一条记录操作,warning);}else{//弹出修改标准窗口$(#standardWindow).window(open);//将修改数据回显在窗口中表单中隐藏域存放id//数据修改数据在rows数组 取第0个//form的load方法加载页面记录填充表单$(#standardForm).form(load,rows[0]);}}},{id : button-delete,text : 作废,iconCls : icon-cancel,handler : function(){alert(作废);}},{id : button-restore,text : 还原,iconCls : icon-save,handler : function(){alert(还原);}}]; input idvv classeasyui-validatebox data-optionsrequired:true,validType:email /
这时easyui的验证框,多用于后台管理系统表单的验证required为必填 email为邮箱的正则
注意:
不合法的表单如果采用传统的action methorpost方法提交也能提交,那校验就没有意义了
可以easyui的form组件
的validate方法
script typetext/javascript $(#save).click(function(){ var r $(#standardForm).form(validate); if(r){ $(#standardForm).submit(); } }) /script
如果验证通过才会提交
EasyUI和zTree使用方法和功能加到注解中了,方便查阅和复制 !DOCTYPE html
htmlheadmeta charsetUTF-8titleBOS管理系统 首页/titlelink hreffavicon.ico relicon typeimage/x-icon /!-- 导入jquery核心类库 --script typetext/javascript src./js/jquery-1.8.3.js/script!-- 导入easyui类库 --link ideasyuiTheme relstylesheet typetext/css href./js/easyui/themes/default/easyui.csslink relstylesheet typetext/css href./js/easyui/themes/icon.csslink relstylesheet typetext/css href./css/default.cssscript typetext/javascript src./js/easyui/jquery.easyui.min.js/script!-- 导入ztree类库 --link relstylesheet href./js/ztree/zTreeStyle.css typetext/css /script src./js/ztree/jquery.ztree.all-3.5.js typetext/javascript/scriptscript src./js/easyui/locale/easyui-lang-zh_CN.js typetext/javascript/script/head!-- easyui-layout进行总体页面布局 --body classeasyui-layoutdiv data-optionsregion:north,border:false styleheight:70px;padding:10px;divimg src./images/logo.png border0/divdiv idsessionInfoDiv styleposition: absolute;right: 5px;top:10px;[strong超级管理员/strong]欢迎你您使用[strong192.168.1.100/strong]IP登录/divdiv styleposition: absolute; right: 5px; bottom: 10px; !-- 两个easyui-menubutton组件的普通方法定义 --a hrefjavascript:void(0); classeasyui-menubutton data-optionsmenu:#layout_north_pfMenu,iconCls:icon-ok更换皮肤/aa hrefjavascript:void(0); classeasyui-menubutton data-optionsmenu:#layout_north_kzmbMenu,iconCls:icon-help控制面板/a/div!-- 上边两个easyui-menubutton组件的填充 --div idlayout_north_pfMenu stylewidth: 120px; display: none;div onclickchangeTheme(default);default/divdiv onclickchangeTheme(gray);gray/divdiv onclickchangeTheme(black);black/divdiv onclickchangeTheme(bootstrap);bootstrap/divdiv onclickchangeTheme(metro);metro/div/divdiv idlayout_north_kzmbMenu stylewidth: 100px; display: none;div onclickeditPassword();修改密码/divdiv onclickshowAbout();联系管理员/divdiv classmenu-sep/divdiv onclicklogoutFun();退出系统/div/div/divdiv data-optionsregion:west,split:true,title:菜单导航 stylewidth:200px!-- easyui-accordion手风琴组件 --div classeasyui-accordion fittrue borderfalsediv title基本功能 data-optionsiconCls:icon-mini-add styleoverflow:auto!-- zTree的依托标签 --ul idtreeMenu classztree/ul/divdiv title系统管理 data-optionsiconCls:icon-mini-add styleoverflow:autoul idadminMenu classztree/ul/div/div/divdiv data-optionsregion:centerdiv idtabs fittrue classeasyui-tabs borderfalsediv title消息中心 idsubWarp stylewidth:100%;height:100%;overflow:hidden!-- 网页中插入其他页面利器 --iframe src./home.html stylewidth:100%;height:100%;border:0;/iframe/div/div/divdiv data-optionsregion:south,border:false styleheight:50px;padding:10px;table stylewidth: 100%;tbodytrtd stylewidth: 400px;div stylecolor: #999; font-size: 8pt;BOSv2.0综合物流管理平台 | Powered by a hrefhttp://www.itcast.cn/传智播客/a/div/tdtd stylewidth: *; classco1span idonline stylebackground: url(./images/online.png) no-repeat left;padding-left:18px;margin-left:3px;font-size:8pt;color:#005590;在线人数:1/span/td/tr/tbody/table/div!--easyui的window组件 初始为关闭状态--div ideditPwdWindow classeasyui-window title修改密码 collapsiblefalse minimizablefalse modaltrue closedtrue resizablefalse maximizablefalse iconicon-save stylewidth: 300px; height: 160px; padding: 5px;background: #fafafadiv classeasyui-layout fittruediv regioncenter borderfalse stylepadding: 10px; background: #fff; border: 1px solid #ccc;table cellpadding3trtd新密码/tdtdinput idtxtNewPass typePassword classtxt01 //td/trtrtd确认密码/tdtdinput idtxtRePass typePassword classtxt01 //td/tr/table/divdiv regionsouth borderfalse styletext-align: right; height: 30px; line-height: 30px;a idbtnEp classeasyui-linkbutton iconicon-ok hrefjavascript:void(0)确定/aa idbtnCancel classeasyui-linkbutton iconicon-cancel hrefjavascript:void(0)取消/a/div/div/div!-- easyui-menu组件的右键菜单填充内容 --div idmm classeasyui-menu stylewidth:120px;div data-optionsname:Close关闭当前窗口/divdiv data-optionsname:CloseOthers关闭其它窗口/divdiv classmenu-sep/divdiv data-optionsiconCls:icon-cancel,name:CloseAll关闭全部窗口/div/divscript typetext/javascript
$(function() {/** 开始Ztree的设置*/var setting {data : {simpleData : { // 简单数据 enable : true}},//注意这里的callback回调一定不能卸载data中,他们是并列关系callback : {onClick : onClick}};//通过AJAX获取json数据生成zTree$.post(./data/menu.json,function(data){$.fn.zTree.init($(#treeMenu), setting, data);},json);//zTree可以根据一个setting生成多个$.post(./data/admin.json,function(data){$.fn.zTree.init($(#adminMenu), setting, data);},json);// 等待3秒后执行EasyUI中的messagerwindow.setTimeout(function(){$.messager.show({title:消息提示,msg:欢迎登录超级管理员 a hrefjavascript:void onclicktop.showAbout();联系管理员/a,timeout:5000});},3000);$(#btnCancel).click(function(){$(#editPwdWindow).window(close);});$(#btnEp).click(function(){alert(修改密码);});// 设置全局变量 保存当前正在右键的tabs 标题 var currentRightTitle ;// 为选项卡添加右键菜单 easyui的tabs的onContextMenu事件三个参数$(#tabs).tabs({onContextMenu : function(e,title,index){currentRightTitle title ; //easyui中menu的show方法$(#mm).menu(show, { left: e.pageX,top: e.pageY });e.preventDefault(); // 禁用原来的右键效果 }});//easyui中menu的点击事件$(#mm).menu({ onClick:function(item){ if(item.nameClose){$(#tabs).tabs(close,currentRightTitle);}else if(item.name CloseOthers){//返回所有tabs选项卡var tabs $(#tabs).tabs(tabs);$(tabs).each(function(){if($(this).panel(options).title ! 消息中心 $(this).panel(options).title ! currentRightTitle){$(#tabs).tabs(close,$(this).panel(options).title);}});}else if(item.name CloseAll){var tabs $(#tabs).tabs(tabs);$(tabs).each(function(){if($(this).panel(options).title ! 消息中心){$(#tabs).tabs(close,$(this).panel(options).title);}});}} });
});function onClick(event, treeId, treeNode, clickFlag) {// 判断树菜单节点是否含有 page属性if (treeNode.page!undefined treeNode.page! ) {if ($(#tabs).tabs(exists, treeNode.name)) {// 判断tab是否存在$(#tabs).tabs(select, treeNode.name); // 切换tab} else {// 开启一个新的tab页面var content div stylewidth:100%;height:100%;overflow:hidden; iframe src treeNode.page scrollingauto stylewidth:100%;height:100%;border:0; /iframe/div;$(#tabs).tabs(add, {title : treeNode.name,content : content,closable : true,tools:[{ iconCls:icon-reload, // 刷新按钮handler : function(){var tab $(#tabs).tabs(getTab,treeNode.name);$(iframe[src treeNode.page ]).get(0).contentWindow.location.reload(true);}}] });}}
}/*******顶部特效 *******/
/*** 更换EasyUI主题的方法* param themeName* 主题名称*/
changeTheme function(themeName) {var $easyuiTheme $(#easyuiTheme);var url $easyuiTheme.attr(href);var href url.substring(0, url.indexOf(themes)) themes/ themeName /easyui.css;$easyuiTheme.attr(href, href);var $iframe $(iframe);if ($iframe.length 0) {for ( var i 0; i $iframe.length; i ) {var ifr $iframe[i];$(ifr).contents().find(#easyuiTheme).attr(href, href);}}
};
// 退出登录
function logoutFun() {$.messager.confirm(系统提示,您确定要退出本次登录吗?,function(isConfirm) {if (isConfirm) {location.href ./login.html;}});
}
// 修改密码
function editPassword() {$(#editPwdWindow).window(open);
}
// 版权信息
function showAbout(){$.messager.alert(bos v2.0综合物流管理平台,设计: 传智播客br/ 管理员邮箱: itcast_search163.com br/);
}
/script/body
/html 更多专业前端知识请上
【猿2048】www.mk2048.com
