jQuery easyui datagird编辑行删除行功能的实现代码

神马是easyui

jQuery EasyUI是一组基于jQuery的UI插件集合,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript,也不需要对css样式有深入的了解,开发者需要了解的只有一些简单的html标签。

jQuery EasyUI为我们提供了大多数UI控件的使用,如:accordion,combobox,menu,dialog,tabs,tree,validatebox,window等等。

下面通过代码看下easyui datagird编辑行删除行功能,具体代码如下所示:

function init(){

var editRow = undefined;

var oldMoney = 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) {

var submitDate = $("#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 () {

var row = $("#dg").datagrid('getSelected');

if(row){

var index = $("#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 () {

var row = $("#dg").datagrid('getSelected');

oldMoney = row.exeMoneyString;

if (row !=null) {

if (editRow != undefined) {

$("#dg").datagrid('endEdit', editRow);

}

if (editRow == undefined) {

var index = $("#dg").datagrid('getRowIndex', row);

$("#dg").datagrid('beginEdit', index);

editRow = index;

$("#dg").datagrid('unselectAll');

}

} else {

}

}

}, '-', {

text: '保存', iconCls: 'icon-save', handler: function () {

var opeRow = editRow;

$("#dg").datagrid('endEdit', editRow);

var rows = $("#dg").datagrid('getChanges');

if(!rows ||rows.length==0){

alert("无修改数据,无需保存!");

return false;

}

var allRows = $("#dg").datagrid('getData');

var executeMoney = $("#executeMoney").val();

var sum = 0;

var money = 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');

return false;

}

//新增

var addRows = $("#dg").datagrid('getChanges','inserted');

//修改

var updateRows = $("#dg").datagrid('getChanges','updated');

//删除

var delRows = $("#dg").datagrid('getChanges','deleted');

var addOrUpdate = $.merge(addRows,updateRows);

var addOrUpdateStr = JSON.stringify(addOrUpdate);

var delRowsStr = 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;

var row = $("#dg").datagrid('getSelected');

oldMoney = row.exeMoneyString;

}

},

onClickRow:function(rowIndex,rowData){

if (editRow != undefined) {

$("#dg").datagrid('endEdit', editRow);

}

}

});

}

function formatMeony(value){

var money =value;

var temp = money.split(",");

var result = "";

var value = 0;

var size = temp.length;

for (var j = 0; j < size; j++) {

result = result + temp[j];

}

value = parseFloat(result);

return value;

}

总结

以上所述是小编给大家介绍的jQuery easyui datagird编辑行删除行功能的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

以上是 jQuery easyui datagird编辑行删除行功能的实现代码 的全部内容, 来源链接: utcz.com/z/344509.html

回到顶部