Easyui Datagrid使用小例

男娘i 2022-08-09 09:46 173阅读 0赞

##  *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 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); }`  最终效果图：  ![Center][]  ![Center 1][]    ##

[Center]: https://img-blog.csdn.net/20151018233956333?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 1]: /images/20220731/103ded1366fb46ce9e0517ac1d00de44.png