<%@ 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>
相关推荐
主要介绍了jquery easyui datagrid实现增加，修改，删除方法,结合实例形式分析了jquery easyui datagrid结合asp.net实现数据的增删改等操作的步骤与相关技巧,需要的朋友可以参考下
通过这些技术的结合，开发者可以快速构建出一个功能完备的管理界面，实现数据的增删改查，同时保持代码结构清晰，易于维护。项目中的 `src` 目录可能包含 Java 源代码、配置文件、资源文件等，这些内容构成了实际...
标题中提到的“easyui简单的增删改查范例”，指的是一个使用easyui框架来实现基本的数据库操作——增加、删除、修改和查询（CRUD）功能的应用实例。这种范例在web开发中非常常见，是学习和掌握easyui进行页面交互...
在这个"EasyUI DataGrid 过滤用法实例"中，我们将深入探讨如何利用 EasyUI 的 DataGrid 组件实现数据过滤功能，帮助用户更高效地查找和管理表格中的信息。 首先，`datagrid-filter.js` 文件很可能包含了实现过滤...
总结来说，"easyUI 实例 增删改查"涉及的关键技术包括：EasyUI的`datagrid`、`form`、`dialog`组件的使用，以及与服务器的`ajax`通信。通过这些组件和方法，开发者可以高效地构建出具备数据管理功能的Web应用。在...
本文详细讲解了如何使用jQuery easyui datagrid组件进行动态查询数据的过程。具体来说，文章将从前端界面接受查询条件，通过后端PHP代码与MSSQL数据库交互，并返回JSON格式的数据展示在easyui datagrid中。这个过程...
JS EasyUI DataGrid是一款基于jQuery和EasyUI框架的数据表格组件，它提供了丰富的功能，如数据分页、排序、过滤和自定义操作等。在实际应用中，动态加载数据是DataGrid的一个重要特性，允许用户在需要时加载更多的...
"easyui-datagrid 之间拖拽效果 demo" 重点展示了如何在两个 EasyUI Datagrid 之间实现数据的拖放功能，这对于提升用户体验，尤其是处理大量数据时的交互性至关重要。 首先，Datagrid 是 EasyUI 提供的一种表格控件...
综上所述，通过实例代码与详细解析，展示了如何使用jQuery EasyUI datagrid组件，结合JavaScript的数组操作和事件监听功能，实现前端的本地分页。这种实现方式可以提高前端的处理能力，但在实际应用中还需要根据数据...
**jQuery和EasyUI简介** jQuery是一个轻量级的JavaScript库，它极大地简化了JavaScript的DOM操作、事件处理、动画设计和...提供的JQueryEasyUI实例下载将是一个很好的实践平台，帮助开发者深入理解和运用这两个库。
在"jquery-easyui-1.2.3实例参考"中，我们可以深入理解jQuery EasyUI的强大功能，并通过实例学习如何有效利用这个框架。 1. **jQuery EasyUI的核心组件** jQuery EasyUI 包含了大量的组件，如对话框（dialog）、...
这个实例源码“人员管理”是展示如何使用jQuery EasyUI进行数据操作和交互的一个典型应用，涵盖了列表展示、添加、编辑和删除等功能，同时也涉及到与后台的数据交换，通常采用JSON格式。 首先，jQuery EasyUI的核心...
总结，jQuery EasyUI Datagrid 是一款强大的表格组件，它简化了数据展示和操作的复杂性，为开发者提供了丰富的功能和高度的灵活性。通过理解和掌握它的使用，你可以构建出功能丰富、用户体验优秀的数据驱动的 Web ...
1. **基础概念**：这部分通常会介绍如何引入 jQuery 和 jQuery EasyUI 库到项目中，以及如何设置基本的页面结构和样式。此外，还会讲解 EasyUI 的核心理念，如数据绑定、事件处理和插件系统。 2. **组件详解**：...
通过“jQuery EasyUI仿Extjs漂亮界面实例演示”，你可以深入了解并掌握如何运用jQuery EasyUI构建出具有专业级外观和功能的Web应用。实践中，不断尝试和调试，理解各个组件的工作原理和相互间的协同，将有助于提升你...
4. **操作功能集成**: EasyUI datagrid支持增删改查操作，可以通过设置datagrid的`onDblClickRow`、`onClickRow`等事件，配合ASP.NET实现具体业务逻辑。 **EasyUI Tree加载数据库数据** 1. **初始化Tree**: 与...
标题“mvc easyui 项目 demo 增删改查”表明这是一个基于MVC（Model-View-Controller）框架和EasyUI库的Web应用示例，主要功能集中在基本的数据操作：增加、删除、修改和查询。这个项目可能是为了帮助初学者理解如何...