IT忍者神龟之jquery easyui DataGrid 实例，增、删、查、改基础功能

浏览数：30 / 时间：2015年06月09日

<%@ 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>

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。