Home > Developer > Web Develop
IT Ninja Turtles jquery easyui DataGrid instance, adding, deleting, querying, and modifying basic functions, jqueryeasyui
<% @ Page language = "java" contentType = "text/html; charset = UTF-8" pageEncoding = "UTF-8" %>
<% @ Include file = "/common/taglibs. jsp" %>
<! DOCTYPE html>
<Html>
<Head>
<Title> price case management </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;"> cell name: </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;"> transaction time: </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;"> area: </th>
<Td> <input id = "bargainArea" name = "bargainArea" type = "text" value = "$ {condoPrice. bargainArea }"
Class = "easyui-validatebox"/> ㎡ </td>
</Tr>
<Tr>
<Th style = "width: 85px;"> transaction price: </th>
<Td> <input id = "bargainPrice" name = "bargainPrice" type = "text" value = "$ {condoPrice. bargainPrice }"
Class = "easyui-validatebox"/> 10 million </td>
</Tr>
</Table>
</Form>
<Div id = "add" class = "easyui-window" title = "added" 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 '); "> Save </a>
<A href = "#" class = "easyui-linkbutton" data-options = "iconCls: 'icon-cancel'" onclick = "closeWin ('# add ') "> cancel </a>
</Div>
</Div>
<Div id = "edit" class = "easyui-window" title = "modify" 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 '); "> modify </a>
<A href = "#" class = "easyui-linkbutton" data-options = "iconCls: 'icon-cancel'" onclick = "closeWin ('# edit ') "> cancel </a>
</Div>
</Div>
<Div id = "query" class = "easyui-window" title = "query" 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;"> cell name: </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 () "> 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: 'loading data ......',
FrozenColumns :[[
{Field: 'ck ', checkbox: true}
],
Columns :[[
{Field: 'name', title: 'cell name', width: 200 },
{Field: 'bargainday', title: 'transaction time', width: 200 },
{Field: 'bargainregion', title: 'area ', width: 200 },
{Field: 'bargainprice', title: 'deal price', width: 200 },
{Field: 'doid', hidden: true },
{Field: 'id', hidden: true}
],
Pagination: true,
Rownumbers: true,
SingleSelect: true,
Toolbar :[{
Text: 'search ',
IconCls: 'icon-search ',
Handler: function (){
$ ("# Query"). window ('open ');
$ ("# QueryForm"). form ('clear ');
}
},'-',{
Text: 'add ',
IconCls: 'icon-add ',
Handler: function (){
$ ('# Add'). window ('open ');
$ ('# CondoPriceForm'). show ();
$ ('# CondoPriceForm'). form ('clear ');
$ ('# CondoPriceForm'). appendTo ('# addconprice ');
$ ('# Name'). attr ("disabled", false );
}
},'-',{
Text: 'editor ',
IconCls: 'icon-edit ',
Handler: handleEdit
},'-',{
Text: 'delete ',
IconCls: 'icon-delete ',
Handler: handleRemove
}],
OnBeforeLoad: function (){
If (queryParams ){
$ ('# Condopricegri'). datagrid ('options'). queryParams = {};
}
}
});
});
// Edit
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 );
Certificate ('{name'}.css ("color", "red ");
} Else {
$. Messager. alert ('warning', 'select a data row', 'warning ');
}
}
// Save
Function saveCondoPrice (el ){
$ ("# CondoPriceForm"). form ('submit ',{
Url: '$ {ctx}/condoprice/save ',
Success: function (data ){
Var json = $. parseJSON (data );
If (json. success ){
CloseWin (el );
// Refresh data
$ ("# CondoPriceGrid"). datagrid ('reload ');
} Else {
Parent. $. messager. alert ('tip ', json. message, 'info ');
}
}
});
}
// Query
Function query (){
Var name = $ ('# condoname'). val ();
If (name! = ""){
QueryParams = $ ('# condopricegri'). datagrid ('options'). queryParams;
QueryParams. condoName = name;
// Refresh data
$ ("# CondoPriceGrid"). datagrid ('reload ');
CloseWin ('# query ');
} Else {
$. Messager. alert ('warning', 'enter the cell name! ', 'Warning ');
$ ("Input [name = condoName]"). focus ();
}
}
// Delete
Function handleRemove (){
Var select = $ ("# condoPriceGrid"). datagrid ('getselected ');
If (select ){
$. Messager. confirm ('Confirm', 'Are you sure you want to delete it? ', Function (id ){
If (id ){
$. Ajax ({
Type: 'post ',
Url: '$ {ctx}/condoprice/delete ',
Data: {"id": select. id },
DataType: 'json ',
Success: function (data ){
If (data. success ){
// Refresh data
$ ("# CondoPriceGrid"). datagrid ('reload ');
} Else {
Parent. $. messager. alert ('tips ', data. message, 'info ');
}
}
});
$ ('# Tt'). datagrid ('reload ');
}
});
} Else {
$. Messager. alert ('warning', 'select a data row', 'warning ');
}
}
// Close the pop-up window
Function closeWin (el ){
$ (El). window ('close ');
}
</Script>
</Body>
</Html>
The jquery easyui datagrid retrieves the data list, selects an add or change, and refreshes the data table after the operation.
Are you using the modification method in the original or pop-up box?
However, all of these should be implemented using JQUERY.
Add location. href = "Address" at the end of the statement ";
If you want to use the refreshing method, use the LOAD method and callback together with the EASYUI table OPTION.
How can I refresh the jQuery easyui datagrid after dynamically adding columns?
Can I change the url when I call it again?
$ ('# CC'). datagrid ({
Url: 'student. action? '+ New Parameter
})
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
