jQuery easyui datagird编辑行删除行功能的实现代码
神马是easyui
jQueryEasyUI是一组基于jQuery的UI插件集合，而jQueryEasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。
jQueryEasyUI为我们提供了大多数UI控件的使用，如：accordion，combobox，menu，dialog，tabs，tree，validatebox，window等等。
下面通过代码看下easyuidatagird编辑行删除行功能，具体代码如下所示：
functioninit(){
vareditRow=undefined;
varoldMoney=undefined;
$("#dg").datagrid({
url:"../foreignexchange/fexLedgerManager.do?method=queryApplyData&parentId="+parentId,
fitColumns:false,//自适应宽度，占满,不能和冻结列同时设置成true
striped:true,//斑马线效果
singleSelect:false,//是否单选
pagination:false,
height:140,
columns:[[
{field:"id",title:"主键",width:'10',align:"center",hidden:true},
{field:"applyNo",title:"申报单号",width:'250',align:"center",editor:{type:'validatebox',options:{required:true}}},
{field:"exeMoneyString",title:"执行金额",width:'200',align:"center",editor:{type:'moneybox',options:{precision:2,required:true}}},
{field:"exchangeRate",title:"执行汇率(%)",width:'210',align:"center",editor:{type:'numberbox',options:{precision:5,required:true}}},
{field:"submitDate",title:"提交日期",width:'190',align:"center",editor:{type:'datebox',options:{required:true}}},
{field:"executeDate",title:"执行日期",width:'190',align:"center",editor:{type:'datebox',options:{required:true}}}
]],
toolbar:[{
text:'添加',iconCls:'icon-add',handler:function(){
if(editRow!=undefined){
$("#dg").datagrid('endEdit',editRow);
}
if(editRow==undefined){
varsubmitDate=$("#submitDate").val();
$("#dg").datagrid('insertRow',{
index:0,
row:{submitDate:submitDate}
});
$("#dg").datagrid('beginEdit',0);
editRow=0;
}
}
},/*'-',{
text:'撤销',iconCls:'icon-redo',handler:function(){
editRow=undefined;
$("#dg").datagrid('rejectChanges');
$("#dg").datagrid('unselectAll');
}
},*/'-',{
text:'删除',iconCls:'icon-remove',handler:function(){
varrow=$("#dg").datagrid('getSelected');
if(row){
varindex=$("#dg").datagrid("getRowIndex",row);
$("#dg").datagrid('deleteRow',index);
}else{
$("#dg").datagrid('endEdit',0);
$("#dg").datagrid('deleteRow',0);
editRow=undefined;
}
}
},'-',{
text:'修改',iconCls:'icon-edit',handler:function(){
varrow=$("#dg").datagrid('getSelected');
oldMoney=row.exeMoneyString;
if(row!=null){
if(editRow!=undefined){
$("#dg").datagrid('endEdit',editRow);
}
if(editRow==undefined){
varindex=$("#dg").datagrid('getRowIndex',row);
$("#dg").datagrid('beginEdit',index);
editRow=index;
$("#dg").datagrid('unselectAll');
}
}else{
}
}
},'-',{
text:'保存',iconCls:'icon-save',handler:function(){
varopeRow=editRow;
$("#dg").datagrid('endEdit',editRow);
varrows=$("#dg").datagrid('getChanges');
if(!rows||rows.length==0){
alert("无修改数据，无需保存！");
returnfalse;
}
varallRows=$("#dg").datagrid('getData');
varexecuteMoney=$("#executeMoney").val();
varsum=0;
varmoney=0;
$.each(allRows.rows,function(i,row){
row.parentId=parentId;
money=formatMeony(row.exeMoneyString);
sum+=money;
});
if(sum>executeMoney){
alert("执行金额超出台账登记执行金额！");
if(oldMoney){
$("#dg").datagrid('updateRow',{
index:opeRow,
row:{exeMoneyString:oldMoney}
});
}
$("#dg").datagrid('beginEdit',opeRow);
$("#dg").datagrid('unselectAll');
returnfalse;
}
//新增
varaddRows=$("#dg").datagrid('getChanges','inserted');
//修改
varupdateRows=$("#dg").datagrid('getChanges','updated');
//删除
vardelRows=$("#dg").datagrid('getChanges','deleted');
varaddOrUpdate=$.merge(addRows,updateRows);
varaddOrUpdateStr=JSON.stringify(addOrUpdate);
vardelRowsStr=JSON.stringify(delRows);
$.ajax({
type:'post',
url:'../foreignexchange/fexLedgerManager.do',
data:{
"method":$("#method").val(),
"addOrUpdateStr":addOrUpdateStr,
"delRowsStr":delRowsStr
},
cache:false,
dataType:'json',
success:function(data){
if(data.success){
alert(data.msg);
init();
}else{
alert(data.msg);
}
}
});
}
}],
onAfterEdit:function(rowIndex,rowData,changes){
editRow=undefined;
},
onDblClickRow:function(rowIndex,rowData){
if(editRow!=undefined){
$("#dg").datagrid('endEdit',editRow);
}
if(editRow==undefined){
$("#dg").datagrid('beginEdit',rowIndex);
editRow=rowIndex;
varrow=$("#dg").datagrid('getSelected');
oldMoney=row.exeMoneyString;
}
},
onClickRow:function(rowIndex,rowData){
if(editRow!=undefined){
$("#dg").datagrid('endEdit',editRow);
}
}
});
}
functionformatMeony(value){
varmoney=value;
vartemp=money.split(",");
varresult="";
varvalue=0;
varsize=temp.length;
for(varj=0;j
总结
以上所述是小编给大家介绍的jQueryeasyuidatagird编辑行删除行功能的实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！