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>

 

你可能感兴趣的:(datagrid,easyui)