EasyUI----DataGrid行明细增删改操作

http://blog.csdn.net/huchiwei/article/details/7787947

 

本文实现的是EasyUI-DataGrid行明细的增删改操作。具体参考来自以下文章：

官方DEMO---- DataGrid ---- Master Detail

在easyui中利用DataGrid的行明细区域实现CRUD操作---- 作者：stworthy

BuildCRUD Application with edit form in expanded row details

jQuery-EasyUI 1.2.4 API 中文文档（完整）目录----  作者：easyui.css

    icon.css

    jquery.easyui.min.js

    datagrid-detailview.js

   jquery.js

注意以上文件版本，最好使用最新版。

2、JSP页面

页面中只需定义如下table即可：

<table id="listDetail"></table>

3、JS代码

初始化DataGrid,其中没特殊说明参数请参考上面提供的API。

$(function(){
    $("#listDetail").datagrid({
        heigth:700,
        idField:'id',
        url:'<oz:contextPath/>/oa/receiptNoteDetailAction.do?action=page',
        queryParams:{'viewType':'RK','RKD_ID':_rkdId},
        singleSelect:false,
        fitColumns:true,
        nowrap:true,
        columns:[[
            {field:'id',checkbox:true},
            {field:'name',title:'用品名称',width:100,editor:'text',sortable:true},
            {field:'produceType',title:'用品型号',width:100,editor:'text',sortable:true},
            {field:'prickle',title:'计量单位',width:100,editor:'text',sortable:true},
            {field:'count',title:'入库数量',width:100,editor:'text',sortable:true},
            {field:'price',title:'参考单价',width:100,editor:'text',sortable:true},
            {field:'subtotal',title:'入库金额',width:100,editor:'text',sortable:true}
        ]],
        toolbar:[{
            text:'添加',
            <span style="white-space:pre">  <span style="white-space:pre">  </span></span>iconCls:'icon-add',
           <span style="white-space:pre">   <span style="white-space:pre">  </span></span>handler:addItem
        },{
            text:'删除',
            <span style="white-space:pre">      </span>iconCls:'icon-remove',
            <span style="white-space:pre">      </span>handler:deleteItem
        },{
            text:'刷新',
           <span style="white-space:pre">       </span>iconCls:'icon-reload',
            <span style="white-space:pre">      </span>handler:refresh
        }],
        view: detailview,
        detailFormatter:function(index,row){
            return '<div id="detailForm-'+index+'" style="line-height:500px;"></div>';
        },
        onExpandRow: function(index,row){
            var id= $(this).datagrid('getRows')[index].id;
            $('#detailForm-'+index).panel({
                doSize:true,
                border:false,
                cache:false,
                href:'<oz:contextPath/>/oa/suppliesmgm/DE_ReceiptNoteDetail.jsp?rkdId='+_rkdId+'&id='+id+'&index='+index,
                onLoad:function(){
                    $('#listDetail').datagrid('fixDetailRowHeight',index);
                    $('#listDetail').datagrid('selectRow',index);
                }
            });
            $('#listDetail').datagrid('fixDetailRowHeight',index);
        },
        onDblClickRow:function(index,row){
            $('#listDetail').datagrid('expandRow', index);
            $('#listDetail').datagrid('fitColumns',index);
            $('#listDetail').datagrid('selectRow', index);
        }
    });
});

特殊参数说明：

1、view： 定义DataGrid的view为detailview,需要引入datagrid-detailview.js

2、detailFormatter ：定义了detailview的话，必须定义detailFormatter属性，用以初始化并返回一个DIV容器。

3、onExpandRow：展开后行触发事件，动态把Form放进DIV中。因为是动态加载Form,所以必须把DIV定义不同ID以识别不同的Form,如上面返回的DIV中

【 id="detailForm-'+index+'"】，否则在此例子中展开加载明细时会出现数据错位，注：是此例子。

增、删、改方法：（以下方法因为跟公司平台有关，所以仅供参考。另，这些方法都是写在初始化DataGrid页面而不是写在Form页面。）

//添加
function addItem(){
    $('#listDetail').datagrid('appendRow',{isNewRecord:true});
    var index = $('#listDetail').datagrid('getRows').length - 1;
    $('#listDetail').datagrid('expandRow', index);
    $('#listDetail').datagrid('fitColumns',index);
    $('#listDetail').datagrid('selectRow', index);

}

//删除
function deleteItem(){
     var rows = $('#listDetail').datagrid('getSelections');
     if (null == rows || rows.length == 0) {
        OZ.Msg.info('请选择用品');
        return;
     }
    var ids=[];
    for(var i=0;i<rows.length;i++){
        ids.push(rows[i].id);
    }
    OZ.Msg.confirm(
        '删除入库用品明细将直接影响库存信息，确定删除吗？',
        function(){
            $.getJSON(
                contextPath + "/oa/receiptNoteDetailAction.do?action=deleteDetail&timeStamp=" + new Date().getTime(),
                {ids:ids.join(";")},
                function(json){
                    if(json.result == true){
                        OZ.Msg.info('删除成功');
                        $('#listDetail').datagrid('reload');
                        parent.refresh();//刷新上级页面
                    }else{
                        OZ.Msg.info('抱歉，删除失败');
                    }
                }
            );
        }
    );
}

//保存
function saveItem(index){
    var suppliesCount=$('#detailForm-'+index).find("#suppliesCount").val(),
         count=$('#detailForm-'+index).find("#count").val();

    if(count == '' && count.length<1){
        OZ.Msg.info("出库数量不能为空");
        return false;
    }

    if(parseInt(count) > parseInt(suppliesCount)){
        OZ.Msg.info("出库数量不能大于实际库存数量");
        return false;
    }

    var strUrl = contextPath+'/oa/issueNoteDetailAction.do?action=saveByAjax&timeStamp=' + (new Date().getTime());
    $.ajax({
        type: "POST",
        dataType: "json",
        url:strUrl ,
        data: $('#ozForm').serialize(),
        success: function(json, _status){
            $('#listDetail').datagrid('collapseRow',index);
            $('#listDetail').datagrid('reload');
            parent.refresh();//刷新上级页面
        },
        error: function(xhr, errorMsg, errorThrown){
            OZ.Msg.error("保存操作出现未处理异常！");
        }
    });
}

//取消
function cancelItem(index){
    var row = $('#listDetail').datagrid('getRows')[index];
    if (row.isNewRecord){
        $('#listDetail').datagrid('deleteRow',index);
    } else {
        $('#listDetail').datagrid('collapseRow',index);
    }
}

4、Form表单（同样仅供参考，样式是公司平台的。官方例子的Form页面很简单，可参考它。）

<html:form action="oa/issueNoteDetailAction.do" styleId="ozForm" styleClass="oz-form">
    <div class="oz-form-fields">
        <table cellpadding="0" cellspacing="0" class="dv-table" style="width:600px;background:#fafafa;padding:5px;margin-top:5px;">
            <tr>
                <td colspan="4">
                    <div>
                        <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="saveItem(<%= request.getParameter("index") %>)" id="btnSave">保存</a>
                        <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" plain="true" onclick="cancelItem(<%= request.getParameter("index") %>)">取消</a>
                    </div>
                    <hr/>
                </td>
            </tr>
            <tr>
                <td class="oz-form-label" style="width:80px">库存用品：</td>
                <td class="oz-property" colspan="3">
                    <html:text property="supplies.name" styleId="suppliesName" styleClass="oz-form-zdField" readonly="true" style="width:150px"/>
                    <button type="button" class="oz-form-button" onClick="onBtnSelectSupplies_Clicked(<%= request.getParameter("index") %>);">选择..</button>
                </td>
            </tr>
            <tr>
                <td class="oz-form-label" style="width:80px">用品型号：</td>
                <td class="oz-property">
                    <html:text property="supplies.productType" styleId="suppliesProductType" styleClass="oz-form-zdField"  readonly="true" style="width:150px"/>
                </td>
                <td class="oz-form-label" style="width:80px">参考单价：</td>
                <td class="oz-property">
                    <html:text property="supplies.price" styleId="suppliesPrice" styleClass="oz-form-zdField"  readonly="true" style="width:150px"/>
                </td>
            </tr>
            <tr>
                <td class="oz-form-label" style="width:80px">计量单位：</td>
                <td class="oz-property">
                    <html:text property="supplies.prickle" styleId="suppliesPrickle" styleClass="oz-form-zdField"  readonly="true" style="width:150px"/>
                </td>
                <td class="oz-form-label" style="width:100px">实际库存数量：</td>
                <td class="oz-property">
                    <html:text property="supplies.realCount" styleId="suppliesRealCount" styleClass="oz-form-zdField"  readonly="true" style="width:150px"/>
                </td>
            </tr>
            <tr>
                <td class="oz-form-label" style="width:80px">出库数量：</td>
                <td class="oz-property" colspan="3">
                    <html:text property="count" styleId="count" styleClass="oz-form-btField" style="width:150px"/>
                </td>
            </tr>
            <tr>
                <td class="oz-form-label" style="width:80px">备注：</td>
                <td class="oz-property" colspan="3">
                    <html:textarea property="beizhu" styleId="beizhu" styleClass="oz-form-field" style="width:500px" cols="15"/>
                </td>
            </tr>
        </table>
    </div>
            <html:hidden property="id" styleId="id"/>
            <html:hidden property="supplies.id" styleId="suppliesId"/>
            <html:hidden property="issueNote.id" styleId="issueNoteId"/>
</html:form>

因为在初始化的时候有传id,rkdid，index参数过来，意义在于加载此Form的时候，可以利用Json根据id重新加载数据，这样可以避免保存外键时候出错。

var id=<%= request.getParameter("id") %>;
var _ckdId=<%= request.getParameter("ckdId") %>;
var _index = <%= request.getParameter("index") %>;

$(function(){
    $('#detailForm-'+_index).find('#issueNoteId').val(_ckdId);
    loadomain();
    validate();
});

function loadomain(){
    if(typeof id == "undefined")
        id=-1;
    $.getJSON(
            contextPath + '/oa/issueNoteDetailAction.do?action=getIssueNoteDetail&id=' + id + '&timeStamp=' + new Date().getTime(),
            function(json){
                if(!json.isNew){
                    $('#detailForm-'+_index).find('#id').val(json.id);
                    $('#detailForm-'+_index).find('#beizhu').val(json.beizhu);
                    $('#detailForm-'+_index).find('#count').val(json.count);

                    $('#detailForm-'+_index).find('#suppliesId').val(json.suppliesId);
                    $('#detailForm-'+_index).find('#suppliesPrickle').val(json.suppilesPrickle);
                    $('#detailForm-'+_index).find('#suppliesProductType').val(json.suppliesProductType);
                    $('#detailForm-'+_index).find('#suppliesPrice').val(json.suppliesPrice);
                    $('#detailForm-'+_index).find('#suppliesName').val(json.suppliesName);
                    $('#detailForm-'+_index).find('#suppliesRealCount').val(json.suppliesRealCount);

                }else{
                    $('#detailForm-'+_index).find('#id').val(id);
                }
        })
}

同时，重新加载数据时候注意按照不同DIV找到不同Form的各个字段，否则会加载数据错位。

$('#detailForm-'+_index).find('#suppliesRealCount').val(json.suppliesRealCount);

4、后台代码就贴一段重新加载数据的方法出来，可参考参考：

public ActionForward getIssueNoteDetail(ActionMapping mapping,ActionForm form,HttpServletRequest request,HttpServletResponse response) throws Exception{
        Long id=RequestUtils.getLongParameter(request, "id", -1);
        JSONObject json=new JSONObject();
        json.put("isNew",Boolean.valueOf(false));
        if(id != -1){
            IssueNoteDetail detail=this.getService().load(id);
            json.put("suppliesId",detail.getSupplies().getId());
            json.put("suppliesName",detail.getSupplies().getName());
            json.put("suppliesPrice",detail.getSupplies().getPrice());
            json.put("suppliesProductType",detail.getSupplies().getProductType());
            json.put("suppilesPrickle",detail.getSupplies().getPrickle());
            json.put("suppliesCount",detail.getSupplies().getCount());
            json.put("suppliesRealCount",detail.getSupplies().getRealCount());

            json.put("id",id);
            json.put("beizhu",detail.getBeizhu());
            json.put("count",detail.getCount());
        }else{
            json.put("isNew",Boolean.valueOf(true));
        }
        return renderJson(response, json.toString());
    }