EasyUI开发踩过的坑（EasyUI开发笔记）

0. datagrid批量删除问题

不可以直接循环删除，需使用复制删除的方式

var rows = $('#tab_list_result').datagrid("getRows");

var copyRows = [];

for (var j = 0; j < rows.length; j++) {

copyRows.push(rows[j]);

}

if (copyRows.length != 0) {

for (var j = 0; j <= copyRows.length - 1; j++) {

if (row.Id == copyRows[j].OrderId) {

var index = $('#tab_list_result').datagrid('getRowIndex', copyRows[j]);

$('#tab_list_result').datagrid('deleteRow', index);

}

}

};

 

1. EasyUI选项卡tabs闪烁问题，默认情况下多个tabs加载会刷一下最后一个tab然后再显示第一个tab，导致看到闪动的效果，如果把最后一个设置display:none，可解决，但能看到第一个还是会闪一下，并且切换性能明显降低。

解决方案：所有的tabs都设置 display:none 完美解决，官方demo使用了display:none,但并没有给出文字说明，备注一下

<div id="tt" class="easyui-tabs" style="width:500px;height:250px;">

<div title="Tab1" style="padding:20px;display:none;">

tab1

</div>

<div title="Tab2" style="padding:20px;display:none;">

tab1

</div>

</div>

 

2. EasyUI控件初始化方式有两种：一种通过html方式，一种通过js方式，同时使用将导致控件被加载多次的情况（部分控件）

现状：经常看到两种方式同时使用的情况，

比如页面这样写<select id="mytest" class="easyui-combobox"></select>

对应js：$("#mytest").combobox({url:"XXXXX"}); 这样的话控件就会被加载两次

使用js时去掉对应的class（部分动态生成的combobox控件遇到这种问题，有些控件不会）

 

3. 页面保存，返回等linkbutton按钮 href属性设置为： href="javascript:;" 或者“###” 原因：防止点击的时候页面跳转到顶部，同时禁用按钮，防止重复提交

 

4. combobox，combotree谨慎使用onChange事件，因为初始化的时候就会执行，建议使用onSelect, 此事件使用时涉及到新旧值的问题，详见5，曾因为这个问题导致多次加载datagrid

 

5. 获取combotree选中值问题，3种都可以，第三种比较特殊，初始化时值为null，一般用于onSelect事件时执行的外部js函数获取当前选择项，其他方式获取的是Old值：

1. $("#Id").combobox("getValue");

2. $("#Id").combotree("getValue");

3. $("#Id").combotree("tree").tree('getSelected') == null ? 0 : $("#Id").combotree("tree").tree('getSelected').id;//onSelect事件时除了通过传递的对象获取还可以用这句

 

6. 对于非弹窗的表单提交，保存成功后如果要跳转到列表页，可使用window.location.replace('/list'); 相对于location.href=''；可防止回退问题：

1.window.location.replace() 重定向 ，不记录历史记录

2.window.location.href 模拟用户点击行为

 

7. backspace导致页面回退问题... 普遍问题，特别是对存在只读文本框的表单，操作者经常会试着编辑删除里面的内容，导致之前编辑的内容丢失

解决方案：

//禁止backspace回退js代码

window.onload=function(){

document.getElementsByTagName("body")[0].onkeydown =function(){

if(event.keyCode==8){

var elem = event.srcElement;

var name = elem.nodeName;

if(name!='INPUT' && name!='TEXTAREA'){

event.returnValue = false ;

return ;

}

var type_e = elem.type.toUpperCase();

if(name=='INPUT' && (type_e!='TEXT' && type_e!='TEXTAREA' && type_e!='PASSWORD' && type_e!='FILE')){

event.returnValue = false ;

return ;

}

if(name=='INPUT' && (elem.readOnly==true || elem.disabled ==true)){

event.returnValue = false ;

return ;

}

}

}

}

 

8. document.domain 与 EasyUI提交表单的冲突问题！建议使用jquery的ajax方式提交表单

默认的easyui submit方式实质上不是ajax而是动态生成了一个iframe 表单，so，如果你设置了父页面的domain，就和这个新生成的iframe中的表单的domain不一致。。后果 呵呵...

1. 避免使用document.domain

2. 建议使用jquery的ajax方式提交表单,这才是真正的ajax，否则就会出现下载等无法预料的情况

 

9. 日期输出到easyui时间控件时必须格式化为（2016-01-01）..因为easyui默认不处理带斜杠的日期（2016/10/10）, c#输出的格式与服务器注册表设置有关

 

10. easyui form表单提交存在 返回值为空的bug： 实际请求有返回响应值，但是js接收到的就是空值，建议更换为其他提交方式