a.前端显示
datagrid数据网格
<div id="divAppeaAdd" title="检验" style="padding:10px;height: 400px">
<form id="fmAppeaAdd" style="margin:0;padding:30px 30px " enctype="multipart/form-data" method="post">
<table id="dgAppeaAdd" class="easyui-datagrid" style="width: 98%;height:300px" data-options="resize:true">
</table>
</form>
</div>
**b.使用JS创建datagrid表格
var editIndex = undefined; //定义全局编辑行索引
function endEditing() {
if (editIndex == undefined) { //判断是否有编辑的行
return true
}
//validateRow验证行，若有编辑行，则结束行编辑
if ($('#dgAppeaAdd').datagrid('validateRow', editIndex)) {
$('#dgAppeaAdd').datagrid('endEdit', editIndex);
editIndex = undefined;
return true;
} else {
return false;
}
}
function showAppea() {
$("#dgAppeaAdd").datagrid({
//工具栏
toolbar: [{
text: '添加', iconCls: 'icon-add', handler: function () {//添加列表的操作按钮添加，修改，删除等
//添加时如果没有正在编辑的行，则在datagrid的第一行插入一行
if (endEditing()) { //判断是否有编辑行，有则关闭编辑状态
$("#dgAppeaAdd").datagrid('endEdit', editIndex);
var lastIndex = $('#dgAppeaAdd').datagrid('getRows').length; //获取datagrid中所有行的长度
//新增一行在最后
$("#dgAppeaAdd").datagrid("insertRow", {
index: lastIndex, // index start with 0
row: {}
});
//并开启这行编辑
$("#dgAppeaAdd").datagrid("beginEdit",lastIndex);
editIndex = lastIndex;
} else {
$('#dgAppeaAdd').datagrid('selectRow', editIndex);
}
}
},
{
text: '保存', iconCls: 'icon-save',
handler: function (rowIndex) {
console.info("保存。。。。");
var rowindex = $('#dgAppeaAdd').datagrid('getRows');
//如不用 JSON.stringify转换的话前端会报错
for (var i = 0; i < JSON.stringify(rowindex.length); i++) {
//循环读取所有行，并结束编辑状态
editIndex = i;
$('#dgAppeaAdd').datagrid('endEdit', editIndex);
editIndex = undefined;
}
var flag = $("#dgAppeaAdd").datagrid("validateRow", editIndex);
if (!flag) {
$.messager.alert("提示", "无法通过验证！");
return;
}
var rows = $('#dgAppeaAdd').datagrid('getRows');
// getSelections选中的多行 getRows返回当前页面的所有行 getChanges 获取最后一次提交以来更改的行
// var rows = $('#dgAppeaAdd').datagrid('getChanges','inserted');
if (rows.length < 1) {
$.messager.alert("系统提示", "请至少选择一条要保存的数据！");
return;
} else {
var dataAppea = [];
var params = {};
$.each(rows, function (i, item) {
params = { //这是输入框中的值，可忽略
"companyName": $("#addcompanyName").val(),
"docNo": $("#addDocNo").val(),
"docName": $("#addDocName").val(),
"docRev": $("#addDocRev").val(),
"preparedBy": $("#addPreparedBy").val(),
"issueDate": $("#addIssueDate").val(),
"spec": $("#addSpec").val(),
"pn": $("#addPn").val(),
"partName": $("#addPartName").val(),
"pnRev": $("#addPnRev").val(),
itemNo: i + 1,
//以下是循环获取datagrid中的值
inspectionItem: rows[i].inspectionItem,
inspectConditionStepMethod: rows[i].inspectConditionStepMethod,
failName: rows[i].failName,
standard: rows[i].standard,
photo: photoList[i],
ssName: rows[i].ssName,
aql: rows[i].aql,
measuringEquipment: rows[i].measuringEquipment,
ss: rows[i].ss,
aQty: rows[i].aQty,
rQty: rows[i].rQty,
inspectionType: '检验'
};
dataAppea.push(params);
});
// var formData = new FormData();
// formData.append("is",dataAppea);multipart/form-data processData: false ,
$.ajax({
url: 'addIS.do',
data: JSON.stringify(dataAppea),
type: 'POST',
dataType: 'json',
contentType: "application/json;charset=UTF-8;",
success: function (result) {
if (result.code == 0) {
// $('#dlg0').dialog('close'); // close the dialog
$.messager.alert("提示信息", result.message, "info");
$('#g').datagrid('reload'); // reload the user data
} else {
$.messager.alert("提示信息", result.message, "error");
}
}
});
}
}
}],
columns: [
[//定义标题行所有的列
{field: 'num', title: 'num', checkbox: true, align: 'center', titleAlign: true},
{
field: 'itemNo',
title: 'No.',
align: 'center',
titleAlign: true,
formatter: function (value, row, index) {//设置自动增长列
index += 1;//设置起始序号为1，如果不加这行代码序号就会从0开始
// sortIndex=index;
return index++;//根据行的数量不断自增
}
},
{
field: 'inspectionItem', title: '检验项次', align: 'center', titleAlign: true,
editor: {
type: 'textbox',
options: {required: true}
}
// , formatter: function (value, row, index) {
// inspectionItemPhoto=value;
// // alert(inspectionItemPhoto);
// }
},
{
field: 'inspectConditionStepMethod', title: '检验条件方法与步骤', align: 'center', titleAlign: true,
editor: {
type: 'textbox',
options: {required: true}
}
},
{
field: 'failName', title: '不良类别', align: 'center', titleAlign: true,
editor: {
type: 'textbox',
options: {required: true}
}
}, //formatter:showLink
{
field: 'standard', title: '判定标准', align: 'center', titleAlign: true,
editor: {
type: 'textbox',
options: {required: true}
}
},
//页面上上的是这个
// {field: 'photoNew', title: '图片展示',id:'showPhoto', align: 'center', titleAlign: true,resizable:true
// },
{
field: 'ssName', title: '抽样标准名称', align: 'center', titleAlign: true,
editor: {
type: 'textbox',
options: {required: true}
}
},
{
field: 'aql', title: '允收品质水准', align: 'center', titleAlign: true,
editor: {
type: 'textbox',
}
},
{
field: 'measuringEquipment', title: '检验所用仪器/量具', align: 'center', titleAlign: true,
editor: {
type: 'textbox',
}
},
{
field: 'ss', title: '抽样样本量', align: 'center', titleAlign: true,
editor: {
type: 'numberbox',
}
},
{
field: 'aQty', title: '允收数', align: 'center', titleAlign: true,
editor: {
type: 'numberbox',
options: {required: true}
}
},
{
field: 'rQty', title: '拒收数', align: 'center', titleAlign: true, editor: {
type: 'numberbox',
}
},
// {field: 'docNo', title: '文件版本', align: 'center', titleAlign: true},
// {field: 'id', title: '编号', align: 'center', titleAlign: true},
{
field: 'inspectionType',
title: '检验类别',
align: 'center',
titleAlign: true,
hidden:true,
formatter: function (value) {
return '外观检测'
}
}, {
field: 'uploadPhoto',
id: 'uploadPhoto',
title: '图片上传',
align: 'center',
titleAlign: true,
formatter: function (value, index) {
var str = "<a href='#' onclick=\"addPhoto()\">上传</a>";
return str;
}
}
]
],
// loadMsg: "正在加载数据...",hidden:'true',
fitColumns: true,//列的宽度填满表格，防止下方出现滚动条
singleSelect: false,//是否可以单选
// checkOnSelect:true, //当用户点击某一行时，则会选中/取消选中复选框
pagination: false,//分页条
fit: true,
striped: true, //列条纹
onDblClickRow: onDbClickRowFunction //双击开启行编辑
});
}
//双击开启行编辑
function onDbClickRowFunction(rowIndex,rowData) {$('#dgAppeaAdd').datagrid('selectRow',rowIndex).datagrid('beginEdit',rowIndex);
editIndex=rowIndex;
c.后端接收数据Controller
@RequestMapping(value = "/addIS.do", method = RequestMethod.POST)
@ResponseBody
public BaseResult addIS(HttpServletRequest request,@RequestBody List<InspectionStandard> is) throws Exception {
int itemNo=0;
for (InspectionStandard iss : is) {
if (iss.getItemNo() == 0) {
itemNo = 0;
} else {
itemNo = iss.getItemNo();
}
int index = isMapper.isExist(iss.getDocNo(), iss.getDocRev(), iss.getInspectionType(), itemNo);
System.out.println("index:" + index);
if (index != 0) {
return new BaseResult<>(BaseErrMsg.DATA_ALREADY_EXISTS, "此信息已存在，请重新输入！");
}
}
for (InspectionStandard iss : is){
iss.setPreparedDate(new Date());
iss.setEffictStatus("Y");
isService.insertSelectList(is);
}
return new BaseResult<>(BaseErrMsg.DEFAULT_SUCCESS_MESSAGE);
}
