`
时间得守护者
  • 浏览: 567 次
社区版块
存档分类
最新评论

jquery easyui DataGrid 实例,增、删、查、改基础功能

阅读更多
<%@ 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实现增加,修改,删除方法,结合实例形式分析了jquery easyui datagrid结合asp.net实现数据的增删改等操作的步骤与相关技巧,需要的朋友可以参考下

    EasyUI 增删改查的简单实现

    通过这些技术的结合,开发者可以快速构建出一个功能完备的管理界面,实现数据的增删改查,同时保持代码结构清晰,易于维护。项目中的 `src` 目录可能包含 Java 源代码、配置文件、资源文件等,这些内容构成了实际...

    easyui简单的增删改查范例

    标题中提到的“easyui简单的增删改查范例”,指的是一个使用easyui框架来实现基本的数据库操作——增加、删除、修改和查询(CRUD)功能的应用实例。这种范例在web开发中非常常见,是学习和掌握easyui进行页面交互...

    EasyUI DataGrid过滤用法实例

    在这个"EasyUI DataGrid 过滤用法实例"中,我们将深入探讨如何利用 EasyUI 的 DataGrid 组件实现数据过滤功能,帮助用户更高效地查找和管理表格中的信息。 首先,`datagrid-filter.js` 文件很可能包含了实现过滤...

    easyUI 实例 增删改查

    总结来说,"easyUI 实例 增删改查"涉及的关键技术包括:EasyUI的`datagrid`、`form`、`dialog`组件的使用,以及与服务器的`ajax`通信。通过这些组件和方法,开发者可以高效地构建出具备数据管理功能的Web应用。在...

    jQuery easyui datagrid动态查询数据实例讲解

    本文详细讲解了如何使用jQuery easyui datagrid组件进行动态查询数据的过程。具体来说,文章将从前端界面接受查询条件,通过后端PHP代码与MSSQL数据库交互,并返回JSON格式的数据展示在easyui datagrid中。这个过程...

    JS EasyUI DataGrid动态加载数据

    JS EasyUI DataGrid是一款基于jQuery和EasyUI框架的数据表格组件,它提供了丰富的功能,如数据分页、排序、过滤和自定义操作等。在实际应用中,动态加载数据是DataGrid的一个重要特性,允许用户在需要时加载更多的...

    easyui-datagrid之间拖拽效果demo

    "easyui-datagrid 之间拖拽效果 demo" 重点展示了如何在两个 EasyUI Datagrid 之间实现数据的拖放功能,这对于提升用户体验,尤其是处理大量数据时的交互性至关重要。 首先,Datagrid 是 EasyUI 提供的一种表格控件...

    jQuery EasyUI datagrid实现本地分页的方法

    综上所述,通过实例代码与详细解析,展示了如何使用jQuery EasyUI datagrid组件,结合JavaScript的数组操作和事件监听功能,实现前端的本地分页。这种实现方式可以提高前端的处理能力,但在实际应用中还需要根据数据...

    JQuery+easyUI实例

    **jQuery和EasyUI简介** jQuery是一个轻量级的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画设计和...提供的JQueryEasyUI实例下载将是一个很好的实践平台,帮助开发者深入理解和运用这两个库。

    jquery-easyui-1.2.3实例参考

    在"jquery-easyui-1.2.3实例参考"中,我们可以深入理解jQuery EasyUI的强大功能,并通过实例学习如何有效利用这个框架。 1. **jQuery EasyUI的核心组件** jQuery EasyUI 包含了大量的组件,如对话框(dialog)、...

    jQuery EasyUI实例源码

    这个实例源码“人员管理”是展示如何使用jQuery EasyUI进行数据操作和交互的一个典型应用,涵盖了列表展示、添加、编辑和删除等功能,同时也涉及到与后台的数据交换,通常采用JSON格式。 首先,jQuery EasyUI的核心...

    jquery-easyui-datagrid

    总结,jQuery EasyUI Datagrid 是一款强大的表格组件,它简化了数据展示和操作的复杂性,为开发者提供了丰富的功能和高度的灵活性。通过理解和掌握它的使用,你可以构建出功能丰富、用户体验优秀的数据驱动的 Web ...

    jQuery EasyUI 1.5.1 版 API 中文版

    1. **基础概念**:这部分通常会介绍如何引入 jQuery 和 jQuery EasyUI 库到项目中,以及如何设置基本的页面结构和样式。此外,还会讲解 EasyUI 的核心理念,如数据绑定、事件处理和插件系统。 2. **组件详解**:...

    jQuery EasyUI仿Extjs漂亮界面实例演示

    通过“jQuery EasyUI仿Extjs漂亮界面实例演示”,你可以深入了解并掌握如何运用jQuery EasyUI构建出具有专业级外观和功能的Web应用。实践中,不断尝试和调试,理解各个组件的工作原理和相互间的协同,将有助于提升你...

    easyui-datagrid&&easyui-tree实例

    4. **操作功能集成**: EasyUI datagrid支持增删改查操作,可以通过设置datagrid的`onDblClickRow`、`onClickRow`等事件,配合ASP.NET实现具体业务逻辑。 **EasyUI Tree加载数据库数据** 1. **初始化Tree**: 与...

    mvc easyui 项目 demo 增删改查

    标题“mvc easyui 项目 demo 增删改查”表明这是一个基于MVC(Model-View-Controller)框架和EasyUI库的Web应用示例,主要功能集中在基本的数据操作:增加、删除、修改和查询。这个项目可能是为了帮助初学者理解如何...

Global site tag (gtag.js) - Google Analytics