Easyui Datagrid使用小例
2015-10-18 23:27
477 查看
Easyui Datagrid使用小例
写一个Easyui Datagrid的使用小例子供大家参考：
废话不多说，直接贴代码：
1. 页面部分代码：techInfoList.jsp
<div style="text-align: left;">
<%@ page language="java" contentType="text/html; charset=UTF-8"</span></div><span style="font-family:Times New Roman;font-size:14px;"> pageEncoding="UTF-8"%>
</span><div style="text-align: left;">//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www</div><!DOCTYPE html PUBLIC "
-.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>techInfo</title>
<div style="text-align: left;">s/default/easyui.css">
<link rel="stylesheet" type="text/css" href="static/jquery-easyui-1.4.3/them</div> <link rel="stylesheet" type="text/css" href="static/jquery-easyui-1.4.3/them
ees/icon.css">
<link rel="stylesheet" type="text/css" href="static/jquery-easyui-1.4.3/demo/demo.css">
<div style="text-align: left;">text/javascript" src="static/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>
<st</div> <script type="text/javascript" src="static/jquery-easyui-1.4.3/jquery.min.js"></script>
<script type=
"yle>
.datagrid-header-row {background-color:#005aaa; color:white}
</style>
</head>
<%-- <input id="specNo" type="hidden" value="${specialNo}" /> --%>
<script type="text/javascript">
<div style="text-align: left;">#techInfo").datagrid({
loadMsg:'数据加载中....',
</div> //var specNo = document.getElementById("specNo").value; //模块专用号
var techInfoDatagrid;
var rowEditor=undefined;
$(document).ready(function() {
techInfoDatagrid=$(
" title:'技术参数信息一览表', //标题
iconCls:'icon-edit', //图标
width:880,
height:680, //高度
//从远程站点请求数据的网址
<div style="text-align: left;"> collapsible:true, //是否可折叠的
fitColumns</div> url:'techInfoList.do?specialNo=${specialNo}',
nowrap: false, //在一行中显示数据,设置为真能提高加载性能
striped: true, //奇偶行颜色不同
border: true,
: true, //自动调整各列，用了这个属性，下面各列的宽度值就只是一个比例
//fit: true, //自动大小
idField:'id', //主键字段
//sortName: 'id', //定义该列可以排序
//sortOrder: 'desc', //定义的列的排序顺序，只能“升序”或“降序”
<div style="text-align: left;">/行号
//列属性，这些列将被冻结在左边
</div> remoteSort: false, //定义是否从服务器上排序数据
queryParams:{}, //查询条件
singleSelect:false, //是否单选 false(非单选)
pagination:true, //分页控件
rownumbers:true,
/frozenColumns:[[
{field:'ck',checkbox:true},
{title:'ID',field:'id',width:80,sortable:true,
editor : { //是否可编辑
type : 'validatebox',
options : { //必须校验
<div style="text-align: left;">:'操作',width:100,align:'center',colspan:2}
</div> required : true
}
}
}
]],
//每个列具体内容
columns:[[
{title:'基本信息',colspan:7},
{titl
e ],[
{field:'label',title:'标注',width:100,align:'center',
editor : { //是否可编辑
type : 'validatebox',
options : {
required : true //必须校验
<div style="text-align: left;">ptions : {
</div> }
}
},
{field:'value',title:'属性值',width:100,align:'center',
editor : { //是否可编辑
type : 'validatebox',
o required : false
}
}
},
{field:'unit',title:'单位',width:100,align:'center',
editor : { //是否可编辑
type : 'validatebox',
<div style="text-align: left;">: { //是否可编辑
</div> options : {
required : false
}
}
},
{field:'specialNo',title:'专用号',width:100,align:'center',
editor
type : 'validatebox',
options : {
required : false
}
}
},
{field:'modelNorm',title:'型号规格',width:100,align:'center',
<div style="text-align: left;">
{field:'modType',title:'所属模块类型</div> editor : { //是否可编辑
type : 'validatebox',
options : {
required : false
}
}
},
',width:100,align:'center',
editor : { //是否可编辑
type : 'validatebox',
options : {
required : false
}
}
},
<div style="text-align: left;"> }
},
{field:'mo</div> {field:'remarks',title:'备注',width:60,align:'center',
editor : { //是否可编辑
type : 'validatebox',
options : {
required : false
}
dify',title:'修改',width:100,align:'center',
formatter:function(value,row,rowIndex){
return '<a href="loadingModifyTechInfo.do?id='+row.id+'" target=mainframe><font color="green">修改</font></a>';
}
},
{field:'delete',title:'删除',width:100,align:'center',
<div style="text-align: left;"> id:'btnadd',
text:'增加',
</div> formatter:function(value,row,rowIndex){
return '<a href="deleteTechInfoReturnPage.do?id='+row.id+'&specialNo='+row.specialNo+'" target=mainframe><font color="red">删除</font></a>';
}
}
]],
//工具条
toolbar:[{
iconCls:'icon-add',
handler:function(){ //回调函数
//window.location="techInfo.jsp";
if(rowEditor==undefined){
techInfoDatagrid.datagrid('insertRow',{ //如果处于未被点击状态，在第一行开启编辑
index: 0,
row: {}
});
<div style="text-align: left;">Selections');
i</div> rowEditor=0;
techInfoDatagrid.datagrid('beginEdit',rowEditor); //没有这行，即使开启了也不编辑
}
}
},'-',{
id:'btncut',
text:'删除',
iconCls:'icon-cancel',
handler:function(){
var rows=techInfoDatagrid.datagrid('ge
tf(rows.length<=0){
$.messager.alert('警告','您没有选择','error');
}
else if(rows.length>1){
$.messager.alert('警告','不支持批量删除','error');
}
else{
$.messager.confirm('确定','您确定要删除吗',function(t){
if(t){
$.ajax({
<div style="text-align: left;"> msg : r.msg,
</div> url : 'deleteTechInfo.do',
data : rows[0],
dataType : 'json',
success : function(r) {
if (r.success) {
techInfoDatagrid.datagrid('acceptChanges');
$.messager.show({
title : '成功'
});
editRow = undefined;
techInfoDatagrid.datagrid('reload');
} else {
techInfoDatagrid.datagrid('beginEdit', editRow);
$.messager.alert('错误', r.msg, 'error');
}
<div style="text-align: left;">s');
if(rows.length==1){
i</div> techInfoDatagrid.datagrid('unselectAll');
}
});
}
})
}
}
},'-',{
id:'btnmodify',
text:'修改',
iconCls:'icon-edit',
handler:function(){
var rows=techInfoDatagrid.datagrid('getSelectio
nf(rowEditor==undefined){
var index=techInfoDatagrid.datagrid('getRowIndex',rows[0]);
rowEditor=index;
techInfoDatagrid.datagrid('unselectAll');
techInfoDatagrid.datagrid('beginEdit',index);
}
}
}
},
/* {text:"查询",iconCls:"icon-search",handler:function(){}}, */
{text:"保存",iconCls:"icon-save",handler:function(){
<div style="text-align: left;">ed');
if (inserted.length < 1 && updated.length < 1</div> techInfoDatagrid.datagrid('endEdit',rowEditor);
rowEditor=undefined;
}},
{text:"取消编辑",iconCls:"icon-redo",handler:function(){
rowEditor=undefined;
techInfoDatagrid.datagrid('rejectChanges')
}}],
onAfterEdit:function(rowIndex, rowData, changes){
var inserted = techInfoDatagrid.datagrid('getChanges', 'inserted');
var updated = techInfoDatagrid.datagrid('getChanges', 'upda
t) {
editRow = undefined;
techInfoDatagrid.datagrid('unselectAll');
return;
}
var url = '';
if (inserted.length > 0) {
url = 'addTechInfo.do';
}
if (updated.length > 0) {
url = 'updateTechInfo.do';
}
$.ajax({
url : url,
data : rowData,
dataType : 'json',
success : function(r) {
if(r.success){
<div style="text-align: left;"> });
},
onDblClickCell:funct</div> techInfoDatagrid.datagrid('acceptChanges');
$.messager.show({
msg : r.msg,
title : '成功'
});
editRow = undefined;
techInfoDatagrid.datagrid('reload');
}else{
techInfoDatagrid.datagrid('beginEdit', editRow);
$.messager.alert('错误', r.msg, 'error');
}
techInfoDatagrid.datagrid('unselectAll');
}
ion(rowIndex, field, value){
if(rowEditor==undefined)
{
techInfoDatagrid.datagrid('beginEdit',rowIndex);
rowEditor=rowIndex;
}
}
});
//表格查询
$("#searchinfo").click(function(){
techInfoDatagrid.datagrid('load',
{
label:$("#label").val(),
modType:$("#modType").val(),
//specialNo:specNo
});
});
//清空查询条件
$("#clearinfo").click(function(){
$("#queryForm").form('clear');
techInfoDatagrid.datagrid('load',
{
<div style="text-align: left;">
}
</div> label:"",
modType:"",
//specialNo:specNo
});
});
var p = $('#techInfo').datagrid('getPager');
if (p){
$(p).pagination({
pageSize:20, //每页显示的记录条数，默认为10
pageList: [10,20,30], //可以设置每页记录条数的列表
beforePageText: '第', //页数文本框前显示的汉字
afterPageText: '页 共 {pages} 页',
displayMsg: '当前显示 {from} - {to} 条记录 共 {total} 条记录',
/*
onBeforeRefresh:function(){
alert('before refresh');
}
*/
});
});
</script>
<title></title>
</head>
<body>
<div id="techtab" width="880px" heigth="880px" fit="true" border="false" >
<form id="queryForm" style="margin:10;text-align: center;">
<table width="880px" heigth="200px" >
<tr>
<td>标注：<input id="label" class="easyui-textbox" name="label" style="width: 200"></td>
<td>模块类型：<input id="modType" class="easyui-textbox" name="modType" style="width: 200"></td>
<td align="center"><a id="searchinfo" href="#" class="easyui-linkbutton" iconCls="icon-search">查询</a></td>
<td align="left"><a id="clearinfo" href="#" class="easyui-linkbutton" iconCls="icon-search">清空</a></td>
<div style="text-align: left;"></div> </tr>
</table>
</form>
<!-- <div title="模块信息列表" style="padding:0px;overflow:hidden; color:red; " fit="true"> -->
<div id="techInfo" class="easyui-tabs" width="880px" heigth="680px" >
</div>
</div>
</body>
<div style="text-align: left;">
</div>
</html>2.后台控制类代码：BaseInfoController.java
package com.ouc.ulab.controller;
import com.ouc.ulab.model.*;
import com.ouc.ulab.service.*;
import java.io.UnsupportedEncodingException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
/*
* @Author
* @WuPing
*/
@Controller
public class BaseInfoController {
// 单模块技术参数信息
@Resource(name = "techInfoService")
private TechInfoService techInfoSer;
// --加载技术参数列表--
@RequestMapping(value = "loadingTechInfoList.do", method = RequestMethod.GET)
public String loadingTechInfoList(HttpServletRequest request,
HttpServletResponse response) {
// 获取参数值
String specialNo2 = request.getParameter("specialNo");
// 传值
request.setAttribute("specialNo", specialNo2);
return "techInfoList";
}
@RequestMapping("techInfoList.do")
public @ResponseBody Object techInfoList(String page,String rows,
String specialNo,String label,String modType) {
System.out.println("---技术参数传参测试---");
System.out.println(specialNo);
System.out.println(label);
System.out.println(modType);
TechInfo techInfoQuery = new TechInfo(); // 技术参数
techInfoQuery.setSpecialNo(specialNo.trim().toString());
techInfoQuery.setLabel(label);
techInfoQuery.setModType(modType);
int recordNum = 0; // 总记录数
recordNum = techInfoSer.getTechInfoTotalRecordNum(techInfoQuery);
System.out.println("技术参数总条数："+recordNum);
// *******分页******************
int pageSize = 20;
pageSize = Integer.parseInt(rows);
int curPageNo = 1;
curPageNo = Integer.parseInt(page); // 当前页号
int startIndex = 0; // 开始索引
if (recordNum > 0) {
if (curPageNo == 1) {
startIndex = 0; // 开始索引
} else {
startIndex = curPageNo * pageSize - pageSize; // 开始索引
}
}
Map<String,Object> paramMap=new HashMap<String,Object>();
paramMap.put("startIndex",startIndex);
paramMap.put("pageSize",pageSize);
paramMap.put("specialNo", specialNo);
paramMap.put("label", label);
paramMap.put("modType", modType);
List<TechInfo> techInfoList = new ArrayList<TechInfo>();
techInfoList = techInfoSer.getTechInfoByRowNum(paramMap);
Map<String, Object> result = new HashMap<String, Object>(2);
JSONArray jsonArray = new JSONArray();
for(TechInfo tech:techInfoList){
JSONObject jsonObject = new JSONObject();
jsonObject.put("id",tech.getId()) ;
jsonObject.put("label",tech.getLabel()) ;
jsonObject.put("value",tech.getValue());
jsonObject.put("unit", tech.getUnit());
jsonObject.put("specialNo",tech.getSpecialNo());
jsonObject.put("modelNorm",tech.getModelNorm());
jsonObject.put("modType", tech.getModType());
jsonObject.put("remarks",tech.getRemarks());
jsonArray.add(jsonObject) ;
}
result.put("total", recordNum);
result.put("rows",jsonArray) ;
return JSONObject.fromObject(result);
}
// 添加技术参数信息
@RequestMapping("addTechInfo.do")
@ResponseBody
public Map<String,Object> addTechInfo(TechInfo tech1) {
Map<String,Object> map = new HashMap<String,Object>();
tech1.setRemarks("***");
// 插入TechInfo表
int result = techInfoSer.saveTechInfo(tech1);
map.put("success", result);
return map;
}
@RequestMapping("updateTechInfo.do")
@ResponseBody
public Map<String,Object> updateTechInfo(TechInfo tech1) {
Map<String,Object> map = new HashMap<String,Object>();
techInfoSer.updateByPrimaryKey(tech1);
map.put("success", true);
return map;
}
@RequestMapping("deleteTechInfo.do")
@ResponseBody
public Map<String,Object> deleteTechInfo(int id) {
Map<String,Object> map = new HashMap<String,Object>();
//删除技术参数信息
techInfoSer.deleteByPrimaryKey(id);
map.put("success", true);
return map;
}
@RequestMapping("deleteTechInfoReturnPage.do")
public String deleteTechInfoReturnPage(HttpServletRequest request,
HttpServletResponse response) {
// 获取参数值
int delId = Integer.parseInt(request.getParameter("id"));
System.out.println("要删除基本参数ID：" + delId);
String specialNo2 = request.getParameter("specialNo");
//删除技术参数信息
techInfoSer.deleteByPrimaryKey(delId);
request.setAttribute("specialNo", specialNo2);
return "techInfoList";
}
// --------加载技术参数录入界面-----------
@RequestMapping(value = "loadingTechInfo.do", method = RequestMethod.GET)
public String loadingTechInfo(HttpServletRequest request,
HttpServletResponse response){
// 获取参数值
try{
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
}catch(UnsupportedEncodingException e)
{
System.out.println("UnsupportedEncodingException:"+e.toString());
}
//String modType1 = new String(request.getParameter("modType").getBytes("ISO-8859-1"),"UTF-8");
//String modelNorm1 = new String(request.getParameter("modelNorm").getBytes("ISO-8859-1"),"UTF-8");
String specialNo1 = request.getParameter("specialNo");
String modType1 = request.getParameter("modType");
String modelNorm1 = request.getParameter("modelNorm");
// 传值
request.setAttribute("specialNo", specialNo1);
request.setAttribute("modType", modType1);
request.setAttribute("modelNorm", modelNorm1);
System.out.println("====技术参数传参测试====");
System.out.println(modType1);
System.out.println(specialNo1);
System.out.println(modelNorm1);
return "techInfo";
}
// 保存技术参数信息
@RequestMapping("saveTechInfo.do")
public void saveTechInfo(TechInfo record) {
//Integer maxID = techInfoSer.getTechInfoMaxID();
//record.setId(maxID+1);
record.setRemarks("***");
System.out.println("====技术参数保存输出====");
System.out.println(record.getSpecialNo());
System.out.println(record.getModType());
System.out.println(record.getLabel());
System.out.println(record.getValue());
System.out.println(record.getUnit());
System.out.println(record.getModelNorm());
// 插入TechInfo表
techInfoSer.saveTechInfo(record);
}
// --------加载技术参数信息修改界面-----------
@RequestMapping(value = "loadingModifyTechInfo.do", method = RequestMethod.GET)
public String loadingModifyTechInfo(HttpServletRequest request,
HttpServletResponse response){
// 获取参数值
int modifyId = Integer.parseInt(request.getParameter("id"));
System.out.println("要修改基本参数ID：" + modifyId);
TechInfo tech = new TechInfo();
tech = techInfoSer.getTechInfoByID(modifyId);
// 传值
request.setAttribute("id", tech.getId());
request.setAttribute("label", tech.getLabel());
request.setAttribute("modType", tech.getModType());
request.setAttribute("value", tech.getValue());
request.setAttribute("unit", tech.getUnit());
request.setAttribute("specialNo", tech.getSpecialNo());
request.setAttribute("modelNorm", tech.getModelNorm());
return "modifyTechInfo";
}
// 修改技术参数信息
@RequestMapping("modifyTechInfo.do")
public void modifyTechInfo(TechInfo record1) {
System.out.println("A要修改基本参数ID：" + record1.getId());
// 修改技术参数信息
techInfoSer.updateByPrimaryKey(record1);
} 实体类model:
package com.ouc.ulab.model;
import java.io.Serializable;
/*
* 基本参数(铭牌)信息
*/
public class TechInfo implements Serializable {
private static final long serialVersionUID = 1L;
private Integer id; //序号
private String label; //标注
private String value; //属性值
private String unit; //单位
private String specialNo; //专用号
private String modelNorm; //型号规格
private String modType; //所属模块类型
private String remarks; //备注
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getLabel() {
return label;
}
public void setLabel(String label) {
this.label = label;
}
public String getModType() {
return modType;
}
public void setModType(String modtype) {
this.modType = modtype;
}
public String getRemarks() {
return remarks;
}
public void setRemarks(String remarks) {
this.remarks = remarks;
}
public String getValue() {
return value;
}
public void setValue(String value) {
this.value = value;
}
public String getUnit() {
return unit;
}
public void setUnit(String unit) {
this.unit = unit;
}
public String getSpecialNo() {
return specialNo;
}
public void setSpecialNo(String specialNo) {
this.specialNo = specialNo;
}
public String getModelNorm() {
return modelNorm;
}
public void setModelNorm(String modelNorm) {
this.modelNorm = modelNorm;
}
}
服务类Service：
package com.ouc.ulab.service;
import java.util.List;
import java.util.Map;
import com.ouc.ulab.model.TechInfo;
public interface TechInfoService {
public List<TechInfo> getTechInfos();
public TechInfo getTechInfoByID(Integer Id);
public int saveTechInfo(TechInfo techInfo1);
public void updateByPrimaryKey(TechInfo techInfo1);
public void deleteByPrimaryKey(int id);
public List<TechInfo> getTechInfoByModSNo(String ModSNo1);
public int getTechInfoMaxID();
//-----------新加---------------
public List<TechInfo> getTechInfoList(String specialNo);
public void deleteBySpecialNo(String specialNo);
public int getTechInfoTotalRecordNum(TechInfo tech);
public List<TechInfo> getTechInfoByRowNum(Map paramMap);
}
最终效果图：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Git GUI的使用
- iOS UITableView-FDTemplateLayoutCell框架 cell重叠 高度返回0.5问题解决
- Android开发系列（三） 跟随移动userguide
- Unique Binary Search Trees
- IOS基础UI之(八)UIScrollView
- 浅谈单线程模型中Message、Handler、Message Queue、Looper之前的关系
- 测来测去，感觉REQUESTS最实在
- iOS8以后UIAlertView和UIActionSheet两种alert页面都将通过UIAlertController来创建
- C# webrequest 抓取数据时，多个域Cookie的问题
- 中文分词器IKAnalyzer——IKQueryParser主类分析
- 阿里RocketMQ Quick Start
- Cortex ™ -M0 Devices Generic User Guide（Chapter 1）
- Android自动化测试（UiAutomator）简要介绍
- 搭建Android UI Testing自动化测试开发环境
- 使用uiautomator做UI测试
- UIScrollView实现图片轮播器及其无限循环效果
- 自定义UISwitch颜色
- HDU 5504 GT and sequence 模拟
- UI技巧 批量修改控件属性
- TCO14 2C L2: CliqueGraph，graph theory, clique