easyui以及js前端开发常见问题、用法整理(最重要的样式和图标自定义)
自定义图标
iconCls 所有属性值枚举:
icon-add | icon-print | icon-mini-add | icon-cvs | icon-play | icon-refresh |
icon-edit | icon-help | icon-mini-edit | icon-pencil | ||
icon-remove | icon-undo | icon-mini-refresh | |||
icon-save | icon-redo | ||||
icon-cut | icon-back | ||||
icon-ok | icon-sum | ||||
icon-no | icon-tip | ||||
icon-cancel | icon-filter | ||||
icon-reload | icon-blank | ||||
icon-search |
如果要自定义图标,可以在icon.css中,仿照着增加即可,如下:
- .icon-clear{
background:url('icons/clear.png') no-repeat center center;
}
.icon-remove{
background:url('icons/edit_remove.png') no-repeat center center;
}
自定义:
- .icon-usotme{
background:url('icons/usotme.png') no-repeat center center;
}
参考:https://www.cnblogs.com/GuZhenYin/p/6088327.html
官方还提供了联机修改,可以参考https://www.jeasyui.com/themebuilder/index.php#。
官方提供了所中theme,总的来说material最接近现在扁平化风格,只要配合把图标改了基本上是可行的如下:
操作选中行
datagrid获取选中行的id以及取消选中的行,可参考:http://blog.csdn.net/isea533/article/details/50929752
datagrid的reload与查询参数- 通过queryParams可以设置datagrid的查询参数,但是每次reload的时候,queryParams会被清空,因此需要每次reload前重新获取,如下:
- $("#list_data").datagrid("options").queryParams = getParams();
$("#list_data").datagrid("reload");- datagrid标题居中,列靠左或者右
- { field: 'Name', title: '约束名称', width: 80, align: 'left', halign: 'center', },
其中 align:'left' 控制内容居左 , halign: 'center' 控制标题居中。
datagrid复杂表头
- frozenColumns: [[
{ title: '类型', field: 'regionname', width: 100, align:"center"}
]],
columns:
- [
[{"title":"应收合计","colspan":4},
{"title":"应付合计","colspan":4}],
[{"field":"uname0","title":"笔数","rowspan":1,"width":150, halign: 'center', align:"right"},
{"field":"config_gender1","title":"应收","rowspan":1,"width":150, halign: 'center', align:"right"},
{"field":"config_gender2","title":"已收","rowspan":1,"width":150, halign: 'center', align:"right"},
{"field":"config_gender2","title":"未收","rowspan":1,"width":150, halign: 'center', align:"right"},
{"field":"config_datatype0","title":"笔数","rowspan":1,"width":150, halign: 'center', align:"right"},
{"field":"config_datatype1","title":"应付","rowspan":1,"width":150, halign: 'center', align:"right"},
{"field":"config_datatype2","title":"已付","rowspan":1,"width":150, halign: 'center', align:"right"},
{"field":"config_datatype2","title":"未付","rowspan":1,"width":150, halign: 'center', align:"right"}]
]
datetimepicker调整日期
bootstrap datetimepicker本身没有提供接口设置时间,如需设置,可以直接对input设置value,如下:
- function setLastWeek() {
var sysdate = getSysdate();
var sevenDaysAgo = addDays(sysdate,-7);
$('input[name=beginBizDatetime]').val(sevenDaysAgo);
$('input[name=endBizDatetime]').val(sysdate);
}- function setLastMonth() {
var sysdate = getSysdate();
var sevenDaysAgo = addDays(sysdate,-30);
$('input[name=beginBizDatetime]').val(sevenDaysAgo);
$('input[name=endBizDatetime]').val(sysdate);
}
- /**
* 获取当前的日期时间 格式“yyyy-MM-dd HH:MM:SS”
* @returns {string}
*/
function getSysdate() {
var date = new Date();
var seperator1 = "-";
var seperator2 = ":";
var month = date.getMonth() + 1;
var strDate = date.getDate();
if (month >= 1 && month <= 9) {
month = "0" + month;
}
if (strDate >= 0 && strDate <= 9) {
strDate = "0" + strDate;
}
var sysdate = date.getFullYear() + seperator1 + month + seperator1 + strDate;
return sysdate;
}- function addDays(date,days){
var d=new Date(date);
d.setDate(d.getDate()+days);
var month=d.getMonth()+1;
var day = d.getDate();
if(month<10){
month = "0"+month;
}
if(day<10){
day = "0"+day;
}
var val = d.getFullYear()+"-"+month+"-"+day;
return val;
}
Javascript报uncaught typeerror illegal invocation错误
在用ajax向后台传值的时候把一个对象当作参数传上去了,所以才会报这个错误。
- function getParams() {
var param = {"operatorName":$("#operatorName"),"roleName":$("#roleName")};
return param;
}- 安装c-lodop之后,c-lodop web打印报“PRINT_INIT is not a function”。
谷歌45版本后不再支持np插件功能, 包括火狐64位及edge浏览器,都不再支持,导致控件方式无法运行。lodop 公司推出了一个新产品 c-lodop, 兼容lodop语法及功能, 升级后 就可以正常运行。
可以使用如下:
<script src='http://localhost:8000/CLodopfuncs.js'></script>
<script language="javascript" type="text/javascript">
window.setTimeout(function() {
var strHTML=document.getElementsByTagName("html")[0].innerHTML;
LODOP.PRINT_INITA(1,1,770,660,"测试预览功能");
LODOP.ADD_PRINT_TEXT(10,60,300,200,"这是测试的纯文本,下面是超文本:");
LODOP.ADD_PRINT_HTM(30,5,"100%","80%",strHTML);
LODOP.PREVIEW();
},3000);
</script>
一定要等websocket连接之后调用,否则会提示websocket没有准备好。
ajax请求中contentType:"application/json;charset=utf-8" 的含义(源于我们将http重定向为https后某些post请求出现异常,通过增加contentType:"application/json;charset=utf-8"后解决),使用浏览器输入url的方式没有办法定义Content-Type,所以spring无法发现request body。@RequestBody需要把所有请求参数作为json解析,因此,不能包含key=value这样的写法在请求url中,所有的请求参数都是一个json,需要使用ajax提交。如下:
- $.ajax({
- url:"/api/xxx/aaa",
- type:"POST",
- dataType:"json",
- async:false,
- contentType:"application/json;charset=utf-8",
- data: JSON.stringify({"id":"id0003","name":"name0003"}),
- success:function(message){
- //TODO
- },
- error:function(message){
- $("request-process-patent").html("fail to post");
- }
- });
- @RequestMapping(value="/aaa",method= RequestMethod.POST)
- public JsonResult userMgr(@RequestBody Map<String,String> map){
- String id=map.get("id");
- String name=map.get("name");
- }
- $.ajax({
- url:"/api/xxx/bbb",
- type:"POST",
- dataType:"json",
- async:false,
- data:{
- "id":"id001",
- "name":"name001"
- },
- success:function(data){
- if("200"==data.code)
- {
- alert(data.data);
- }else{
- alert(data.code);
- }
- },
- });
- @RequestMapping(value="/bbb",method= RequestMethod.POST)
- public JsonResult usrAdmin(@RequestParam String id, @RequestParam String name){
- logger.info("assetIssue parameters:"+ id+":"+name);
- }
- @RequestMapping(value="/bbb",method= RequestMethod.POST)
- public JsonResult usrAdmin(MyObject param){
- logger.info("assetIssue parameters:"+ param.id+":"+ param.name);
- }
对于复杂的对象(对象嵌套对象),使用MyObject 会无法注入,报org.springframework.http.converter.HttpMessageNotReadableException: Could not read document: Can not deserialize instance of 。服务端用string接受,客户端使用JSON.stringify传递json字符串。
javascript中$(function() {});
javascript中$(function() {....}) 是 jQuery 中的经典用法,等同于 $(document).ready(function() {....}),即在页面加载完成后才执行某个函数,如果函数中要操作 DOM,在页面加载完成后再执行会更安全,所以在使用 jQuery 时这样的写法很常见。
(function(){})() 代表立即执行一个匿名的方法
一般用来与外界隔绝 制造一个似闭包的环境 创建一个作用域链 避免变量冲突。
ES 6新特性
ES6模块主要有两个功能:export和import (但是目前主流浏览器如chrome/ie都不支持 )
export用于对外输出本模块(一个文件可以理解为一个模块)变量的接口
import用于在一个模块中加载另一个含有export接口的模块。
ES6中有两个新特性:let和 const,为了理解let,我们需要记住var是创建函数生存期内的变量。
不像Java或其他语言,任何变量在JS中是在一个函数内创建,它会升级到哦函数之外部,不管你在哪里定义变量,都和你在函数顶部定义一样,这个行为称为hoisting。
let是在一个代码块内,变量名只能在代码块中可见。
总结:var是function-scoped,而let是 block-scoped.
const是创建常量使用,一旦创建就一直不会被概念,如下:
const SERVER_URL = "http://www.jdon.com"
ES6还有其他新功能:Map, WeakMap, generators 和Proxies
那么什么时候可以使用ES6这些特性呢?可见下面这个网址:
http://kangax.github.com/es5-compat-table/es6/
npm WARN enoent ENOENT: no such file or directory, open 'C:\Program Files\nodejs \package.json'
在node.js安装目录下安装微薄、框架express
出现了一些问题
解决问题的方法是在C:\Program Files\nodejs\node_modules 的npm目录下进行安装。
安装webpack出现警告: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents):
警告如下:
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.0.17: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN vue-loader-demo@1.0.0 No description
npm WARN vue-loader-demo@1.0.0 No repository field.
原因是因为: fsevent是mac osx系统的,在win或者Linux下使用了 所以会有警告,忽略即可。意思就是你已经安装成功了。气死我吧,我一直以为有啥问题呢
easyui以及js前端开发常见问题、用法整理(最重要的样式和图标自定义)的更多相关文章
- JS前端开发判断是否是手机端并跳转操作(小结)
JS前端开发判断是否是手机端并跳转操作(小结) 这篇文章主要介绍了JS前端开发判断是否是手机端并跳转操作,非常不错,具有参考借鉴价值,需要的朋友可以参考下 常用跳转代码 ? 1 2 3 4 5 6 7 ...
- JS~~~ 前端开发一些常用技巧 模块化结构 &&&&& 命名空间处理 奇技淫巧!!!!!!
前端开发一些常用技巧 模块化结构 &&&&& 命名空间处理 奇技淫巧!!!!!!2016-09-29 17 ...
- FIS.js前端开发的使用说明文档
文档结构 什么是FIS 部署FIS FIS基本使用 模块定义 加载方式 调用Tangram 2.0 一.什么是FIS FIS提供了一套贯穿开发流程的开发体系和集成开发环境,为产品线提供前端开发底层架构 ...
- web前端开发必备压缩工具整理
影响网站打开时间有两个因素,一个是网页加载速度,另一个是网站页面的大小.网站加载速度与用户所处的网络环境及主机性能有关,而网站页面的大小则由网站开发者决定,最主要的就是web前端开发工程师的工作.本文 ...
- 前端开发--面试题整理(JS篇)
1.截取字符串abcdace的acealert('abcdace'.substring(4)); 2.规避javascript多人开发函数重名问题命名空间封闭空间js模块化mvc(数据层.表现层.控制 ...
- WEB前端开发常见问题汇总
1.web扫码登录怎么实现,思路? 步骤 WEB平台 手机 第1步 生成二维码 第2步 (ajax监控后台) 扫码 第3步 (ajax监控后台) 确定(后台异步通知WEB平台) 第4步 AJAX发现状 ...
- [JS前端开发] js/jquery控制页面动态加载数据 滑动滚动条自动加载事件
页面滚动动态加载数据,页面下拉自动加载内容 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样的效果:进入qq空间,向下拉动空 ...
- [JS前端开发] js/jquery控制页面动态载入数据 滑动滚动栏自己主动载入事件
本人小菜鸟一仅仅.为了自我学习和交流PHP(jquery,linux,lamp,shell,javascript,server)等一系列的知识,小菜鸟创建了一个群.希望光临本博客的人能够进来交流.寻求 ...
- 前端开发——移动bug整理
1.ios下jquery的delegate失效问题? 解决方案: $("body").delegate(...) 改为 $(".item").delegate( ...
随机推荐
- 命令行方式调用winrar对文件夹进行zip压缩示例代码
调用winRAR进行压缩 using System; using System.Collections.Generic; using System.Linq; using System.Text; u ...
- CentOS6.5如何设置NAT网络方式
如何设置虚拟机与外网的连通. 今天说一下NAT的配置方法,其它两个都比较简单. 1.配置CentOS的IP [root@mycentos ~]# vi /etc/sysconfig/network-s ...
- CentOS6.5配置MYSQL一主多从详解
一.环境 操作系统 :CentOS 6.5 数据库版本:MySQL 主机A:192.168.1.1 (Master) 从机B:192.168.1.2 (Slave) 从机B:192.168.1.3 ( ...
- Objective-C中NSArray的基本用法示例
NSArray的一些用法 NSArray只允许装OC对象,并且不能装空值,空代表数组元素的结束 #pragma mark - NSArray的基本用法 // 创建一个空数组 NSArray *arra ...
- 关于double精确度的简单问题
(1)测试TestDouble.java结果 结果:如图,使用double类型的数据进行运算时结果是不准确的. 原因:double类型的数值占用64bit,即64个二进制数,除去最高位表示正负符号的位 ...
- BFS 搜索 蓝桥杯模拟赛
题目链接:https://nanti.jisuanke.com/t/36117 这个题目想不到用广搜来做,一直在想深搜. 广搜的思路呢,是把最外圈不是黑色(不是0)的数 的位置 i 和 j 进队,赋值 ...
- QT获取窗口句柄
winId()函数 SendMessage((HWND)(this->dlg->winId()),WM_SEND_MY_MESSAGE,0,0);
- <8>Cocos Creator组件开发cc.Component
1.组件简介 组件是Cocos Creator的主要构成,渲染(场景显示内容).逻辑.用户输入反馈.计时器等等几个方面都是由组件完成的.根据Cocos Creator的总体架构,组件和节点配合完成游戏 ...
- python base64加密文本内容(2)
上面一篇简单进行了base64加密 但安全系数非常低,只需要用网上的在线base64解码就能破解 这里我们可以自己修改一下base64加密后的字符串,在解码的时候只需要先提前将修改的内容还原就可以了 ...
- 【Hadoop学习之六】MapReduce原理
一.概念MapReduce:"相同"的key为一组,调用一次reduce方法,方法内迭代这一组数据进行计算 块.分片.map.reduce.分组.分区之间对应关系block > ...