一、前段页面EasyUi做的
- 单位 建设性质 项目编码 项目名称为es索引,搜索数据库筛选过滤条件。
- 时间插件只能选择年份,选择对应的年份会展示所有该年份的项目对应投资金额,并且会有汇总行,展示所欲查到的数据投资金额汇总
- 只要不选不选择时间插件的过滤,所有的汇总值显示的是该项目所有年份汇总值的总和
- 只有选择年份以后查到的结果 才可以对投资金额单元格进行编辑,点击按钮可以保存,如果该年投资值存在则修改 不存在则添加该项目该年的投资值
废话不多说直接上代码:
主页面project.html
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>项目测试</title>
<link rel="stylesheet" type="text/css" href="/ESEasyUi/static/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="/ESEasyUi/static/easyui/themes/icon.css">
<script type="text/javascript" src="/ESEasyUi/static/common/jquery.min.js"></script>
<script type="text/javascript" src="/ESEasyUi/static/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="/ESEasyUi/static/easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="/ESEasyUi/static/common/validata.form.js"></script>
<script type="text/javascript" src="/ESEasyUi/static/common/plugin.js"></script>
<script>
$(function () {
var editIndex = undefined;
function endEditing() {
if (editIndex == undefined) {
return true
}
if ($('#project_dg').datagrid('validateRow', editIndex)) {
$('#project_dg').datagrid('endEdit', editIndex);
editIndex = undefined;
return true;
} else {
return false;
}
}
$("#project_dg").datagrid({
url: '/ESEasyUi/projectController/queryProjectByPage',
remoteSort: false,
sortName: "projectPrice",
sortOrder: "desc",
method: "get",
fitColumns: true,
toolbar: '#tb',
striped: true,
pagination: true,
rownumbers: false,
singleSelect: true,
ctrlSelect: true,
pageSize: 10,
pageList: [3, 5, 10, 20],
queryParams: {
projectName: $("#projectNameBox").val(),
affiliatedUnit: $("#affiliatedUnitBox").val(),
projectId: $("#projectIdBox").val(),
buildNature: $("#buildNatureBox").val(),
projectTime: $("#projectTimeBox").val()
},
onLoadSuccess: function () {
var project = {
"affiliatedUnit": $("#affiliatedUnitBox").val(),
"projectId": $("#projectIdBox").val(),
"projectName": $("#projectNameBox").val(),
"buildNature": $("#buildNatureBox").val(),
"projectTime": $("#projectTimeBox").val()
};
$.ajax({
dataType: "json",
type: "POST",
contentType: "application/json",
data: JSON.stringify(project),
url: "/ESEasyUi/projectController/queryTotalSum",
success: function (data) {
console.log(data);
$("#project_dg").datagrid('insertRow', {
index: 0,
row: {
projectName: '汇总',
affiliatedUnit: "",
projectId: "",
buildNature: "",
projectPrice: data
}
});
},
});
},
rowStyler: function (index, row) {
if (row.projectName == "汇总") {
return "background-color:Yellow;";
}
},
columns: [[
{field: 'projectName', title: '项目名称', width: "20%", align: "center"},
{field: 'affiliatedUnit', title: '所属单位', width: "20%", align: "center"},
{field: 'projectId', title: '项目编码', width: "20%", align: "center"},
{field: 'buildNature', title: '建设性质', width: "20%", align: "center"},
{
field: 'projectPrice', title: '总计划值', width: "20%", align: "center",
sortable: true,
formatter:function(v){
return parseFloat(v).toFixed(2)
}
}
]]
});
$("#project_save").click(function () {
var selectRow = $('#project_dg').datagrid('getSelected');
submitForm(selectRow);
});
function submitForm(selectRow) {
var projectId = selectRow.projectId;
var projectTime = $("#projectTimeBox").val();
var finalProjectPrice = selectRow.projectPrice;
var reg = new RegExp("^(\\d|[1-9]\\d|100)(\\.\\d{1,2})?$");
if (!reg.test(finalProjectPrice)) {
alert('修改失败!请输入0-100的数字,保留两位小数!');
return;
}else {
alert("修改"+selectRow.projectName+$("#projectTimeBox").val()+"年计划值为"+finalProjectPrice+"万");
}
var project = {
"projectName":selectRow.projectName,
"projectId": projectId,
"projectTime": projectTime,
"projectPrice":finalProjectPrice,
"affiliatedUnit":selectRow.affiliatedUnit,
"buildNature" : selectRow.buildNature
};
$.ajax({
dataType: "json",
type: "POST",
contentType: "application/json",
data: JSON.stringify(project),
url: "/ESEasyUi/projectController/updateProjectPrice",
success: function (data) {
if (data == true) {
$("#project_dg").datagrid('reload');
}
}
})
$("#project_dg").datagrid('reload');
}
$("#project_edit").click(function () {
var rows = $("#project_dg").datagrid('getSelections');
if (rows.length != 1) {
$.messager.alert("警告", "请选择一行数据修改");
$("#project_dg").datagrid("unselectAll");
return
} else {
var row = $("#project_dg").datagrid("getSelected");
$("#project_edit_dialog").dialog("open");
$("#project_edit_dialog").data("row", row)
}
});
$("#project_edit_dialog").dialog({
width: 400,
height: 330,
title: "修改项目",
top: 120,
href: '/ESEasyUi/projectform/edit_project.html',
closed: true,
closable: true,
draggable: true,
cache: false,
modal: true,
buttons: [{
text: '修改',
iconCls: 'icon-ok',
handler: function () {
$("#project_edit_form").form("submit")
}
}, {
text: '重置',
iconCls: 'icon-redo',
handler: function () {
$("#project_edit_form").form("clear")
}
}],
onLoad: function () {
$("#project_edit_form").form("load", $("#project_edit_dialog").data("row"));
$("#projectNameUpdate").prop('value', $("#project_edit_dialog").data("row").projectName);
$("#projectIdUpdate").prop('value', $("#project_edit_dialog").data("row").projectId);
$("#affiliatedUnitUpdate").combobox('select', $("#project_edit_dialog").data("row").affiliatedUnit);
$("#buildNatureUpdate").combobox('select', $("#project_edit_dialog").data("row").buildNature);
}
});
$("#project_add").click(function () {
$("#project_add_dialog").dialog("open")
});
$("#project_add_dialog").dialog({
height: 420,
width: 400,
title: "添加项目",
top: 120,
href: "/ESEasyUi/projectform/addProject.html",
closed: true,
closable: true,
draggable: false,
cache: false,
modal: true,
buttons: [{
text: '取消',
handler: function () {
$("#project_add_dialog").dialog("close");
$("#project_dg").datagrid("reload")
}
}, {
text: '确认',
handler: function () {
$("#project_add_form").form("submit")
}
}]
});
$("#submit_search")
.click(function () {
var project = {
"affiliatedUnit": $("#affiliatedUnitBox").val(),
"projectId": $("#projectIdBox").val(),
"projectName": $("#projectNameBox").val(),
"buildNature": $("#buildNatureBox").val(),
"projectTime": $("#projectTimeBox").val()
};
$("#project_dg").datagrid({
url: '/ESEasyUi/projectController/queryProjectByPage',
method: "get",
fit: true,
fitColumns: true,
toolbar: '#tb',
striped: true,
pagination: true,
rownumbers: false,
singleSelect: false,
ctrlSelect: true,
pageSize: 10,
pageList: [3, 5, 10, 20],
queryParams: {
projectName: $("#projectNameBox").val(),
affiliatedUnit: $("#affiliatedUnitBox").val(),
projectId: $("#projectIdBox").val(),
buildNature: $("#buildNatureBox").val(),
projectTime: $("#projectTimeBox").val()
},
onLoadSuccess: function () {
$.ajax({
type: "post",
dataType: "json",
contentType: "application/json;charset=UTF-8",
data: JSON.stringify(project),
url: "/ESEasyUi/projectController/queryTotalSum",
success: function (data) {
console.log(data);
$("#project_dg").datagrid('insertRow', {
index: 0,
row: {
projectName: '汇总',
affiliatedUnit: "",
projectId: "",
buildNature: "",
projectPrice: data
}
});
},
error: function (message) {
}
});
},
rowStyler: function (index, row) {
if (row.projectName == "汇总") {
return "background-color:Yellow;";
}
},
columns: [[
{field: 'projectName', title: '项目名称', width: "20%", align: "center"},
{field: 'affiliatedUnit', title: '所属单位', width: "20%", align: "center"},
{field: 'projectId', title: '项目编码', width: "20%", align: "center"},
{field: 'buildNature', title: '建设性质', width: "20%", align: "center"},
{
field: 'projectPrice', title: '计划值', width: "20%", align: "center",
sortable: true,
editor: {
type: "numberbox",
options: {
precision: 2
}
},
formatter:function(v){
return parseFloat(v).toFixed(2)
}
}
]],
onDblClickCell: function (index, field, value) {
if ($("#projectTimeBox").val()!=""){
if (endEditing()) {
if(field=="projectPrice"){
$(this).datagrid('beginEdit', index);
var ed = $(this).datagrid('getEditor', {index:index,field:field});
}
editIndex = index;
}
$('#project_dg').datagrid('onClickRow')
}
}
});
});
});
function yearFormatter(date) {
var y = date.getFullYear();
var m = date.getMonth() + 1;
var d = date.getDate();
return y;
};
function yearParser(s) {
if (!s) return new Date();
var y = s;
var date;
if (!isNaN(y)) {
return new Date(y, 0, 1);
} else {
return new Date();
}
}
</script>
</head>
<table id="tb">
<div>
单位:
<input class="easyui-combobox" id="affiliatedUnitBox" name="affiliatedUnitBox" style="width:150px"
data-options="valueField:'city',textField:'city',url:'/ESEasyUi/projectController/queryAllProjectAffiliatedUnit',prompt: '请选择所属单位'"/>
建设性质:
<select class="easyui-combobox" name="buildNatureBox" id="buildNatureBox" style="width: 90px">
<option value="新建">新建</option>
<option value="扩建">扩建</option>
<option value="增容改造">增容改造</option>
<option value="" selected="selected">请选择</option>
</select>
年份:
<input class="easyui-datebox" id="projectTimeBox" name="projectTimeBox"
data-options="formatter:yearFormatter,parser:yearParser,prompt: '请选择'" style="width: 100px"/>
项目编码:
<input name="projectIdBox" id="projectIdBox" class="easyui-textbox"
data-options="prompt: '请填写'"
style="width:120px">
项目名称:
<input name="projectNameBox" id="projectNameBox" class="easyui-textbox"
data-options="prompt: '请填写' "
style="width:120px">
<button id="submit_search" style="background-color: #00ee00;color: white;border-radius: 5px;border-style: none">
查询
</button>
<button id="project_add"
style="background-color: #00ee00;color: white;border-radius: 5px;border-style: none">新增项目
</button>
<button id="project_edit"
style="background-color: #00ee00;color: white;border-radius: 5px;border-style: none">修改项目
</button>
<button id="project_save"
style="background-color: #00ee00;color: white;border-radius: 5px;border-style: none">保存
</button>
</div>
</table>
<br>
<table id="project_dg" class="easyui-datagrid"></table>
<div id="project_edit_dialog"></div>
<div id="project_add_dialog"></div>
添加页面addproject.html
<script>
$("#project_add_form").form({
url: "/ESEasyUi/projectController/addProject",
onSubmit: function () {
return $("#project_add_form").form("validate")
},
success: function (data) {
$("#project_add_dialog").dialog("close");
$("#project_dg").datagrid("reload")
}
})
function yearFormatter(date) {
var y = date.getFullYear();
var m = date.getMonth() + 1;
var d = date.getDate();
return y;
};
function yearParser(s) {
if (!s) return new Date();
var y = s;
var date;
if (!isNaN(y)) {
return new Date(y, 0, 1);
} else {
return new Date();
}
}
</script>
<form id="project_add_form" method="post">
<div style="height: 40px;margin-top: 30px;padding: 0 10% 0 10%">
<div style="float: left">
项目名称:
</div>
<div style="float: right">
<input name="projectName" class="easyui-textbox"
data-options="required:true,validType:'remote[\'/ESEasyUi/projectController/existsProject\',\'projectName\']',prompt:'项目之间不可重复、必填'"
style="height:100%;width:100%">
</div>
</div>
<div style="height: 40px;margin-top: 15px;padding: 0 10% 0 10%">
<div style="float: left">
所属单位:
</div>
<div style="float: right">
<input class="easyui-combobox" id="affiliatedUnit" name="affiliatedUnit" style="width:100%"
data-options="valueField:'city',textField:'city',url:'/ESEasyUi/projectController/queryAllProjectAffiliatedUnit',prompt: '请选择所属单位',required:true"/>
</div>
</div>
<div style="height: 40px;margin-top: 15px;padding: 0 10% 0 10%">
<div style="float: left">
建设性质:
</div>
<div style="float: right">
<select class="easyui-combobox" name="buildNature" id="buildNature" data-options="required:true" style="width: 100%">
<option value="新建">新建</option>
<option value="扩建">扩建</option>
<option value="增容改造">增容改造</option>
</select>
</div>
</div>
<div style="height: 40px;margin-top: 15px;padding: 0 10% 0 10%">
<div style="float: left">
投产年份:
</div>
<div style="float: right">
<input type="text" name="projectTime" class="easyui-datebox"
data-options="required:true,prompt:'请选择年份',formatter:yearFormatter,parser:yearParser"
style="height: 100%;width: 100%">
</div>
</div>
<div style="height: 40px;margin-top: 15px;padding: 0 10% 0 10%">
<div style="float: left">
当年计划值:
</div>
<div style="float: right">
<input id="projectPrice" name="projectPrice" class="easyui-numberbox"
data-options="min:0,max:100,precision:2,required:true,prompt:'请填写 0~100',validType:['number']"
style="height: 100%;width: 100%"/>
</div>
</div>
</form>
修改页面edit_project.html
<script>
$("#project_edit_form").form({
url: "/ESEasyUi/projectController/updateProject",
onSubmit: function () {
return $("#project_edit_form").form("validate")
},
success: function (data) {
$("#project_edit_dialog").dialog("close");
$("#project_dg").datagrid("reload")
}
})
</script>
<form id="project_edit_form" method="post">
<div style="height: 40px;margin-top: 15px;padding: 0 10% 0 10%">
<div style="float:left">
项目名称:
</div>
<div style="float:right">
<input id="projectNameUpdate" name="projectName" class="easyui-textbox" data-options="required:true"
style="height:100%;width:100%">
</div>
</div>
<div style="height: 40px;margin-top: 15px;padding: 0 10% 0 10%">
<div style="float:left">
项目编码:
</div>
<div style="float:right">
<input id="projectIdUpdate" name="projectId" readonly="readonly" class="easyui-textbox"
data-options="required:true" style="height:100%;width:100%;">
</div>
</div>
<div style="height: 40px;margin-top: 15px;padding: 0 10% 0 10%">
<div style="float: left">
所属单位:
</div>
<div style="float: right">
<input class="easyui-combobox" id="affiliatedUnitUpdate" name="affiliatedUnit" style="width:100%"
data-options="required:true,valueField:'city',textField:'city',url:'/ESEasyUi/projectController/queryAllProjectAffiliatedUnit',prompt: '请选择所属单位',required:true"/>
</div>
</div>
<div style="height: 40px;margin-top: 15px;padding: 0 10% 0 10%">
<select class="easyui-combobox" name="buildNature" id="buildNatureUpdate" data-options="required:true" style="height:100%;width:100%">
<option value="新建">新建</option>
<option value="扩建">扩建</option>
<option value="增容改造">增容改造</option>
</select>
</div>
</form>