IT忍者神龟之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>

时间: 2024-10-07 12:26:31

IT忍者神龟之jquery easyui DataGrid 实例,增、删、查、改基础功能的相关文章

easyui datagrid java增删改查 动态补全

猛击-->   easyui datagrid 增删改查 动态补全 easyui datagrid java增删改查 动态补全,布布扣,bubuko.com

[jQuery EasyUI系列] 创建增删改查应用

一.数据收集并妥善管理数据是网络应用共同的必要.CRUD允许我们生产页面列表并编辑数据库记录. 本文主要演示如何使用jQuery EasyUI实现CRUD DataGrid. 将使用到的插件有: datagrid:向用户展示列表数据 dialog:创建并编辑一条单一的数据 form:用于提交表单数据 messager:显示一些操作信息 二.操作步骤 1.准备数据库并创建实例数据 2.创建DataGrid来显示用户信息 创建没有JavaScript代码的DataGrid 1 <table id=&qu

C# 配合 Easyui DataGrid 实现增删改查 通用模板

前端代码: <div id="dlg" class="easyui-dialog" closed="true"> <form id="fm" method="post"> <table style="width:100%;"> <tr><td>标题:</td><td><input name=&quo

jquery easyui datagrid 排序列

点击排序列,将获取参数有:page=1&rows=10&sort=UserName&order=desc c#后台获取sort跟order参数 string sortColumn = Request.Params["sort"].ToString(); string order = Request.Params["order"].ToString(); jquery easyui datagrid 排序列,布布扣,bubuko.com

Jquery easyui datagrid 导出Excel

datagrid的扩展方法,用于将当前的数据生成excel需要的内容. 1 <script> 2 /** 3 Jquery easyui datagrid js导出excel 4 修改自extgrid导出excel 5 * allows for downloading of grid data (store) directly into excel 6 * Method: extracts data of gridPanel store, uses columnModel to constru

jquery easyui datagrid设置行样式 不可删除某行

rowStyler: function (index,row) { if (parseInt(row.ksrs) > 0) { return 'color:red'; } }, onLoadSuccess:function(data){ var rows = data.rows; for (var j = 0; j < rows.length; j++) { if (parseInt(rows[j]["ksrs"]) > 0) { $(".datagrid-

Jquery EasyUI datagrid后台数据表格生成及分页详解

由于项目原因,网站后台需要对用户信息进行各种操作,有时还需要进行批量操作,所以首先需要将用户信息展示出来,查了不少资料.发现Jquery EasyUI确实是一个不错的选择,功能强大,文档也比较全面,而且容易上手.今天就把自己在项目中用到的功能做了一个总结.生成数据表格如下所示: 接下来上代码 界面html及js代码 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/>

JQuery easyUi datagrid 中 editor 动态设置最大值最小值

前言 近来项目中使用到 easyui 来进行页面设计,感觉挺方便的,但是网上除了api外,其他有价值的资料比较少,故在此分享一点经验,供大家参考. 问题 JQuery easyUi datagrid 可编辑行的editor属性具有 min 和 max 属性,设置可以输入的最大值和最小值,但是这个是固定的,如下: [html] view plain copy {field:'workRate',title:'<%/*填报*/%><bean:message key="task.wo

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

本文实例讲述了jQuery EasyUI datagrid实现本地分页的方法.分享给大家供大家参考.具体如下: 一般分页都是后台做,前端做无论从哪方面考虑都不合适.但是有的时候还是有这种需求. 这里重点用到了pagination的监听,以及JS数组的slice方法来完成.代码如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 3