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下使用了 所以会有警告，忽略即可。意思就是你已经安装成功了。气死我吧，我一直以为有啥问题呢