jquery easyui DataGrid 实例，增、删、查、改基础功能
<%@pagelanguage="java"contentType="text/html;charset=UTF-8"pageEncoding="UTF-8"%>
<%@includefile="/common/taglibs.jsp"%>
<!DOCTYPEhtml>
<html>
<head>
<title>价格案例管理</title>
</head>
<body>
<tableid="condoPriceGrid"class="easyui-datagrid"></table>
<formid="condoPriceForm"method="post"class="form">
<inputtype="hidden"id="id"name="id"value="${condoPrice.id}">
<inputtype="hidden"id="condoId"name="condoId"value="${condoPrice.condoId}">
<tableclass="input">
<tr>
<thstyle="width:85px;">小区名称：</th>
<td><inputid="name"name="name"type="text"value="${condoPrice.name}"
class="easyui-validatebox"data-options="required:true"/></td>
</tr>
<tr>
<thstyle="width:85px;">成交时间：</th>
<td><inputid="bargainDay"name="bargainDay"type="text"value="${condoPrice.bargainDay}"class="easyui-datebox"data-options="formatter:dateBoxFormatter,parser:dateBoxParser"/></td>
</tr>
<tr>
<thstyle="width:85px;">面积：</th>
<td><inputid="bargainArea"name="bargainArea"type="text"value="${condoPrice.bargainArea}"
class="easyui-validatebox"/>㎡</td>
</tr>
<tr>
<thstyle="width:85px;">成交价格：</th>
<td><inputid="bargainPrice"name="bargainPrice"type="text"value="${condoPrice.bargainPrice}"
class="easyui-validatebox"/>万元</td>
</tr>
</table>
</form>
<divid="add"class="easyui-window"title="新增"closed="true"style="width:500px;height:300px;"iconCls="icon-add"closed="true"maximizable="false"minimizable="false"collapsible="false">
<divid="addConPrice"></div>
<divstyle="text-align:center;">
<ahref="#"class="easyui-linkbutton"data-options="iconCls:'icon-save'"onclick="saveCondoPrice('#add');">保存</a>
<ahref="#"class="easyui-linkbutton"data-options="iconCls:'icon-cancel'"onclick="closeWin('#add')">取消</a>
</div>
</div>
<divid="edit"class="easyui-window"title="修改"closed="true"style="width:500px;height:300px;overflow:hidden;"maximizable="false"minimizable="false"collapsible="false">
<divid="editConPrice"></div>
<divstyle="text-align:center;">
<ahref="#"class="easyui-linkbutton"data-options="iconCls:'icon-save'"onclick="saveCondoPrice('#edit');">修改</a>
<ahref="#"class="easyui-linkbutton"data-options="iconCls:'icon-cancel'"onclick="closeWin('#edit')">取消</a>
</div>
</div>
<divid="query"class="easyui-window"title="查询"closed="true"style="width:400px;height:120px;overflow:hidden;"maximizable="false"minimizable="false"collapsible="false">
<formid="queryForm"method="post"class="form">
<table>
<tr>
<thstyle="width:85px;text-align:right;">小区名称：</th>
<td><inputid="condoName"name="condoName"type="text"class="easyui-validatebox"data-options="required:true"/></td>
<td><aclass="easyui-linkbutton"iconCls="icon-search"href="javascript:void(0);"onclick="query()">查询</a></td>
</tr>
</table>
</form>
</div>
<scripttype="text/javascript">
$(function(){
varqueryParams={};
$('#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={};
}
}
});
});
//编辑
functionhandleEdit(){
varselect=$("#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');
}
}
//保存
functionsaveCondoPrice(el){
$("#condoPriceForm").form('submit',{
url:'${ctx}/condoprice/save',
success:function(data){
varjson=$.parseJSON(data);
if(json.success){
closeWin(el);
//刷新数据
$("#condoPriceGrid").datagrid('reload');
}else{
parent.$.messager.alert('温馨提示',json.message,'info');
}
}
});
}
//查询
functionquery(){
varname=$('#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();
}
}
//删除
functionhandleRemove(){
varselect=$("#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');
}
}
//关闭弹出窗口
functioncloseWin(el){
$(el).window('close');
}
</script>
</body>
</html>