easy的jsp的增删改查在一个jsp页面上
任昊阳
新增的表格和新增的方法：
<div id="dlg" class="easyui-dialog" style="display:none;width:600px; height: 440px;top:10px; padding: 5px 10px;" closed="true" buttons="#dlg-buttons">
<%-- 新增弹出框 begin --%>
<form id="customerForm" method="post">
<table width="98%" border="0" cellspacing="5" cellpadding="0" align="center">
<tr height="40px;">
<td width="15%" height="35px;" align="right">客户单位名称：</td>
<td width="25%" align="left">
<input name="customerId" id="addUnitName" class="easyui-combobox" style="width: 172;" required="true" />
</td>
</tr>
<tr height="40px;">
<td width="15%" height="35px;" align="right">负责人：</td>
<td width="25%" align="left">
<input name="responsiblePerson" id="addResponsiblePerson" class="easyui-combobox" style="width: 172px;" required="true" />
</td>
</tr>
<tr>
<td width="20%" height="35px;" align="right">合同金额：</td>
<td width="30%" align="left">
<input type="text" name="money" id="addMoney" class="easyui-textbox" style="width:172px;" />
</td>
</tr>
<tr height="40px;">
<td width="15%" height="35px;" align="right">合同名称：</td>
<td width="25%" align="left">
<input type="text" name="contractName" id="contractName" class="easyui-textbox" style="width:172px;" />
</td>
</tr>
<tr>
<td width="20%" height="35px;" align="right">签订时间：</td>
<td width="30%" align="left">
<input type="text" name="signDate" id="signDate" class="easyui-datebox" style="width:172px;" />
</td>
</tr>
<tr height="80px;">
<td width="15%" height="35px;" align="right">备注：</td>
<td width="75%" align="left" colspan="3">
<input class="easyui-textbox" data-options="multiline:true" style="width:80%;height:80px" id="remark" name="remark">
</td>
</tr>
</table>
</form>
</div>添加的按钮：<shiro:hasPermission> ：shiro控制权限标签
<shiro:hasPermission name="pay:add">
<a class="actions add easyui-linkbutton " iconCls="icon-add" plain="true">新建</a>
</shiro:hasPermission>点击新建按钮触发add方法
var PaygridPanel = $('#dg').datagrid("getPanel");
PaygridPanel.on("click", "a.add", function() {
$("#customerForm").form('clear'); /* 清空form表单 */
customerForm(); /* 添加方法 */
})customerForm()添加方法：大致过程就是
①点击add按钮，调用customerForm()
②添加销售合同的签订时间设置成当前时间 设置添加的默认值在方法的最前面添加即可
③创建对话框，根据添加form外面的di为dlg的div创建对话框，外面的div的class必须时easyui-dialog
<div id="dlg" class="easyui-dialog" style="display:none;width:600px; height: 440px;top:10px; padding: 5px 10px;" closed="true" buttons="#dlg-buttons">④给添加的对话框添加width宽度，height高度，modal遮罩层，title标题，shadow阴影，buttons按钮,text文本，buttons按钮有个
handler处理方法大致分为
Ⅰ：进行表单验证 Ⅱ：根据customer表单id获取到customer表单 Ⅲ：创建一个新的表单数据 Ⅳ：使用ajax方法调用后台接口
使用ajax方法调用后台接口的大致分为
壹：type 请求的方式
贰：url 请求的路径
叁：data 请求的数据
肆：async 是否异步
伍：Content-Type（内容类型），一般是指网页中存在的 Content-Type
陆：processData 默认为true，当设置为true的时候,jquery ajax 提交的时候不会序列化 data，而是直接使用data
柒：success 成功和失败的回调方法 成功要关闭对话框，重载表格并给出消息提示
/* 新增弹出框 */
function customerForm() {
/* 给jsp的签订时间设置当前时间 */
$('#signDate').datebox('setValue',myformatter(new Date));
var win = $('#dlg').dialog({ //创建弹出框
width : '500',
height : '400',
modal : true, //遮罩层
title : '添加销售合同',
shadow : true, //阴影
buttons : [ { //
text : '提交',
iconCls : 'icon-ok',
handler : function() {
if ($("#customerForm").form('validate')) { /* 进行表单验证 */
var formData = document.getElementById("customerForm"); /* 通过id获取到用户表单 */
var data = new FormData(formData); /* 创建一个新的表单数据 */
$.ajax({
type : "post",
url : "${ctx}/financialSalesContract/addFinancialSalesContract",
data : data,
async : false, /* 是否同步 */
contentType : false,
processData : false,
success : function(data) {
$("#dlg").dialog('close'); /* 关闭对话框 */
$("#dg").datagrid("reload"); /* 重载表格 */
$.messager.show({
title : '消息提示',
msg : '保存成功',
timeout : 2000,
showType : 'slide'
});
}
});
}
}
}, {
text : '关闭',
iconCls : 'icon-no',
handler : function() {
$("#dlg").dialog('close');
}
}]
});
win.dialog('open'); //打开添加对话框
win.window('center'); //使Dialog居中显示
}修改的表格和修改的方法：
<%-- 修改弹出框 begin --%>
<div id="editDlg" class="easyui-dialog" style="display:none;width:600px; height: 440px;top:10px; padding: 5px 10px;" closed="true" buttons="#dlg-buttons">
<form id="editCustomerForm" method="post">
<table width="98%" border="0" cellspacing="5" cellpadding="0" align="center">
<tr height="40px;">
<td width="15%" height="35px;" align="right">客户单位名称：</td>
<td width="25%" align="left">
<input name="customerId" id="editUnitName" class="easyui-combobox" size="35px" required="true" style="width: 172;" />
</td>
</tr>
<tr height="40px;">
<td width="15%" height="35px;" align="right">负责人：</td>
<td width="25%" align="left">
<input name="responsiblePerson" id="editResponsiblePerson" class="easyui-combobox" style="width: 172px;" required="true" />
</td>
</tr>
<tr>
<td width="20%" height="35px;" align="right">合同金额：</td>
<td width="30%" align="left">
<input type="text" name="money" id="money" class="easyui-numberbox" size="50px" style="width: 172px;"/>元
</td>
</tr>
<tr height="40px;">
<td width="15%" height="35px;" align="right">合同名称：</td>
<td width="25%" align="left">
<input name="contractName" id="editContractName" class="easyui-textbox" size="35px" style="width: 172px;" />
</td>
</tr>
<tr>
<td width="20%" height="35px;" align="right">签订时间：</td>
<td width="30%" align="left">
<input name="signDate" id="editSignDate" class="easyui-datebox" size="35px" style="width: 172px;" />
</td>
</tr>
<tr height="80px;">
<td width="15%" height="35px;" align="right">备注：</td>
<td width="75%" align="left" colspan="3">
<input class="easyui-textbox" data-options="multiline:true" style="width:80%;height:80px" id="editRemark" name="remark">
</td>
</tr>
</table>
</form>
</div>
<%-- 修改弹出框end --%>添加的按钮：<shiro:hasPermission> ：shiro控制权限标签
<shiro:hasPermission name="pay:edit">
<a class="actions edit easyui-linkbutton " iconCls="icon-edit" plain="true">编辑</a>
</shiro:hasPermission>点击修改按钮触发edit方法：
根据数据表格id获取到数据表格的行数据，然后进行判断长度<=0，提示，选择修改的行
判断长度>1，提示只能选择一条数据修改
判断长度=1，var id = rows[0].id,获取到修改的id值
var PaygridPanel = $('#dg').datagrid("getPanel");
PaygridPanel.on("click", "a.edit", function() {
var rows = $('#dg').datagrid('getSelections'); /* 获取数据表格的行 */
if (rows.length <= 0) {
$.messager.alert('提示', '请选择要修改的行', 'error');
} else if (rows.length > 1) {
$.messager.alert('提示', '只能选择一条数据进行修改', 'error');
} else if (rows.length == 1) {
var id = rows[0].id;
editCustomerForm(id);
}
})editCustomerForm()修改方法：大致过程就是
①点击edit按钮，调用editCustomerForm(id)
②修改之前要先根据id查询出销售合同信息，然后再把这些数据显示出来
③先用ajax调用后台的根据id查询销售合同列表信息的方法 success：function(data){}
根据修改表格中的每一行数据的id为每一行设置值
给easyui-textbox文本框赋值 $("#money").textbox('setValue', data.money);
给easyui-combobox下拉框赋值 $("#editCity").combobox('setValue', data.city);
给easyui-databox日期框赋值 var time = myformatter(data.signDate); $("#editSignDate").datebox("setValue", time);
④创建修改对话框，根据添加form外面的di为editDlg的div创建对话框，外面的div的class必须时easyui-dialog
④给添加的对话框添加width宽度，height高度，modal遮罩层，title标题，shadow阴影，buttons按钮,text文本，buttons按钮有个
handler处理方法大致分为
Ⅰ：修改之前先提示用户确定修改吗 Ⅱ：根据editCustomer表单id获取到editCustomer表单 Ⅲ：创建一个新的表单数据 Ⅳ：修改的时候需要把id set进去 Ⅴ：使用ajax方法调用后台接口的大致分为
壹：type 请求的方式
贰：url 请求的路径
叁：data 请求的数据
肆：async 是否异步
伍：Content-Type（内容类型），一般是指网页中存在的 Content-Type
陆：processData 默认为true，当设置为true的时候,jquery ajax 提交的时候不会序列化 data，而是直接使用data
柒：success 成功和失败的回调方法 成功要关闭对话框，重载表格并给出消息提示
/* 修改弹出框 */
function editCustomerForm(id) {
/* 修改之前先要根据id查询出销售合同信息，然后再把这些数据显示出来 */
$.ajax({
type : "post",
url : "${ctx}/financialSalesContract/selFinancialSalesContractById?id=" + id,
async : false,
contentType : false,
processData : false,
success : function(data) {
$("#money").textbox('setValue', data.money);
$("#editUnitName").combobox('setValue', data.customerId);
$("#editCity").combobox('setValue', data.city);
$("#acceptMoney").textbox("setValue", data.acceptMoney);
$("#editContractName").textbox("setValue", data.contractName);
$("#contractNo").textbox("setValue", data.contractNo);
$("#editResponsiblePerson").combobox('setValue', data.responsiblePerson);
$("#editCustomerCategory").combobox('setValue', data.customerCategory);
var time = myformatter(data.signDate);
$("#editSignDate").datebox("setValue", time);
$("#editRemark").textbox("setValue", data.remark);
},
error : function(data) {}
})
var win = $('#editDlg').dialog({ //创建弹出框
width : '500',
height : '400',
modal : true, //遮罩层
title : '修改销售合同',
shadow : true, //阴影
buttons : [ { //按钮
text : '提交',
iconCls : 'icon-ok',
handler : function() {
$.messager.confirm('提示', '您确定要修改吗', function(t) {
if (t) {
if ($("#editCustomerForm").form('validate')) {
var formData = document.getElementById("editCustomerForm");
var data = new FormData(formData);
/* 修改的时候需要把id set进去 */
data.set("id", id);
data.get("id");
$.ajax({
type : "post",
url : "${ctx}/financialSalesContract/editFinancialSalesContract",
data : data,
async : false,
contentType : false,
processData : false,
success : function(data) {
$("#editDlg").dialog('close');
$("#dg").datagrid("reload");
$.messager.show({
title : '消息提示',
msg : '修改成功',
timeout : 2000,
showType : 'slide'
});
}
});
}
}
});
}
}, {
text : '关闭',
iconCls : 'icon-no',
handler : function() {
$("#editDlg").dialog('close');
}
}
]
});
win.dialog('open'); //打开添加对话框
win.window('center'); //使Dialog居中显示
}根据id删除表格数据的方法
删除的按钮：<shiro:hasPermission> ：shiro控制权限标签
<shiro:hasPermission name="pay:delete">
<a class="actions delete easyui-linkbutton " iconCls="icon-remove" plain="true">删除</a>
</shiro:hasPermission>点击删除按钮触发delete方法：
根据数据表格id获取到数据表格的行数据，然后进行判断长度<=0，提示，选择要删除的行
判断长度>1，提示只能选择一条数据删除
判断长度=1，提示确定要删除此数据吗
var id = rows[0].id; delCustomerForm(id);
重载表格数据
var PaygridPanel = $('#dg').datagrid("getPanel");
PaygridPanel.on("click", "a.delete", function() {
var rows = $('#dg').datagrid('getSelections');
if (rows.length <= 0) {
$.messager.alert('提示', '请选择要刪除的行', 'error');
} else if (rows.length > 1) {
$.messager.alert('提示', '只能选择一条数据进行修改', 'error');
} else if (rows.length == 1) {
$.messager.confirm("提示", "您确定要删除此数据?", function(r) {
if (r) {
var id = rows[0].id;
delCustomerForm(id);
/*数据表格重载*/
$("#dg").datagrid("reload");
}
});
}
})delCustomerForm(id)添加方法：大致过程就是直接调用根据id删除表格数据的方法
function delCustomerForm(id) {
$.ajax({
type : "get",
url : "${ctx}/financialSalesContract/delFinancialSalesContractById?id=" + id,
async : false,
contentType : false,
processData : false,
success : function(data) {
$.messager.show({
title : '消息提示',
msg : '刪除成功',
timeout : 2000,
showType : 'slide'
});
},
error : function(data) {}
})
}查看表格数据列表的方法
根据table表格的id为dg进行渲染 $("#dg).datagrid({ })
columns:
$(document).ready(function() {
$('#dg').datagrid({
title : '销售合同列表',
nowrap : false, /* 设置为 true，则把数据显示在一行里。设置为 true 可提高加载性能。 */
locale : "zh_CN",
iconCls : 'icon-save', /* 添加按钮 */
striped : true, /* 设置为 true，则把行条纹化。（即奇偶行使用不同背景色） */
collapsible : true,/*可折叠的内容块*/
scrollbarSize : 0, /* 滚动条宽度（当滚动条是垂直的时候）或者滚动条的高度（当滚动条是水平的时候） */
height : $(window).height() - 150,
url : '${ctx}/financialSalesContract/queryFinancialSalesContractList',/*查询的销售合同列表的方法*/
rownumbers : true, /* 设置为 true，则显示带有行号的列 */
pagination :true, //表示在datagrid设置分页
singleSelect : true,/*easyUI的datagrid设置了singleSelect=true（即单选），取消复选框的选中状态*/
pageSize : 500,
pageNumber : 1,
pageList : [ 100, 200, 300, 400, 500 ],
columns : [ [
{
field : 'unitName',
title : '客户单位名称',
width : '13%',
align : 'center'
},{
field : 'contractName',
title : '合同名称',
width : '10%',
align : 'center'
},{
field : 'area',
title : '城市',
width : '8%',
align : 'center'
}, {
field : 'money',
title : '合同金额',
width : '5%',
align : 'center'
}, {
field : 'sumAcceptMoney',
title : '已收合同金额',
width : '5%',
align : 'center',
/* formatter : function(value, row, index) {
var num = row.sumAcceptMoney==undefined || row.sumAcceptMoney == "" || row.sumAcceptMoney == ''?0:row.sumAcceptMoney;
if(num <=0){
return 0;
}else{
return num;
}
} */
},{
field : 'unAcceptMoney',
title : '结存',
width : '5%',
align : 'center',
},{
field : 'invoicedAmount',
title : '已开票金额',
width : '5%',
align : 'center',
},{
field : 'responsiblePerson',
title : '负责人',
align : 'center',
width : '5%'
},{
field : 'customerCategory',
title : '客户类别',
align : 'center',
width : '4%'
},{
field : 'signDate',
title : '签订时间',
width : '6%',
align : 'center',
/* datagarid的formatter属性
formatter 属于列参数，表示对于当前列的数据进行格式化操作，它是一个函数，有三个参数，分别是value，row,index
value：表示当前单元格中的值
row：表示当前行
index：表示当前行的下标
可以使用return返回想要的数据显示在单元格中
*/
formatter : function(value, row, index) {
var str = "";
if ("" != row.signDate && null != row.signDate) {
return new Date(row.signDate).format("yyyy-MM-dd");
}
return str;
}
},
{
field : 'remark',
title : '备注',
width : '12%',
align : 'center'
}, {
field : 'caozuo',
title : '操作',
width : '22%',
align : 'center',
formatter : function(value, row, index) {
var str="";
var acceptId = row.id;
var contractId = row.id;
var salesId = row.id
if(row.id=="unAcceptMoneyy"){
str='';
}else{
str += "<a style='color:blue' href='javascript:void(0)' title='产品清单' onclick='detailListForm('" + salesId + "')'>产品清单 </a>";
str += "<a style='color:blue' href='javascript:void(0)' title='回款记录' onclick='linkForm('" + acceptId + "')'>回款记录<span>('" + row.detallCount + "')</span> </a>";
str += "<a style='color:blue' href='javascript:void(0)' title='合同附件' onclick='certificateForm('" + contractId + "')'>合同附件<span>('" + row.certificateCount + "')</span> </a>";
str += "<a style='color:blue' href='javascript:void(0)' title='开票记录' onclick='salesInvoicingForm('" + contractId + "')'>开票记录<span>('" + row.salesInvoicingCount + "')</span></a>";
}
return str;
}
} ] ],
toolbar : '#ReceGridToolbar',
})添加合计
$('#dg').datagrid({
onLoadSuccess: function(data) {
var rows = $('#dg').datagrid('getRows') //获取当前的数据行
var ptotal = 0 //计算开票金额的总和
var invo = 0 //计算已收合同金额的总和
var sumMoney = 0;//计算合同金额总和
var un =0 //计算结存总和
/* sumAcceptMoney */
for(var i = 0; i < rows.length; i++) {
ptotal += parseFloat(rows[i]['invoicedAmount']);
invo += parseFloat(rows[i]['sumAcceptMoney']);
sumMoney += parseFloat(rows[i]['money']);
un += parseFloat(rows[i]['unAcceptMoney']);
}
if(isNaN(ptotal)){
ptotal='0'
}
if(isNaN(invo)){
invo='0'
}
if(isNaN(sumMoney)){
sumMoney='0'
}
if(isNaN(un)){
un='0'
}
//新增一行显示统计信息
$('#dg').datagrid('appendRow', {
id:'unAcceptMoneyy',
area: '<b>合计：</b>',
invoicedAmount:ptotal,
sumAcceptMoney:invo,
money:sumMoney,
unAcceptMoney:un
});
},
rowStyler: function(index, row) {
if(row.area == '<b>合计：</b>') {
return 'background-color:#EAEAEA;color:blue';
}
}
});在添加客户公司名称下拉框方法
根据添加客户公司名称的id addUnitName
先写个ajax方法 在success成功方法里面使用
$("#addUnitName").combobox({
data：data
valueField："id",
textFild："text"
}) //获取客户公司名称下拉框值
$.ajax({
type : "get",
url : "${ctx}/customer/customerCompanyCombobox",
async : false,
success : function(data) {
$("#addUnitName").combobox({ //往下拉框塞值
data : data,
valueField : "id", //value值
textFild : "text" //文本值
});
},
error : function(data) {}
})获取字典里的城市ajax方法
//获取城市下拉框值
$.ajax({
type : "get",
url : "${ctx}/sysDict/getDictList?parentKey=CSDM",
async : false,
success : function(data) {
var jso = JSON.parse(data);
$("#addCity").combobox({ //往下拉框塞值
data : jso,
valueField : "text", //value值
textFild : "text" //文本值
});
},
error : function(data) {}
})分页处理
//分页处理
$("#dg").datagrid("getPager").pagination({
pageSize:500,
pageNumber:1,
pageList:[100,200,300,400,500],
beforePageText:"第",//页数文本框前显示的汉字
afterPageText:"页 共{pages} 页 ",
disPlayMsg:"当前显示{form} - {to} 条记录 共{total} 条记录"
})在form表单里面加入操作列，并加上a标签跳转到其他的页面，一般操作的a标签都要带上外键id
{
field : 'caozuo',
title : '操作',
width : '22%',
align : 'center',
formatter : function(value, row, index) {
var str="";
var acceptId = row.id;
var contractId = row.id;
var salesId = row.id
if(row.id=="unAcceptMoneyy"){
str='';
}else{
str += "<a style='color:blue' href='javascript:void(0)' title='产品清单' onclick='detailListForm('" + salesId + "')'>产品清单 </a>";
str += "<a style='color:blue' href='javascript:void(0)' title='回款记录' onclick='linkForm('" + acceptId + "')'>回款记录<span>('" + row.detallCount + "')</span> </a>";
str += "<a style='color:blue' href='javascript:void(0)' title='合同附件' onclick='certificateForm('" + contractId + "')'>合同附件<span>('" + row.certificateCount + "')</span> </a>";
str += "<a style='color:blue' href='javascript:void(0)' title='开票记录' onclick='salesInvoicingForm('" + contractId + "')'>开票记录<span>('" + row.salesInvoicingCount + "')</span></a>";
}
return str;
}
}
/* 产品价格清单方法 */
function detailListForm(salesId) {
var content = "<iframe src='${ctx}/salesPrice/detailListPage?salesId=" + salesId + "' width='100%' height='98%' frameborder='0' scrolling='0'></iframe>";
// 创建窗口
var dialog = $("<div/>").dialog(
{
content : content,
title :'产品价格清单',
height : '90%',
width : '100%',
modal : true,
onClose : function() {
// 窗口关闭的同时销毁此窗口
$(this).dialog("destroy");
},
buttons: [{
iconCls: 'icon-back',
text: '返回',
handler: function() {
//关闭窗口
dialog.dialog("close");
//刷新数据表格
$("#dg").datagrid("reload");
}
}]
});
}模糊查询
模糊查询的form表单
<div class="panel-header" data-options="region:'north' " border="0" cellspacing="8" cellpadding="0" style="height: 60px;padding: 10px;overflow: hidden;width:98.5%">
<form action="" name="QueryForm" id="QueryForm">
客户单位名称：<input name="customerId" id="searchCustomerId" class="easyui-combobox"/>
城市：<input type="text" name="area" id="searchCity" class="easyui-combobox"/>
合同名称：<input type="text" name="contractName" id="contractNameId" class="easyui-textbox"/>
负责人：<input type="text" name="responsiblePerson" id="searchResponsiblePerson" class="easyui-combobox"/>
<br>
<br>
客户类别：<input type="text" name="customerCategory" id="searchCustomerCategory" class="easyui-combobox"/>
结存条件<select id="jcMoney" name="jcMoney" class="easyui-combobox" style="width:150px;">
<option value="0">结存大于0</option>
<option value="1" selected>所有</option>
</select>
<!-- <a class="actions search easyui-linkbutton" iconCls="icon-search">搜索</a>
<a class="actions print easyui-linkbutton" iconCls="icon-print">导出</a> -->
签订时间:<input class="easyui-datebox" name="beginDate" id="f_beginDate" />至 <input class="easyui-datebox" name="endDate" id="f_endDate" />
<td style="text-align: left;" colspan="6">
<button class="easyui-linkbutton" type="button" iconCls="icon-search" style="height: 24px;margin-left: 3px;" onclick="queryFun()">查询</button>
<button class="easyui-linkbutton" type="button" iconCls="icon-redo" style="height: 24px;margin-left:3px;" onclick="empty()">重置</button>
</td>
</form>
</div>查询条件
easyui-textbox获取值：$("#contractNameId").val
easyui-combobox获取值分两种：
获取字典里的值：$("#searchCity").combobox("getText");
获取数据库里的值：$("#searchCustomerId").combobox("getValue");
easyui-databox获取值：$("#f_beginDate").databox("getValue");
//查询条件
function queryFun() {
var queryParameter = $('#dg').datagrid("options").queryParams;
/* 根据合同名称查询 */
queryParameter.contractName = $("#contractNameId").val();
/* 根据城市查询 */
queryParameter.area = $("#searchCity").combobox("getText");
/* 根据负责人查询 */
queryParameter.responsiblePerson = $("#searchResponsiblePerson").combobox("getText");
/* 根据客户单位名称查询 */
queryParameter.customerId = $("#searchCustomerId").combobox("getValue");
/* 根据客户类别查询 */
queryParameter.customerCategory = $("#searchCustomerCategory").combobox("getText");
/* 根据结存条件查询 */
queryParameter.jcMoney = $("#jcMoney").combobox("getValue");
/* 根据签订时间查询 */
queryParameter.beginDate = $("#f_beginDate").datebox("getValue");
/* 根据签订时间查询 */
queryParameter.endDate = $("#f_endDate").datebox("getValue");
$("#dg").datagrid("reload");
}
类似资料：