IT忍者神龜之jquery easyui DataGrid 例項，增、刪、查、改基礎功能
阿新 • • 發佈：2019-02-14
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE html>
<html>
<head>
<title>價格案例管理</title>
</head>
<body>
<table id="condoPriceGrid" class="easyui-datagrid"></table>
<form id="condoPriceForm" method="post" class="form">
<input type="hidden" id="id" name="id" value="${condoPrice.id}">
<input type="hidden" id="condoId" name="condoId" value="${condoPrice.condoId}">
<table class="input">
<tr>
<th style="width: 85px;">小區名稱：</th>
<td><input id="name" name="name" type="text" value="${condoPrice.name}"
class="easyui-validatebox" data-options="required:true"/></td>
</tr>
<tr>
<th style="width: 85px;">成交時間：</th>
<td><input id="bargainDay" name="bargainDay" type="text" value="${condoPrice.bargainDay}" class="easyui-datebox" data-options="formatter:dateBoxFormatter,parser:dateBoxParser" /></td>
</tr>
<tr>
<th style="width: 85px;">面積：</th>
<td><input id="bargainArea" name="bargainArea" type="text" value="${condoPrice.bargainArea}"
class="easyui-validatebox"/> ㎡</td>
</tr>
<tr>
<th style="width: 85px;">成交價格：</th>
<td><input id="bargainPrice" name="bargainPrice" type="text" value="${condoPrice.bargainPrice}"
class="easyui-validatebox" /> 萬元</td>
</tr>
</table>
</form>
<div id="add" class="easyui-window" title="新增" closed="true" style="width: 500px;height:300px;" iconCls="icon-add" closed="true" maximizable="false" minimizable="false" collapsible="false">
<div id="addConPrice"></div>
<div style="text-align: center;">
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'" onclick="saveCondoPrice('#add');">儲存</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" onclick="closeWin('#add')">取消</a>
</div>
</div>
<div id="edit" class="easyui-window" title="修改" closed="true" style="width: 500px;height:300px; overflow: hidden;" maximizable="false" minimizable="false" collapsible="false">
<div id="editConPrice"></div>
<div style="text-align: center;">
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'" onclick="saveCondoPrice('#edit');">修改</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" onclick="closeWin('#edit')">取消</a>
</div>
</div>
<div id="query" class="easyui-window" title="查詢" closed="true" style="width: 400px;height:120px; overflow: hidden;" maximizable="false" minimizable="false" collapsible="false">
<form id="queryForm" method="post" class="form">
<table>
<tr>
<th style="width: 85px; text-align: right;">小區名稱：</th>
<td><input id="condoName" name="condoName" type="text" class="easyui-validatebox" data-options="required:true" /></td>
<td><a class="easyui-linkbutton" iconCls="icon-search" href="javascript:void(0);" onclick="query()">查詢</a></td>
</tr>
</table>
</form>
</div>
<script type="text/javascript">
$(function(){
var queryParams = {};
$('#condoPriceForm').hide();
$("#condoPriceGrid").datagrid({
fit: true,
nowrap:false,
border: false,
striped: true,
collapsible:true,
url: '${ctx}/condoprice/load',
queryParams:{},
loadMsg:'資料載入中......',
frozenColumns:[[
{field:'ck',checkbox:true}
]],
columns:[[
{field:'name',title:'小區名稱',width:200},
{field:'bargainDay',title:'成交時間',width:200},
{field:'bargainArea',title:'面積',width:200},
{field:'bargainPrice',title:'成交價格',width:200},
{field:'condoId', hidden: true},
{field:'id', hidden: true}
]],
pagination:true,
rownumbers:true,
singleSelect:true,
toolbar: [{
text: '搜尋',
iconCls: 'icon-search',
handler: function(){
$("#query").window('open');
$("#queryForm").form('clear');
}
},'-',{
text: '新增',
iconCls: 'icon-add',
handler: function(){
$('#add').window('open');
$('#condoPriceForm').show();
$('#condoPriceForm').form('clear');
$('#condoPriceForm').appendTo('#addConPrice');
$('#name').attr("disabled", false);
}
},'-',{
text: '編輯',
iconCls: 'icon-edit',
handler: handleEdit
},'-',{
text: '刪除',
iconCls: 'icon-remove',
handler: handleRemove
}],
onBeforeLoad: function(){
if(queryParams){
$('#condoPriceGrid').datagrid('options').queryParams = {};
}
}
});
});
//編輯
function handleEdit(){
var select = $("#condoPriceGrid").datagrid('getSelected');
if(select){
$('#edit').window('open');
$('#condoPriceForm').show();
$('#condoPriceForm').appendTo('#editConPrice');
$('#name').val(select.name);
$('#bargainDay').datebox('setValue', select.bargainDay);
$('#bargainPrice').val(select.bargainPrice);
$('#bargainArea').val(select.bargainArea);
$('#id').val(select.id);
$('#condoId').val(select.condoId);
$('#name').attr("readonly", true);
$('#name').css("color", "red");
}else{
$.messager.alert('warning','請選擇一行資料','warning');
}
}
//儲存
function saveCondoPrice(el) {
$("#condoPriceForm").form('submit', {
url: '${ctx}/condoprice/save',
success:function(data){
var json = $.parseJSON(data);
if(json.success){
closeWin(el);
//重新整理資料
$("#condoPriceGrid").datagrid('reload');
}else{
parent.$.messager.alert('溫馨提示', json.message, 'info');
}
}
});
}
//查詢
function query(){
var name = $('#condoName').val();
if(name != ""){
queryParams = $('#condoPriceGrid').datagrid('options').queryParams;
queryParams.condoName = name;
//重新整理資料
$("#condoPriceGrid").datagrid('reload');
closeWin('#query');
}else{
$.messager.alert('warning','請輸入小區名稱!','warning');
$("input[name=condoName]").focus();
}
}
//刪除
function handleRemove(){
var select = $("#condoPriceGrid").datagrid('getSelected');
if(select){
$.messager.confirm('confirm','確認刪除麼?',function(id){
if(id){
$.ajax({
type: 'POST',
url: '${ctx}/condoprice/remove',
data: {"id": select.id},
dataType: 'json',
success: function(data){
if(data.success){
//重新整理資料
$("#condoPriceGrid").datagrid('reload');
}else{
parent.$.messager.alert('溫馨提示', data.message, 'info');
}
}
});
$('#tt').datagrid('reload');
}
});
}else{
$.messager.alert('warning','請選擇一行資料','warning');
}
}
//關閉彈出視窗
function closeWin(el){
$(el).window('close');
}
</script>
</body>
</html>
<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE html>
<html>
<head>
<title>價格案例管理</title>
</head>
<body>
<table id="condoPriceGrid" class="easyui-datagrid"></table>
<form id="condoPriceForm" method="post" class="form">
<input type="hidden" id="id" name="id" value="${condoPrice.id}">
<input type="hidden" id="condoId" name="condoId" value="${condoPrice.condoId}">
<table class="input">
<tr>
<th style="width: 85px;">小區名稱：</th>
<td><input id="name" name="name" type="text" value="${condoPrice.name}"
class="easyui-validatebox" data-options="required:true"/></td>
</tr>
<tr>
<th style="width: 85px;">成交時間：</th>
<td><input id="bargainDay" name="bargainDay" type="text" value="${condoPrice.bargainDay}" class="easyui-datebox" data-options="formatter:dateBoxFormatter,parser:dateBoxParser" /></td>
</tr>
<tr>
<th style="width: 85px;">面積：</th>
<td><input id="bargainArea" name="bargainArea" type="text" value="${condoPrice.bargainArea}"
class="easyui-validatebox"/> ㎡</td>
</tr>
<tr>
<th style="width: 85px;">成交價格：</th>
<td><input id="bargainPrice" name="bargainPrice" type="text" value="${condoPrice.bargainPrice}"
class="easyui-validatebox" /> 萬元</td>
</tr>
</table>
</form>
<div id="add" class="easyui-window" title="新增" closed="true" style="width: 500px;height:300px;" iconCls="icon-add" closed="true" maximizable="false" minimizable="false" collapsible="false">
<div id="addConPrice"></div>
<div style="text-align: center;">
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'" onclick="saveCondoPrice('#add');">儲存</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" onclick="closeWin('#add')">取消</a>
</div>
</div>
<div id="edit" class="easyui-window" title="修改" closed="true" style="width: 500px;height:300px; overflow: hidden;" maximizable="false" minimizable="false" collapsible="false">
<div id="editConPrice"></div>
<div style="text-align: center;">
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'" onclick="saveCondoPrice('#edit');">修改</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" onclick="closeWin('#edit')">取消</a>
</div>
</div>
<div id="query" class="easyui-window" title="查詢" closed="true" style="width: 400px;height:120px; overflow: hidden;" maximizable="false" minimizable="false" collapsible="false">
<form id="queryForm" method="post" class="form">
<table>
<tr>
<th style="width: 85px; text-align: right;">小區名稱：</th>
<td><input id="condoName" name="condoName" type="text" class="easyui-validatebox" data-options="required:true" /></td>
<td><a class="easyui-linkbutton" iconCls="icon-search" href="javascript:void(0);" onclick="query()">查詢</a></td>
</tr>
</table>
</form>
</div>
<script type="text/javascript">
$(function(){
var queryParams = {};
$('#condoPriceForm').hide();
$("#condoPriceGrid").datagrid({
fit: true,
nowrap:false,
border: false,
striped: true,
collapsible:true,
url: '${ctx}/condoprice/load',
queryParams:{},
loadMsg:'資料載入中......',
frozenColumns:[[
{field:'ck',checkbox:true}
]],
columns:[[
{field:'name',title:'小區名稱',width:200},
{field:'bargainDay',title:'成交時間',width:200},
{field:'bargainArea',title:'面積',width:200},
{field:'bargainPrice',title:'成交價格',width:200},
{field:'condoId', hidden: true},
{field:'id', hidden: true}
]],
pagination:true,
rownumbers:true,
singleSelect:true,
toolbar: [{
text: '搜尋',
iconCls: 'icon-search',
handler: function(){
$("#query").window('open');
$("#queryForm").form('clear');
}
},'-',{
text: '新增',
iconCls: 'icon-add',
handler: function(){
$('#add').window('open');
$('#condoPriceForm').show();
$('#condoPriceForm').form('clear');
$('#condoPriceForm').appendTo('#addConPrice');
$('#name').attr("disabled", false);
}
},'-',{
text: '編輯',
iconCls: 'icon-edit',
handler: handleEdit
},'-',{
text: '刪除',
iconCls: 'icon-remove',
handler: handleRemove
}],
onBeforeLoad: function(){
if(queryParams){
$('#condoPriceGrid').datagrid('options').queryParams = {};
}
}
});
});
//編輯
function handleEdit(){
var select = $("#condoPriceGrid").datagrid('getSelected');
if(select){
$('#edit').window('open');
$('#condoPriceForm').show();
$('#condoPriceForm').appendTo('#editConPrice');
$('#name').val(select.name);
$('#bargainDay').datebox('setValue', select.bargainDay);
$('#bargainPrice').val(select.bargainPrice);
$('#bargainArea').val(select.bargainArea);
$('#id').val(select.id);
$('#condoId').val(select.condoId);
$('#name').attr("readonly", true);
$('#name').css("color", "red");
}else{
$.messager.alert('warning','請選擇一行資料','warning');
}
}
//儲存
function saveCondoPrice(el) {
$("#condoPriceForm").form('submit', {
url: '${ctx}/condoprice/save',
success:function(data){
var json = $.parseJSON(data);
if(json.success){
closeWin(el);
//重新整理資料
$("#condoPriceGrid").datagrid('reload');
}else{
parent.$.messager.alert('溫馨提示', json.message, 'info');
}
}
});
}
//查詢
function query(){
var name = $('#condoName').val();
if(name != ""){
queryParams = $('#condoPriceGrid').datagrid('options').queryParams;
queryParams.condoName = name;
//重新整理資料
$("#condoPriceGrid").datagrid('reload');
closeWin('#query');
}else{
$.messager.alert('warning','請輸入小區名稱!','warning');
$("input[name=condoName]").focus();
}
}
//刪除
function handleRemove(){
var select = $("#condoPriceGrid").datagrid('getSelected');
if(select){
$.messager.confirm('confirm','確認刪除麼?',function(id){
if(id){
$.ajax({
type: 'POST',
url: '${ctx}/condoprice/remove',
data: {"id": select.id},
dataType: 'json',
success: function(data){
if(data.success){
//重新整理資料
$("#condoPriceGrid").datagrid('reload');
}else{
parent.$.messager.alert('溫馨提示', data.message, 'info');
}
}
});
$('#tt').datagrid('reload');
}
});
}else{
$.messager.alert('warning','請選擇一行資料','warning');
}
}
//關閉彈出視窗
function closeWin(el){
$(el).window('close');
}
</script>
</body>
</html>