easyui之grid,相信如果用了easyui的,都会用到grid,但是总觉得每次都需要重复编写基本类似的JS代码,总觉得让人别扭,所以对其再封装,同时整合增加、编辑、删除、转移、分页、查询等功能函数,提高代码的通用性。
闲话少说,贴上代码,如下:
// JavaScript Document var myDatagrid={ datagridId:"", // datagrid table id queryFormId:"", // search form id queryAction:"", // search from action infoFormId:"", // info form id infoAddAction:"", // info data add action infoUpdateAction:"", //info update action infoDlgDivId:"", // info data detail/edit dlg div id deleteAction:"", //data delete action from ajax deleteMsg:"", // show the message before do delete moveDlgDivId:"", // the div id of dialog for move show moveFormId:"", //the form id for move moveTreeId:"", // the combotree id for move dataUrl:"", //datagrid data load url from ajax queryParams:{}, //search params name for post, must to be {} queryParamsVCN:{}, //search params value from htmlcontrol name, must to be {} columns:[], //datagrid columns ,must to be [] addOrUpdateFlag:0, //0-add ,1-update beforeAddFn:function(){ return true;}, beforeDoAddFn:function(){ return true;}, afterDoAddFn:function(){}, beforeDeleteFn:function(){ return true;}, afterDeleteFn:function(){}, beforeDetailFn:function(){ return true;}, afterDetailFn:function(){}, beforeUpdateFn:function(){ return true;}, beforeDoUpdateFn:function(){ return true;}, afterUpdateFn:function(){}, beforeMoveFn:function(){ return true;}, beforeDoMoveFn:function(){ return true;}, afterMoveFn:function(){}, //datagrid default set loadMsg:'数据加载中,请稍后...', fitColumns:false, nowrap:true, rownumbers:true, pagination:true, pageSize:18, pageList:18, width:"auto", height:"auto", singleSelect:false, idField:'id', fit:false, dBodyHeight:126,//需要减去的高度 moveSelectedId:"moveSelectedId", moveParentId:"moveParentId", init:function(){ this.initBodyHeight(); this.initDatagrid(); this.initInfoDlg(); this.initPagination(); this.datagridReload(); try{ this.initMoveDlg(); }catch(e){} //因为转移功能不是一定需要,故使用try }, initBodyHeight:function(){ var bh=parent.document.body.clientHeight; $("body").css("height",(bh-this.dBodyHeight)+"px"); this.height=document.body.clientHeight; }, initDatagrid:function(){ $('#'+this.datagridId).datagrid({ //url:myDatagrid.parseAction(myDatagrid.dataUrl), //不在这里设置URL,是为了解决IE缓存的问题 loadMsg:this.loadMsg, width:this.width, height:this.height, fitColumns:this.fitColumns, nowrap:this.nowrap, rownumbers:this.rownumbers, pagination:this.pagination, pageSize:this.pageSize, pageList:[this.pageList], queryParams:this.queryParams, singleSelect:this.singleSelect, idField:this.idField, fit:this.fit, columns:[this.columns], }); }, datagridSelections:function(){ return $('#'+this.datagridId).datagrid('getSelections'); }, datagridSelected:function(){ return $('#'+this.datagridId).datagrid('getSelected'); }, clearSelections:function(){ $('#'+this.datagridId).datagrid("clearSelections"); }, unselectRow:function(index){ $('#'+this.datagridId).datagrid("unselectRow",index); }, selectRecord:function(idv){ return $('#'+this.datagridId).datagrid("selectRecord",idv); }, selectRow:function(index){ return $('#'+this.datagridId).datagrid("selectRow",index); }, selectAll:function(){ return $('#'+this.datagridId).datagrid("selectAll"); }, datagridReload:function(){ $("#"+this.queryFormId).attr("action",this.parseAction(this.queryAction)); $('#'+this.datagridId).datagrid('options').url=this.parseAction(this.dataUrl); var queryParams = $('#'+this.datagridId).datagrid('options').queryParams; for( var key in queryParams){ for(var _key in this.queryParamsVCN){ if(key==_key){ queryParams[key]=encodeURIComponent($("#"+this.queryParamsVCN[_key]).val()); } } } $('#'+this.datagridId).datagrid('reload'); }, initPagination:function(){ var pager=$('#'+this.datagridId).datagrid('getPager') pager.pagination({ onSelectPage:function(page,rows){ myDatagridObj.datagridReload(); } }); }, resize:function(_width,_height){ $('#'+this.datagridId).datagrid("resize",{width:_width}); }, doSearch:function(){ this.datagridReload(); }, moveTreeReload:function(){ $('#'+this.moveTreeId).combotree("reload"); }, getMoveTreeVal:function(){ return $('#'+this.moveTreeId).combotree('getValue'); }, getMoveSelectedIds:function(){ return $('#'+this.moveSelectedId).val(); }, getMoveParentId:function(){ return $('#'+this.moveParentId).val(); }, initInfoDlg:function(){ $('#'+this.infoFormId).css("display","block"); $('#'+this.infoDlgDivId).dialog({ resizable:false, collapsible:true, modal:true, buttons:[{ text:'确定', iconCls:'icon-ok', handler:function(){ if(myDatagridObj.addOrUpdateFlag==0) myDatagridObj.doAdd(); else if(myDatagridObj.addOrUpdateFlag==1) myDatagridObj.doUpdate(); } },{ text:'关闭', iconCls:'icon-cancel', handler:function(){ myDatagridObj.closeInfoDlg(); } }] }); }, initMoveDlg:function(){ $('#'+this.moveFormId).css("display","block"); $('#'+this.moveDlgDivId).dialog({ resizable:false, collapsible:true, modal:true, buttons:[{ text:'确定', iconCls:'icon-ok', handler:function(){ myDatagridObj.doMove(); } },{ text:'关闭', iconCls:'icon-cancel', handler:function(){ myDatagridObj.closeMoveDlg(); } }] }); $('#'+this.moveFormId).append("<input type='hidden' name='"+this.moveSelectedId+"' id='"+this.moveSelectedId+"' />"); $('#'+this.moveFormId).append("<input type='hidden' name='"+this.moveParentId+"' id='"+this.moveParentId+"' />"); }, showInfoDlg:function(){ $('#'+this.infoDlgDivId).dialog("open"); }, closeInfoDlg:function(){ $('#'+this.infoDlgDivId).dialog("close"); }, showMoveDlg:function(){ $('#'+this.moveDlgDivId).dialog("open"); }, closeMoveDlg:function(){ $('#'+this.moveDlgDivId).dialog("close"); }, toAdd:function(){ this.addOrUpdateFlag=0; if(!this.beforeAddFn()) return; this.showInfoDlg(); }, toDetail:function(){ if(!this.beforeDetailFn()) return; this.showInfoDlg(); }, toUpdate:function(){ this.addOrUpdateFlag=1; var tmp =this.datagridSelected(); if(tmp==null){ $.messager.alert('系统提示','<br>请选择您要修改的记录。','info'); return; } if(!this.beforeUpdateFn()) return; this.showInfoDlg(); }, toMove:function(){ var tmp =this.datagridSelections(); if(tmp.length<=0){ $.messager.alert('系统提示','<br>请选择您要转移的记录。','info'); return; } if(!this.beforeMoveFn()) return; this.showMoveDlg(); }, doAdd:function(){ $("#"+this.infoFormId).attr("action",this.parseAction(this.infoAddAction)); $('#'+this.infoFormId).form('submit',{ onSubmit: function(){ if(!myDatagridObj.beforeDoAddFn()) return; return $(this).form('validate'); }, success:function(data){ if(data.Trim()=="success"){ //$.messager.alert('系统提示','<br>增加成功。','info'); myDatagridObj.closeInfoDlg(); myDatagridObj.datagridReload(); myDatagridObj.afterDoAddFn(); }else{ $.messager.alert('系统提示','<br>增加失败。','info'); } } }); }, doUpdate:function(){ $("#"+this.infoFormId).attr("action",this.parseAction(this.infoUpdateAction)); $('#'+this.infoFormId).form('submit',{ onSubmit: function(){ if(!myDatagridObj.beforeDoUpdateFn()) return; return $(this).form('validate'); }, success:function(data){ if(data.Trim()=="success"){ //$.messager.alert('系统提示','<br>修改成功。','info'); myDatagridObj.closeInfoDlg(); myDatagridObj.clearSelections(); myDatagridObj.datagridReload(); myDatagridObj.afterUpdateFn(); }else{ $.messager.alert('系统提示','<br>修改失败。','info'); } } }); }, doDelete:function(){ if(!this.beforeDeleteFn()) return; var tmp =this.datagridSelections(); if(tmp.length<=0){ $.messager.alert('系统提示','<br>请选择您要删除的记录。','info'); return; } $.messager.confirm('系统提示', '<br>真的需要删除这些数据吗?<br>'+ this.deleteMsg, function(r){ if (r){ var ids=""; for(var i=0;i<tmp.length;i++){ if(ids=="") ids=(tmp[i]) .id; else ids+=","+(tmp[i]).id; } //alert(tmp+"--"+tmp.length+"--"+ids); $.ajax({ type: "POST", data:{"ids":ids}, url:myDatagridObj.parseAction(myDatagridObj.deleteAction), success:function(data){ if(data.Trim()=="success"){ //$.messager.alert('系统提示','<br>删除成功。','info'); myDatagridObj.clearSelections(); myDatagridObj.datagridReload(); myDatagridObj.afterDeleteFn(); }else{ $.messager.alert('系统提示','<br>删除失败。','info'); } } }); } }); }, doMove:function(){ var s="sdf"; $('#'+this.moveFormId).form('submit',{ onSubmit: function(){ var val = myDatagridObj.getMoveTreeVal(); if(val==""){ $.messager.alert('系统提示','<br>请选择需要转向的父类。','info'); return false; } var tmp=myDatagridObj.datagridSelections(); var ids=""; for(var i=0;i<tmp.length;i++){ if( ((tmp[i]).id)!=val){ if(ids=="") ids=(tmp[i]).id; else ids+=","+(tmp[i]).id; } } $("#"+myDatagridObj.moveSelectedId).val(ids); $("#"+myDatagridObj.moveParentId).val(val); if(!myDatagridObj.beforeDoMoveFn()) return; return $(this).form('validate'); }, success:function(data){ if(data.Trim()=="success"){ //$.messager.alert('系统提示','<br>转移成功。','info'); myDatagridObj.clearSelections(); myDatagridObj.closeMoveDlg(); myDatagridObj.datagridReload(); myDatagridObj.moveTreeReload(); myDatagridObj.afterMoveFn(); }else{ $.messager.alert('系统提示','<br>转移失败。','info'); } } }); }, parseAction:function(action){ if(action.indexOf('?')>=0) return action+="&xxtime="+(new Date().getTime()); else return action+="?xxtime="+(new Date().getTime()); } };而在使用时,如其他不同用法,只需要覆盖需要的方法即可。