EasyUI----DataGrid行明细增删改操作
2015-11-23 17:23
513 查看
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());
}
本文实现的是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());
}
相关文章推荐
- reason: 'could not dequeue a view of kind: UICollectionElementKindCell with identifier cellIdentifie
- Kibana User Guide [4.2] » Settings » Setting Kibana Server Properties
- [LeetCode] Range Sum Query - Mutable
- iOS-UIImage 互转 UIColor
- 二十六天( UI开始)
- iOS 【UIKit-UIPickerView】
- mrc下自定义UITableViewCell写法
- datagrid参数queryParams--easyUI
- EASYUI datagrid批量修改与提交
- Kibana User Guide [4.2] » Settings » Setting Advanced Options
- hdu5568 sequence2(dp + 高精度)
- UI复习
- [Qt]新增UAC功能之requireAdministrator
- iOS 9人机界面指南(一):UI设计基础
- IOS上 关于状态栏的相关设置(UIStatusBar)(转载自shede333博客)
- UITextFieldDelegate和tap事件
- UIToolBar
- iOS学习笔记--03 UITableView相关
- UITextField *textfield常用的取消键盘方法
- dialect does not support sequences