做存储各种环境信息的网站,页面跳转的方式有哪些,杭州竞彩网站开发,网络页面设计公司2019独角兽企业重金招聘Python工程师标准 引言 一个不得不说的话题#xff0c;经过近几年的发展#xff0c;Web前端开发已经不是一个新有的岗位了#xff0c;前端技术发展非常迅速#xff0c;技术更新换代也很快#xff0c;对于前端工程师来说是一个很大的挑… 2019独角兽企业重金招聘Python工程师标准 引言 一个不得不说的话题经过近几年的发展Web前端开发已经不是一个新有的岗位了前端技术发展非常迅速技术更新换代也很快对于前端工程师来说是一个很大的挑战“挣扎期”。 从统计来看中级前端的待遇是略高于中级后端的。这对于中小企业、创业公司来说组建一个专有的前端团队还是很一件很不容易的事情无形中增加了人力成本 话说招前端工程师简单但能招聘到合适的前端工程师来说是一件非常不容易的事情。 为了解决这个事情中小企业、创业公司都在思考一个问题做企业应用软件如果不去组建专门的前端团队能有一个很好的开发平台很好的框架让后端工程师具备一些基本的前端知识就可以去做出很漂亮的界面就好了。 这个想法很好但是你会说可能吗会一点基础前端就能做好吗专业的事情还是有专业的人来做前后端分离是趋势表现逻辑分离意义很大。没有绝对完美的事情尽管种种诱惑唯心自问合适自己吗我不否认这还要针对产品、针对项目来选择解决方案。但JeeSite的中心思想是快速快发快速交付控制成本对于一个想快速交付项目来说不见得是一件好事。 重口难调也许你不赞同这些看法作者欢迎提问当然你也可以将JeeSite完全作为服务端代码快速提供数据接口自由实现或选型一套前端UI。 好了既然是奔着快速交付控制成本来的我们就依这个角度去思考方案 第一技术选型 Spring MVC Beetl jQuery Bootstrap优势很明显不多说下面章节简要说下第二开发一些常用函数库如字符串工具类集合工具类映射转换工具类配置工具类权限用户工具类等第三封装一些常用表单控件参考Spring MVC的form标签实现更便捷的输入框、下拉框、单选、复选等自动进行数据绑定第四封装一些常用表单组件如多级树结构选择组件列表选择组件文件上传组件验证码生成组件等等第五封装一些常用JS类库如动态加载对话框消息框加载框JS模板Ajax格式化动态Tab等待第六封装一个JS数据表格组件DataGrid分页排序多表头分组子表冻结小计合计编辑行树表表格等第七丰富例子如Box盒子、表单布局、栅格布局、图表等等模板语言界定符选择 Beetl模板语言类似JS语言和习俗只需要将Beetl语言放入定界符号里即可如默认的是% %那JeeSite是怎样选择的呢 设想定义% % 优点jsp标准定界符比较容易被理解是后端运行的语法 缺点html后缀的模板不能和html标签混用否则IDE会提示语法错误 设想定义 回车符 优点简单 缺点多行beetl语法时比较麻烦并且会出现多余的很多空格空行 设想定义[ ]、[ ]、[ ] 有点可以和html混用 缺点与js的[]冲突必须使用\转义 **设想定义[ ]、[# #]、# #、 ** 优点基本没有标示符冲突 缺点感官、阅读、写法稍微差点 设想定义!--# --、!--: -- 优点使用html注释没有标示符冲突 缺点使用IDE高亮时没有写代码的感觉像是在写注释 最终选择% % 经过上述分析最终还是回归默认使用jsp标准定界符%%来作为模板语言的定界符一方同比较容易被理解明确是后端运行的语法另一方面冲突少边界比较好界定 写一个通用布局的页面 % layout(/layouts/default.html, {title: 菜单管理, libs: [validate], bodyClass: }){ %
div classmain-contentdiv classbox box-maindiv classbox-header with-borderdiv classbox-titlei classfa icon-book-open/i 菜单管理/divdiv classbox-tools pull-rightbutton typebutton classbtn btn-box-tool data-widgetcollapsei classfa fa-minus/i/button/div/divdiv classbox-body/divdiv classbox-footer/div/div
/div
% } %调用默认布局 /layouts/default.html自动引入页面头部和尾部内容通过参数设置要加载的css和js类库参数如下 title参数 设置页面的标题名字 libs参数 设置页面要引入的css和js类库支持类库如下 默认引入layer、select2、WdatePicker zTree树结构控件tabPage动态页签插件dataGrid数据表格组件validate表单验证组件inputmask表单格式化工具fileupload文件上传插件ueditor富文本编辑器控件bodyClass参数 设置body的class属性值 定义常用函数库 常用工具类导入 以下工具类可通过类型快速调用如${Global.getConfig(key)} Global全局配置类全局常量读取属性文件参数值等EncodeUtils封装各种格式的编码解码工具类HEX、Base64、HTML、URL、XSS过滤、SQL过滤等ListUtilsList常用工具类继承Apache的ListUtilsNew工具、快速提取属性值、类型转换等MapUtilsMap常用工具类继承Apache的MapUtilsNew工具、Map与Bean互转等SetUtilsSet常用工具类继承Apache的SetUtilsNew工具等IdGenerate封装各种生成唯一性ID算法的工具类生成LongUUIDStringUUIDCode生成等ByteUtils字节转换工具DateUtils日期工具类继承Apache的DateUtilsNumberUtilsBigDecimal工具类继承Apache的NumberUtils类ObjectUtils对象操作工具类继承Apache的ObjectUtils类StringUtils字符串工具类继承Apache的StringUtils类TimeUtils时间计算工具类xx天xx时xx分xx秒刚刚xx秒xx分钟xx小时前、xx天前WorkDayUtils工作日计算工具类计算日期直接的工作日等BeanMapper简单封装Dozer对象数据映射JaxbMapperJaxb实现XML与Java Object的转换JsonMapper简单封装Jackson实现Json与Java Object的转换ClassUtilsClass扫描工具类根据接口查询类根据继承查询类等ReflectUtils反射工具类方便进行getter/setter方法, 访问私有变量, 调用私有方法ModuleUtils模块工具类方便获取系统模块信息UserUtils用户工具类方便获取进行用户及相关信息以下是Beetl函数及扩展函数 date返回一个java.util.Date类型的变量如 date() 返回一个当前时间(对应java的java.util.Date); ${date( 2011-1-1 , yyyy-MM-dd )} 返回指定日期print打印一个对象 print(user.name);println打印一个对象以及回车换行符号回车换号符号使用的是模板本身的而不是本地系统的.如果仅仅打印一个换行符则直接调用println() 即可nvl函数nvl如果对象为null则返回第二个参数否则返回自己 nvl(user,不存在)isEmpty判断变量或者表达式是否为空变量不存在变量为null变量是空字符串变量是空集合变量是空数组此函数都将返回trueisNotEmpty同上判断对象是否不为空has变量名为参数判断是否存在此全局变量如 has(userList),类似于1.x版本的exist(userList),但不需要输入引号了assert如果表达式为false则抛出异常trim截取数字或者日期返回字符,如trim(12.456,2)返回12.45,trim(date,yyyyy)返回2017trunc截取数字保留指定的小数位如trunc(12.456,2) 输出是12.45.不推荐使用因为处理float有问题兼容原因保留了decode一个简化的if else 结构如 decode(a,1,a1,2,a2,不知道了)},如果a是1这decode输出a1,如果a是2则输出a2, 如果是其他值则输出不知道了debug在控制台输出debug指定的对象以及所在模板文件以及模板中的行数如debug(1),则输出1 [在3行/org/beetl/core/lab/hello.txt],也可以输出多个如debug(hi,a),则输出hi,a123,[在3行/org/beetl/core/lab/hello.txt]range接收三个参数初始值结束值还有步增可以不需要则默认为1返回一个Iterator常用于循环中如for(var i in range(1,5)) {print(i)},将依次打印1234.flush强制io输出。pageCtx仅仅在web开发中设置一个变量然后可以在页面渲染过程中调用此api获取如pageCtx(title,用户添加页面)在其后任何地方可以pageCtx(title) 获取该变量cookie返回指定的cookie对象 如var userCook cookie(user), allCookies cookie();isBlank判断对象是否是一个空字符串${isBlank(str)}isNotBlank判断对象是否不是一个空字符串${isBlank(str)}toJson将对象转Json字符串${toJson(Object)}fromJson将Json字符串转换为对象${fromJson(Object)}hasPermi判断是否有改权限单个权限验证${hasPermi(sys:user:edit)}多个AND关系${hasPermi(sys:user:view,sys:user:edit, and)}; 多个OR关系${hasPermi(sys:user:view,sys:user:edit, or)}cookie获取cookie值${cookie(name, isRemove)}数据类型格式化 日期格式化 Today is ${date,dateFormatyyyy-MM-dd}
Today is ${date,dateFormat}
如果date为日期类型可简写
${date,“yyyy-MM-dd”}数值格式化 Salary is ${salary,numberFormat##.##}基本控件封装类似Spring MVC表单标签) form 表单标签 生成一个form标签支持指定model属性类似SpringMVC的form:form modelAttribute/标签的属性自动给表单内的控件绑定属性值
#form:form idinputForm model${user} action${ctx}/sys/user methodPOST classform-horizontal表单内容
/#form:form
支持上传文件
#form:form idinputForm model${user} action${ctx}/sys/user methodPOST enctypemultipart/form-data classform-horizontal表单内容
/#form:form控件属性 var p {// 标签参数id: id!, // 表单IDmodel: model!, // 绑定Model对象例如${user!}action: action!, // 表单请求地址method: method!, // 请求方法默认 postenctype: enctype!, // 发送之前进行数据编码上传文件时指定multipart/form-data};input 输入框标签 自动绑定form:form上指定的model下的userName属性类似SpringMVC的form:input path/标签的属性
#form:input pathuserName maxlength100 classform-control required /
日期格式化
#form:input pathuserName maxlength100 dataFormatdate classform-control required /
数值格式化
#form:input pathuserName maxlength100 dataFormatnumber classform-control required /
不自动绑定把path改为name就可以
#form:input nameuserName value${user.userName} maxlength100 classform-control required /控件属性 var p {// 标签参数id: id!, // 元素ID如果不填写则与name相同path: path!, // 绑定form上model中属性的值name: name!, // 元素名称不填写value: value!, // 元素值type: type!text, // 元素的类型默认textdataFormat: dataFormat!, // 数据格式化支持如下值// date: 日期// datetime: 日期时间// number: 数值类型保留2位小数};select 下拉框标签 根据字典类型设置下拉数据
#form:select pathuserType dictTypesys_user_type classform-control required /
增加一个空白选项
#form:select pathroleType dictTypesys_role_type blankOptiontrue classform-control /
多选下拉列表
#form:select pathroleType dictTypesys_role_type multipletrue classform-control /
手动设置下拉框值类似SrpingMVC的form:options items itemLabel itemValue/标签的属性
#form:select pathmoduleCodes items${moduleList} itemLabelmoduleName itemValuemoduleCode classform-control required /控件属性 var p {// 标签参数id: id!, // 元素ID如果不填写则与name相同path: path!, // 绑定form上model中属性的值name: name!, // 元素名称不填写value: value!, // 元素值dictType: dictType!, // 字典类型从字典里获取自动设置items、itemLabel、itemValueitems: items![], // 列表数据可接受对象集合如ListDictDataitemLabel: itemLabel!, // 指定列表数据中的什么属性名作为option的标签名itemValue: itemValue!, // 指定列表数据中的什么属性名作为option的value值multiple: multiple!false, // 是否为多选框blankOption: ObjectUtils.toBoolean(blankOption!false), // 是否默认有个空白选择项目};radio 输入框标签 类似#form:select/标签的使用方法
#form:radio pathmenuType dictTypesys_menu_type classform-control required /控件属性 var p {// 标签参数id: id!, // 元素ID如果不填写则与name相同path: path!, // 绑定form上model中属性的值name: name!, // 元素名称不填写value: value!, // 元素值dictType: dictType!, // 字典类型从字典里获取自动设置items、itemLabel、itemValueitems: items!([]), // 列表数据可接受对象集合如ListDictDataitemLabel: itemLabel!, // 指定列表数据中的什么属性名作为option的标签名itemValue: itemValue!, // 指定列表数据中的什么属性名作为option的value值};checkbox 复选框标签 类似#form:select/标签的使用方法后台接受moduleCodes为字符串选择多个自动使用“,”分隔相比SpringMVC必须是List方便的多
#form:checkbox pathmoduleCodes items${moduleList} itemLabelmoduleName itemValuemoduleCode classform-control required /
生成一个复选框按钮后台接受replaceFile为Global.YES或Global.NO值
#form:checkbox pathreplaceFile label是否替换现有文件 classform-control/控件属性 var p {// 标签参数id: id!, // 元素ID如果不填写则与name相同path: path!, // 绑定form上model中属性的值name: name!, // 元素名称不填写value: value!, // 元素值dictType: dictType!, // 字典类型从字典里获取自动设置items、itemLabel、itemValueitems: items!([]), // 列表数据可接受对象集合如ListDictDataitemLabel: itemLabel!, // 指定列表数据中的什么属性名作为option的标签名itemValue: itemValue!, // 指定列表数据中的什么属性名作为option的value值label: label!, // 只有一个复选按钮的情况下设置};textarea 文本域标签 #form:textarea pathremarks rows3 maxlength200 classform-control/控件属性 var p {// 标签参数id: id!, // 元素ID如果不填写则与name相同path: path!, // 绑定form上model中属性的值name: name!, // 元素名称不填写value: value!, // 元素值};hidden 隐藏域标签 #form:hidden pathmenuCode /控件属性 var p {// 标签参数id: id!, // 元素ID如果不填写则与name相同path: path!, // 绑定form上model中属性的值name: name!, // 元素名称不填写value: value!, // 元素值type: type!hidden, // 元素的类型默认hidden};表单组件封装 treeselect 树结构选择 封装layerzTree实现树结构选择组件使用场景如部门选择行政区划选择栏目列表选择等 #form:treeselect idparent title上级菜单nameparent.id value${menu.parent.id!}labelNameparent.menuName labelValue${menu.parent.menuName!}url${ctx}/sys/menu/treeData?excludeCode${menu.menuCode}sysCode${menu.sysCode}isShowCode2class allowCleartrue canSelectRoottrue canSelectParenttrue/组件属性 var p {// 标签参数id: id!, // 元素IDname: name!, // 隐藏域名称value: value!, // 隐藏域值labelName: labelName!, // 标签框名称labelValue: labelValue!, // 标签框值class: class!, // 标签框的CSS类名placeholder: placeholder!, // 标签框的预期值的提示信息dataMsgRequired: thisTag.attrs[data-msg-required], // 必填错误提示信息btnClass: btnClass!, // 标签框后面的按钮CSS类名title: title!选项, // 对话框标题boxWidth: boxWidth!300, // 对话框宽度默认300像素boxHeight: boxHeight!400, // 对话框高度默认400像素url: url!, // 树结构数据源地址 [{id, pid, name}]readonly: ObjectUtils.toBoolean(readonly!false), // 是否只读模式allowInput: ObjectUtils.toBoolean(allowInput!false), // 是否允许label框输入allowClear: ObjectUtils.toBoolean(allowClear!true), // 是否允许清空选择内容checkbox: ObjectUtils.toBoolean(checkbox!false), // 是否显示复选框是否支持多选如果设置canSelectParenttrue则返回父节点数据expandLevel: ObjectUtils.toInteger(expandLevel!(-1)), // 默认展开层次级别默认:如果有1个根节点则展开一级节点否则不展开canSelectRoot: ObjectUtils.toBoolean(canSelectRoot!false), // 可以选择跟节点canSelectParent: ObjectUtils.toBoolean(canSelectParent!false), // 可以选择父级节点returnFullName: ObjectUtils.toBoolean(returnFullName!false), // 是否返回全路径包含所有上级信息以 returnFullNameSplit 参数分隔returnFullNameSplit: returnFullNameSplit!/, // 是否返回全路径的分隔符默认“/”};iconselect 图标选择 #form:iconselect pathmenuIcon class/组件属性 var p {// 标签参数id: id!, // 元素ID如果不填写则与name相同path: path!, // 绑定form上model中属性的值name: name!, // 元素名称不填写value: value!, // 元素值class: class!, // 隐藏域和标签框的CSS类名};validcode 验证码 #form:validcode namevalidCode isRequiredtrue isRemotetrue /组件属性 var p {id: id!name, // 验证码输入框IDname: name!, // 验证码输入框名称必填isRequired: ObjectUtils.toBoolean(isRequired!true), // 是否必填默认必填dataMsgRequired: thisTag.attrs[data-msg-required], // 必填错误提示信息isRemote: ObjectUtils.toBoolean(isRemote!true), // 是否支持实时远程验证dataMsgRemote: thisTag.attrs[data-msg-remote], // 必填错误提示信息isLazy: ObjectUtils.toBoolean(isLazy!false), // 是否懒加载验证码图片原noRefresh参数};listselect 列表选择 #form:listselect iduserSelect title用户url${ctx}/sys/user/userSelect?userType${role.userType} allowClearfalse checkboxtrue itemCodeuserCode itemNameuserName/组件属性 var p {// 标签参数id: id!, // 元素IDpath: path!, // 绑定form上model中属性的值name: name!, // 隐藏域名称value: value!, // 隐藏域值labelPath: labelPath!, // 绑定form上model中属性的值labelName: labelName!, // 标签框名称labelValue: labelValue!, // 标签框值class: class!, // 标签框的CSS类名placeholder: placeholder!, // 标签框的预期值的提示信息dataMsgRequired: thisTag.attrs[data-msg-required], // 必填错误提示信息btnClass: btnClass!, // 标签框后面的按钮CSS类名title: title!选项, // 对话框标题boxWidth: boxWidth!$(top.window).width() - 100, // 对话框宽度boxHeight: boxHeight!$(top.window).height() - 100, // 对话框高度 url: url!, // 树结构数据源地址 [{id, pid, name}]readonly: ObjectUtils.toBoolean(readonly!false), // 是否只读模式allowInput: ObjectUtils.toBoolean(allowInput!false), // 是否允许label框输入allowClear: ObjectUtils.toBoolean(allowClear!true), // 是否允许清空选择内容checkbox: ObjectUtils.toBoolean(checkbox!false), // 是否显示复选框是否支持多选如果设置canSelectParenttrue则返回父节点数据itemCode: itemCode!, // 选择后结果集中的Code属性名返回到隐藏域的值itemName: itemName!, // 选择后结果集中的Name属性名返回到输入框的值};fileupload 文件上传 1、文件上传
#form:fileupload idupload1 bizKey${user.id} bizTypeuser_upload1uploadTypeall classrequired readonlyfalse/
后台代码FileUploadUtils.saveFileUpload(user.getId(), user_upload1);2、图片上传
#form:fileupload idupload2 bizKey${user.id} bizTypeuser_upload2uploadTypeimage classrequired readonlyfalse/
后台代码FileUploadUtils.saveFileUpload(user.getId(), user_upload2);3、返回路径
#form:fileupload idupload3 returnPathtruefilePathInputIdupload3Path fileNameInputIdupload3NameuploadTypeimage readonlyfalse maxUploadNum3 isMinifalse/
#form:input nameupload3Path classform-control/
#form:input nameupload3Name classform-control/组件属性 var p {// 标签参数id: id!, // 元素IDbizKey: bizKey!, // 业务表的主键值与附件关联的业务数据bizType: bizType!, // 业务表的上传类型全网唯一推荐格式实体名_上传类型例如文章图片article_photoreturnPath: ObjectUtils.toBoolean(returnPath!false), // 是否是返回文件路径到输入框默认false可将路径直接保存到某个字段里filePathInputId: filePathInputId!, // 设置文件URL存放的输入框的ID当returnPath为true的时候返回文件URL到这个输入框fileNameInputId: fileNameInputId!, // 设置文件名称存放的输入框的ID当returnPath为true的时候返回文件名称到这个输入框uploadType: uploadType!, // 上传文件类型all、file、image、media若不设置则自动根据上传文件后缀获取class: class!, // 标签框的CSS类名设置 required 加入必填验证readonly: ObjectUtils.toBoolean(readonly!false), // 是否只读模式只读模式下为查看模式只允许下载allowSuffixes: allowSuffixes!, // 允许上传的后缀前台的限制不能超越file.*AllowSuffixes的设置例如.jpg,.png,maxUploadNum: ObjectUtils.toInteger(maxUploadNum!300), // 多文件下允许最多上传几个默认300个设置-1代表不限制imageMaxWidth: ObjectUtils.toInteger(imageMaxWidth!1024), // 图片压缩最大宽度uploadType为image生效设置-1代表不做任何处理imageMaxHeight: ObjectUtils.toInteger(imageMaxHeight!768), // 图片压缩最大宽度uploadType为image生效设置-1代表不做任何处理isLazy: ObjectUtils.toBoolean(isLazy!false), // 设置为ture需要点击上传按钮才上传文件否则选择后就直接上传isMini: ObjectUtils.toBoolean(isMini!false), // 是否是精简上传窗口无边距无边框preview: preview!, // 是否显示预览按钮接受参数weboffice};imageclip 图片裁剪 img idavatarImg classprofile-user-img img-responsive img-circlesrc${user.getAvatarUrl().replaceFirst(/ctxPath, ctxPath)}
#form:imageclip nameimageBase64 btnText修改头像 btnClassbtn-blockimageIdavatarImg imageDefaultSrc${ctxStatic/images/user1.jpg}circletrue/
后台代码
// 如果设置了头像则保存头像
if (StringUtils.isNotBlank(imageBase64)){if (EMPTY.equals(imageBase64)){user.setAvatar(StringUtils.EMPTY);}else{String imageUrl avatar/user.getUserCode().FileUtils.getFileExtensionByImageBase64(imageBase64);String fileName Global.getUserfilesBaseDir(imageUrl);FileUtils.writeToFileByImageBase64(fileName, imageBase64);user.setAvatar(Global.USERFILES_BASE_URL imageUrl);}
}组件属性 var p {// 标签参数id: id!, // 元素ID如果不填写则与name相同path: path!, // 绑定form上model中属性的值name: name!, // 元素名称不填写value: value!, // 元素值class: class!, // 隐藏域的CSS类名btnText: btnText!选择图片, // 按钮的名字btnClass: btnClass!, // 按钮的CSS类名imageId: imageId!, // 裁剪后base64返回到img的idimageDefaultSrc: imageDefaultSrc!, // 图片默认地址清除后使用地址circle: circle!false, // 是否圆形图片};ueditor 富文本在线编辑器 #form:ueditor nametext maxlength10000 height200 classrequiredsimpleToolbarsfalse readonlyfalse outlinefalse/组件属性 var p {// 标签参数id: id!, // 元素ID如果不填写则与name相同path: path!, // 绑定form上model中属性的值name: name!, // 元素名称不填写value: value!, // 元素值class: class!, // 标签框的CSS类名设置 required 加入必填验证maxlength: maxlength!, // 编辑器最大输入字数为空代表无限制height: height!200, // 编辑器的高度默认200simpleToolbars: ObjectUtils.toBoolean(simpleToolbars!false), // 是否是简单的工具条readonly: ObjectUtils.toBoolean(readonly!false), // 是否只读模式outline: ObjectUtils.toBoolean(outline!false), // 大纲视图options: options!, // UE附加选项逗号隔开。};封装通用JavaScript方法
/*** 输出日志*/
log(msg);/*** 输出错误日志*/
error(msg);/*** URL 编码*/
js.encodeUrl(url);/*** URL 解码*/
js.decodeUrl(url);/*** 得到 IE 版本如果是IE返回IE版本号否则返回false* if (js.ie js.ie 8){ alert(浏览器版本过低) }*/
js.ie;/*** 安全取值复杂类型或嵌套类型时取不到属性中的属性时不抛出异常* js.val(jsonObj, user.office.name);*/
js.val(jsonObj, attrName);/*** 返回HashCode唯一值默认忽略大小写* param str 要获取的字符串HashCode值* param caseSensitive 是否大小写敏感默认false* usage js.hashCode(str);*/
js.hashCode(str, caseSensitive);/*** 异步加载文件loadFile v1.0* js.loadFile(file文件路径, callback成功回调, error失败回调)* js.loadFile(js/test.js,function(){},function(data){});* js.loadFile([js/test.js,css/test.css],function(){},function(data){});*/
js.loadFile(file, callback, error);/*** 打开一个Window窗体*/
js.windowOpen(url, name, width, height);/*** 关闭当前Window窗体*/
js.windowClose();/*** 给URL地址添加参数如果原来有参数则用前缀如果没有则用?前缀*/
js.addParam(url, params);/*** 获取URL地址的参数*/
js.getParam(paramName, url);/*** 查看Object的内容手机调试用* param obj*/
js.alertObj(obj);/*** 获取字典标签* js.getDictLabel(${DictUtils.getDictListJson(sys_menu_type)}, val, 未知, true)*/
js.getDictLabel(dictListJson, value, defaultValue, inCss);/// message dialog/*** 显示加载框* param message 加载框提示信息* param ignoreMessageIfExists 如果已经有加载框现在则忽略message信息的设置* usage js.loading(正在保存...);*/
js.loading(message, ignoreMessageIfExists);/*** 关闭加载框* param timeout 关闭延迟时间* param forceClose 是否强制关闭* usage js.closeLoading(1000, true);*/
js.closeLoading(timeout, forceClose);/*** 得到layer对话框对象* js.layer.msg();*/
js.layer;/*** 显示提示框* param message 提示消息* param title 提示标题* param type 提示类型success、error、warning、info* param timeout 自动关闭毫秒默认4000毫秒*/
js.showMessage(message, title, type, timeout);/*** 显示错误提示框*/
js.showErrorMessage(responseText);/*** 关闭提示框*/
js.closeMessage();/*** 提示对话框* param message 提示消息* param options 对话框选项* param closed 对话框关闭回调方法* usage js.alert(你好, function(){})* usage js.alert(你好, {icon: 2}, function(){})*/
js.alert(message, options, closed);/*** 确认对话框* param message 确认信息* param urlOrFun 确认后的跳转的地址或调用的方法* param data 如果urlOrFun是地址该参数是调用地址的参数信息* param callback 执行ajax的回调方法如果为空则直接通过locationurlOrFun跳转。* param dataType 返回数据类型默认json* param async 是否异步默认true* param loadingMessage 调用loading(loadingMessage)的提示信息。* usage js.confirm(确认删除吗, $ctx/biz/delete?id123, function(data){alert(删除成功)}, json, true, 正在删除...);* usage js.confirm(确认删除吗, $ctx/biz/delete, {id: 123}, function(data){alert(删除成功)}, json, true, 正在删除...);* usage js.confirm(确认删除吗, function(data){alert(删除成功)});*/
js.confirm(message, urlOrFun, data, callback, dataType, async, loadingMessage);/// js template/*** 根据js模板生成代码使用laytpl引擎* param id 模板ID* param data 模板数据可选* param callback 如果填写则为异步渲染* usage * 模板格式 sc ript iddempTpl typetext/template//!--* 这里写模块内容...* //--/sc ript* 调用方法 js.template(dempTpl, data);* 模版语法* 输出一个普通字段不转义html {{ d.field }}* 输出一个普通字段并转义html {{ d.field }}* JavaScript脚本 {{# JavaScript statement }}*/
js.template(id, data, callback);/// ajax form/*** AJAX 提交* js.ajaxSubmit(/sys/user/save, {param: 1}, function(data){})*/
js.ajaxSubmit(url, data, callback, dataType, async, message);/*** AJAX 提交表单支持文件上传* js.ajaxSubmitForm($(form), function(data){})*/
js.ajaxSubmitForm(formJqueryObj, callback, dataType, async, message);/// string/*** String两边去空格*/
js.trim(str);/*** String的startWith*/
js.startWith(str, start);/*** String的endWith*/
js.endWith(str, end);/*** 截取字符串区别汉字和英文*/
js.abbr(name, maxLength);/// number/*** 格式化数值* param num 待格式化的树* param cent 保留小数位数* param isThousand 是否进行千分位格式化*/
js.formatNumber(num, cent, isThousand);/*** 金额格式化千位符小数四舍五入金额每隔三位加一个逗号* param s 要格式化的数值* param n 小数位数*/
js.formatMoney(s, n);/*** 数值前补零*/
js.numberPad(num, n);/// date/*** 日期格式化* param date 日期 new Date()* param f 格式化字符串 yyyy-MM-dd HH:mm:ss*/
js.formatDate(date, f);/*** 字符串转为日期* param date*/
js.parseDate(date);/*** 日期加减* param date* param dadd 天数*/
js.addDate(date, dadd);/*** 快速选择日期方法* param type 1今日2本周3本月4本季度5上月* param beginDateId 开始日期控件的ID* param endDateId 结束日期控件的ID*/
js.quickSelectDate(type, beginDateId, endDateId);/// cookie/*** cookie 操作* param name Cookie名称* param value Cookie值填写表示设置不填写表示获取* parma options:{expires:7} 如果是数字则expires单位为天。*/
js.cookie(name, value, options);/// tabPage/*** 得到TabPage对象*/
js.tabPage;/*** 初始化TAB页面* param id*/
js.initTabPage(id, options);/*** 添加TAB页面* param $this 点击的对象* param title 提示标题* param url 访问的路径* param closeable 是否有关闭按钮* param refresh 打开后是否刷新重新加载*/
js.addTabPage($this, title, url, closeable, refresh);/*** 获取当前TAB页面* param currentTabCallback(contents, contentWindow) 当前页面回调方法传入当前tab页面的contents和contentWindow*/
js.getCurrentTabPage(currentTabCallback);/*** 获取当前页面的上一个TAB页面并激活上级页面* param preTabCallback(contents, contentWindow) 传入上一个tab页面的contents和contentWindow* param isCloseCurrentTab 是否关闭当前页签*/
js.getPrevTabPage(preTabCallback, isCloseCurrentTab);/*** 关闭当前TAB页面并激活上级页面* param preTabCallback(contents, contentWindow) 关闭前的回调方法传入上一个tab页面的contents和contentWindow*/
js.closeCurrentTabPage(preTabCallback);封装数据表格组件DataGrid 数据表格是一个必不可少的元素在选择这个选型的时候尝试了很多开源组件最终选择jqGrid只是因为它接近经典思维用着还算顺手最主要的是遇见什么问题都可以自行解决和修复问题有人说jqGrid不好看这没关系这完全而已自行编写CSS改造它下面看看一个简单的例子 #form:form idsearchForm model${config} action${ctx}/sys/config/listData methodpost classform-inline data-page-no${parameter.pageNo} data-page-size${parameter.pageSize} data-order-by${parameter.orderBy}参数名称#form:input pathconfigName maxlength100 classform-control /参数键名#form:input pathconfigKey_like maxlength100 classform-control /button typesubmit classbtn btn-primary btn-sm查询/buttonbutton typereset classbtn btn-default btn-sm重置/button
/#form:form
table iddataGrid/table
div iddataGridPage/div// 初始化DataGrid对象
$(#dataGrid).dataGrid({// 查询数据表单searchForm: $(#searchForm),// 设置数据表格列columnModel: [ {header:参数名称, name:configName, index:a.config_name, width:200, formatter: function(val, obj, row, act){return a href${ctx}/sys/config/form?idrow.id classbtnList data-title编辑参数val/a;}},{header:参数键名, name:configKey, index:a.config_key, width:200},{header:参数键值, name:configValue, sortable:false, width:260, classes:nowrap},{header:操作, name:actions, width:100, sortable:false, title:false, formatter: function(val, obj, row, act){var actions [];% if(hasPermi(sys:config:edit)){ %actions.push(a href${ctx}/sys/config/form?idrow.id classbtnList title编辑参数i classfa fa-pencil/i/anbsp;);% } %% if(hasPermi(sys:config:delete)){ %actions.push(a href${ctx}/sys/config/delete?idrow.id classbtnList title删除参数 data-confirm确认要删除该参数吗i classfa fa-trash-o/i/anbsp;);% } %return actions.join();}}],// 加载成功后执行事件ajaxSuccess: function(data){}
});是不是比你使用foreach方便的多封装后名字叫dataGrid这只是展示了冰山一角它支持所有jqGrid参数即简化了代码编写又不失功能 提供丰富的演示例子 AdminLTE 2.4Bootstrap 3.3Layer 3.0My97DatePicker 4.8jQurey Select2 4.0jQurey Validation 1.16jQurey zTree API 3.5jQurey zTree Demo 3.5jQuery jqGrid 4.7 转载于:https://my.oschina.net/thinkgem/blog/1561129
