一、easyui报错:form[0].submit is not a function
使用easyui提交表单的时候报错：easyui报错:form[0].submit is not a function。
原因：
easyui表单提交可以提交文件和普通字段，相当于jquery-from.js了，当然了，要想提交文件，设置form标签的enctype="multipart/form-data"是前提，但是使用easyui提交表单的时候却报了如上的错误，检查了该设置的都设置了，最后发现原因是触发提交的按钮的id或者nane写成了submit,改成其它任意名字就行了，但是就是不能叫做"submit"。
原先错误的写法：
<a href="#" id="submit" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" >提交</a>
这里我修改为：
<a href="#" id="toAdd_submit" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" >提交</a>
就可以了。
使用jquery-easyui提交表单示例：
$("#toAdd_submit").click(function(){//提交操作
$("#toAdd_comm_thumbpic_file").val("");
$('#toAdd_form').form({
url:'trueAddContnet',
onSubmit:function(param){
if(!$("#toAdd_comm_title").val()){
$.messager.alert('错误','标题必填!','error');
return false;
}
$.messager.progress({msg:"正在提交....",title:"请稍等"});
},
success:function(data){
$.messager.progress("close");
data=$.parseJSON(data);
if(data.status=="success"){
$.messager.alert('提示',data.info,'info');
var tab = $('#centerArea').tabs('getSelected'); // 获取选择的面板
tab.panel('refresh');
}else{
$.messager.alert('错误',"添加文档出错",'error');
}
}
});
$('#toAdd_form').submit();
});
二、easyui几个笔记重点easyui加载html片段
$('#centerArea').tabs("add",{
title:opts.txt,
narrow:true,
closable:true,
method:opts.method,
content:"<iframe frameborder=0 scrolling='auto' width='100%' height='99%' src='toMakeIndex'></iframe>"
});
easyui使用content加载tab选项卡的时候可以写iframe，那么src引用的地址toMakeIndex如下
@RequestMapping("/toMakeIndex")
public String toMakeIndex(){
return "static/toMakeIndex";
}
即toMakeIndex这个方法返回的toMakeIndex.jsp包含完整的html结构,而如果写成下面的方式：
$('#centerArea').tabs("add",{
title:txt,
narrow:true,
closable:true,
method:opts.method,
queryParams:opts.queryParams,
href:toMakeIndex
});
那么此时toMakeIndex.jsp只能是html片段，所谓html片段就是不能包含html，body这些标签，因为这个html片段是被放入到其他页面中的，如果再有html，body等标识该页面时完整html结构的标签的话，就会导致页面错乱，js脚本不执行等奇怪现象。这两种方式各有千秋，看自己怎么个需求了。
eayui的tabs选项卡组件通过href引入html片段的不足：
通过iframe的方式不必担心页面的html元素的id是什么，随便起都可以，而通过href的方式加载html片段的方式需要注意toMakeIndex.jsp(被引入的页面)和引入toMakeIndex.jsp的页面里面的html元素的id不能重复，一不小心就出错了，还要注意css冲突的问题，引入页面和被引入页面可能出现css覆盖的问题。
eayui的tabs选项卡组件通过href引入html片段的优点：
css、js这些静态资源只需要在引入页面引入就可以了，这里还拿toMakeIndex.jsp作为被引入的页面，他只是作为引入toMakeIndex.jsp页面的一部分html结构而存在，当然可以使用原有页面的css和js了，而iframe则需要单独引入需要的css和js，加载起来可能会慢点。
6.$("#layout").layout("panel","center").panel({
onResize:function(width, height){
$("#centerArea").tabs("resize","auto");
}
});内容区域自适应大小
7.$("#contentManage_chanenl_id").combobox({ //模型下拉框
onl oadSuccess:function(){
$("#contentManage_chanenl_id").combobox("select","---所有---");
},
}); 改为使用
$("#contentManage_chanenl_id").combobox({ //模型下拉框
value:"all"//all是---所有---对应的id值，这样就避免了加载出来页面没操作下拉框时通过$("#contentManage_chanenl_id").combobox("getValue")
//取到的值是“---所有---”而不是其对应的id的情况出现，也不用再在后边进行data["contentManage_chanenl_id"]=$("#contentManage_chanenl_id").combobox("getValue")=="---所有---"?"all":$("#contentManage_chanenl_id").combobox("getValue");
//等复杂判断了
});
三、easyui tabs右键菜单关闭
需求：如何实现easyui tabs的如下效果？
01.首先需要给tabs组件添加onContextMenu事件
$("#centerArea").tabs({
border:false,
fit:true,
onContextMenu: function(e, title, index){
e.preventDefault();
$('#closeCxt').menu('show', {
left: e.pageX,
top: e.pageY
});
}
});
id为closeCxt的元素是上下文菜单：
<div id="closeCxt" class="easyui-menu" >
<div id="closeCxt_crt" data-options="iconCls:'icon_cancle'" >关闭当前</div>
<div id="closeCxt_all" data-options="iconCls:'icon_cross'" >关闭全部</div>
<div id="closeCxt_other" data-options="iconCls:'icon_no'">关闭其他</div>
</div>
我们定义菜单的点击事件，实现关闭逻辑即可：
$("#closeCxt").menu({
onClick : function (item) {
closeTab(item.id);
}
});
function closeTab(id){
if(id=="closeCxt_crt"){
var crtTab=$("#centerArea").tabs("getSelected");
var crtIndex=$("#centerArea").tabs("getTabIndex",crtTab);
$("#centerArea").tabs("close",crtIndex);
}else if(id=="closeCxt_all"){
var allTabs=$("#centerArea").tabs("tabs");
var len=allTabs.length;
while(len!=0){
$("#centerArea").tabs("close",0);
len=$("#centerArea").tabs("tabs").length;
}
}else if(id=="closeCxt_other"){
var crtTab=$("#centerArea").tabs("getSelected");
var crtIndex=$("#centerArea").tabs("getTabIndex",crtTab);//跟addtab时指定的id无关，索引动态改变
var allTabs=$("#centerArea").tabs("tabs");
var len=allTabs.length;
for(var i=0;i<len;i++){
if(i<crtIndex){
$("#centerArea").tabs("close",0);
}else if(i>crtIndex){
$("#centerArea").tabs("close",1);
}
}
}
}
关键在于closeTab方法的实现。
四、easyui datagrid的编辑功能
<table id="emps" ></table>
easyui datagrid的编辑功能javascript代码：
<script type="text/javascript">
var obj={
editCell:undefined
};
$(function (){
$('#emps').datagrid({
url:'<%=request.getContextPath() %>/userServlet?flag=list',
columns:[[
{field:'CID',title:'CID',width:100},
{field:'CNAME',title:'CNAME',width:100},
{field:'CAGE',title:'CAGE',width:100,align:'right'},
{field:'CSALARY',title:'CSALARY',width:100,align:'right'},
{field:'CSUBCOMPANY',title:'CSUBCOMPANY',width:100,align:'right'},
{field:'CDEPT',title:'CDEPT',width:100,align:'right'},
{field:'CBIRTH',title:'CBIRTH',width:100,align:'right'},
{field:'CNOTE',title:'CNOTE',width:100,align:'right',editor:{
type:'text',
options:{}
}}
]],
onClickCell:function (rowIndex, field, value){
if(field=="CNOTE"){
if(obj.editCell!=undefined){
$("#emps").datagrid("endEdit",obj.editCell);
obj.editCell=rowIndex;
$("#emps").datagrid("beginEdit",rowIndex);
}else{
obj.editCell=rowIndex;
$("#emps").datagrid("beginEdit",rowIndex);
}
}
},
onAfterEdit:function (rowIndex, rowData, changes){
var param={
id:rowData.CID,
note:rowData.CNOTE
};
var params={};
params["param"]=JSON.stringify(param);
$("#emps").datagrid("loading");
$.ajax({
type:'post',
data:params,
url:"<%=request.getContextPath() %>/userServlet?flag=update",
success:function(resultData){
$("#emps").datagrid("loaded");
//$("#emps").datagrid("loadData",resultData);
$.messager.show({
title:'我的消息',
msg:'更新成功。'
})
},
//服务器发生错误了，不管服务器端有没有try catch【反正我测试了有的，没有的也不知道error啊】
error:function(){
$("#emps").datagrid("loaded");
//$("#emps").datagrid("loadData",resultData);
alert(resultData.info);
}
});
}
});
});
</script>