项目需求:在售后系统中,药师需要给留言用户打电话反馈,在点击开始处理时,为了方便药师查找未处理的记录,不允许全局刷新页面,导致页数数据记录和处理之前不一致,但是又要要求记录状态改变,因此需要局部刷新单元格。
实现思路:查询ligerui官方文档可知,ligerui支持刷新单元格、刷新行。
刷新单元格:
1 function f_initGrid() 2 { 3 window['g'] = 4 manager = $("#maingrid").ligerGrid({ 5 columns: [ 6 { display: '单价', name: 'UnitPrice', width: 100, type: 'float', editor: { type: 'int' } }, 7 { display: '数量', name: 'Quantity', width: 100, type: 'int', editor: { type: 'int'} }, 8 { display: '金额', name: 'Price', width: 100, type: 'int'} 9 ], 10 enabledEdit: true, usePager: false, isScroll: false, onAfterEdit: f_onAfterEdit, 11 data: { Rows: data }, 12 width: '100%' 13 }); 14 } 15 function f_onAfterEdit(e) 16 { 17 manager.updateCell('Price', e.record.UnitPrice * e.record.Quantity, e.record); 18 }
刷新行:
1 function updateRow() 2 { 3 var selected = manager.getSelected(); 4 if (!selected) { alert('请选择行'); return; } 5 manager.updateRow(selected,{ 6 UnitPrice: 40, 7 Quantity: parseInt($("#txtQuantity").val()) 8 }); 9 }
分析:api 的局部刷新单元格是基于页面单元格编辑的编辑后事件,刷新行是基于选中某行进行刷新。需求是要求点击的时候去局部刷新,因此无法直接使用api示例。
具体实现:
$.ajax({ url: '${contextPath}/callbackPhone/updateCallbackPhone.do', type: 'post', data: {"id": id, "status": "0"}, async: false, success: function (data) { var result = eval('(' + data + ')'); var code = result.code; alert(result.message); if (code == "0") { grid.updateCell("status", 0, rowindex); grid.updateCell("inDoctor", "", rowindex); grid.updateCell("userInfo", "", rowindex); grid.updateCell("updateDate", "", rowindex); } } });在点击是,获取改行的行id,局部刷新单元格时,直接使用:
grid.updateCell(name, value, rowindex);
总结:更新单元格方法的第三个参数可以是rowParm:rowindex或者rowdata。