ligerUI实现局部刷新单元格,刷新行 (实例经验)

项目需求:在售后系统中,药师需要给留言用户打电话反馈,在点击开始处理时,为了方便药师查找未处理的记录,不允许全局刷新页面,导致页数数据记录和处理之前不一致,但是又要要求记录状态改变,因此需要局部刷新单元格。


实现思路:查询ligerui官方文档可知,ligerui支持刷新单元格、刷新行。

刷新单元格:

updateCell(arg, value, rowParm)方法 示例:

 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         }

刷新行:

updateRow(rowDom, newRowData)方法 示例:

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。

你可能感兴趣的:(ligerUI实现局部刷新单元格,刷新行 (实例经验))