easyui的datagrid的基本使用

最新推荐文章于 2024-05-05 16:40:52 发布
最新推荐文章于 2024-05-05 16:40:52 发布
阅读量1.1k 收藏
点赞数
分类专栏： easyui 文章标签： easyui
最近用easyui的datagrid,此datagrid具有增删改查,满足基本的使用:  

1.jsp代码(对页面的初始化操作): 
Js代码   收藏代码
  1. <%@ page language="java" pageEncoding="UTF-8"%>  
  2. <html>  
  3. <head>  
  4.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  5.     <meta http-equiv="pragma" content="no-cache">  
  6.     <meta http-equiv="cache-control" content="no-cache">  
  7.       
  8.     <title>ComboBox - jQuery EasyUI Demo</title>  
  9.       
  10.     <%  
  11.         String path = request.getContextPath();  
  12.     %>  
  13.       
  14.     <link rel="stylesheet" type="text/css" href="<%=path %>/jquery_ui/themes/default/easyui.css">  
  15.     <link rel="stylesheet" type="text/css" href="<%=path %>/jquery_ui/themes/icon.css">  
  16.     <link rel="stylesheet" type="text/css" href="<%=path %>/jquery_ui/ui.css">  
  17.     <script type="text/javascript" src="<%=path %>/jquery_ui/jquery-1.6.min.js"></script>  
  18.     <script type="text/javascript" src="<%=path %>/jquery_ui/jquery.easyui.min.js"></script>  
  19.     <script>  
  20.     $(function(){  
  21.         var lastIndex;  
  22.         $('#test').datagrid({  
  23.             title:'My DataGrid',  
  24.             iconCls:'icon-save',  
  25.             width:800,  
  26.             height:"auto",  
  27.             nowrap: false,  
  28.             striped: true,  
  29.             collapsible:true,  
  30.             url:'TestAction!getGridInfo.action',  
  31.             idField:'id',  
  32.             singleSelect:true,  
  33.             fitColumns: true,  
  34.             frozenColumns:[[  
  35.                 {field:'ck',checkbox:true},  
  36.                 {title:'编号',field:'id',width:80,sortable:true}  
  37.             ]],  
  38.             columns:[[  
  39.                 {title:'基本信息',colspan:2},  
  40.                 {  
  41.                     field:'tel',  
  42.                     title:'移动电话',  
  43.                     width:100,  
  44.                     align:'center',   
  45.                     rowspan:2,  
  46.                     editor: {  
  47.                         type: 'numberbox',  
  48.                         options:{  
  49.                             required: true,  
  50.                             validType: "length[11,11]"  
  51.                         }  
  52.                           
  53.                     }  
  54.                 }  
  55.             ],[  
  56.                 {  
  57.                     field:'name',  
  58.                     title:'姓名',  
  59.                     width:120,  
  60.                     editor:'text'  
  61.                 },  
  62.                 {field:'address',title:'地址',width:220,rowspan:2,editor:'text'}  
  63.             ]],  
  64.             pagination:true,  
  65.             toolbar:[{  
  66.                 id:'btnadd',  
  67.                 text:'Add',  
  68.                 iconCls:'icon-add',  
  69.                 handler:function(){  
  70.                     $('#btnsave').linkbutton('enable');  
  71.                     alert('add')  
  72.                 }  
  73.             },{  
  74.                 id:'btncut',  
  75.                 text:'Cut',  
  76.                 iconCls:'icon-cut',  
  77.                 handler:function(){  
  78.                     $('#btnsave').linkbutton('enable');  
  79.                     alert('cut')  
  80.                 }  
  81.             },'-',{  
  82.                 id:'btnsave',  
  83.                 text:'Save',  
  84.                 disabled:true,  
  85.                 iconCls:'icon-save',  
  86.                 handler:function(){  
  87.                     $('#btnsave').linkbutton('disable');  
  88.                     alert('save')  
  89.                 }  
  90.             }],  
  91.             onClickRow: function(rowindex){  
  92.                 $('#test').datagrid('endEdit', lastIndex);  
  93.                 $('#test').datagrid('beginEdit', rowindex);  
  94.                 var ed = $('#test').datagrid('getEditors', rowindex);  
  95.                   
  96.                 for (var i = 0; i < ed.length; i++){  
  97.                     var e = ed[i];  
  98.                     $(e.target).bind("keyup",function(event){  
  99.                         if (event.which == 13){  
  100.                             $('#test').datagrid('endEdit', rowindex);  
  101.                         }  
  102.                     });  
  103.                 }  
  104.                 lastIndex = rowindex;  
  105.             },  
  106.             onAfterEdit: function(rowIndex, rowData){  
  107.                 $.ajax({  
  108.                    url: "<%=request.getContextPath()%>/TestAction!updateGrid.action",  
  109.                    data: "name="+encodeURIComponent(rowData.name)+"&address="+encodeURIComponent(rowData.address)+"&tel="+encodeURIComponent(rowData.tel)+"&id="+rowData.id,  
  110.                    cache:false,  
  111.                    async : true  
  112.                 })  
  113.             }  
  114.         });  
  115.           
  116.         var p = $('#test').datagrid('getPager');  
  117.           
  118.         $(p).pagination({  
  119.             pageSize:10,  
  120.             pageList:[10,20,50],  
  121.             beforePageText: '第',  
  122.             afterPageText: '页    共 {pages} 页',  
  123.             displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条',  
  124.             onBeforeRefresh:function(){  
  125.                 $("#test").datagrid("reload");  
  126.             }  
  127.         });  
  128.     });  
  129.   
  130.     function search(value){  
  131.         var p = $('#test').datagrid('getPager');  
  132.         $(p).pagination({  
  133.             pageNumber: 1  
  134.         });  
  135.         var queryParams = $('#test').datagrid('options').queryParams;   
  136.         queryParams.name=value;  
  137.         $('#test').datagrid("reload");  
  138.     }  
  139.     </script>  
  140.       
  141.     <style type="text/css">  
  142.         .demo-info{  
  143.             background:#FFFEE6;  
  144.             color:#8F5700;  
  145.             padding:12px;  
  146.         }  
  147.         .demo-tip{  
  148.             width:24px;  
  149.             height:16px;  
  150.             float:left;  
  151.         }  
  152.     </style>  
  153. </head>  
  154. <body>  
  155.     <h2>Complex DataGrid</h2>  
  156.     <div class="demo-info">  
  157.         <div class="demo-tip icon-tip"></div>  
  158.         <div>Click the button to do actions with datagrid.</div>  
  159.     </div>  
  160.       
  161.     <input class='easyui-searchbox' prompt='请输入姓名进行搜索' style='width:798px' searcher='search'/>  
  162.       
  163.     <table id="test"></table>  
  164. </body>  
  165. </html>  


2.处理逻辑的TestAction类: 
Java代码   收藏代码
  1. public class TestAction extends ActionSupport{  
  2.       
  3.     private int rows;  
  4.     private int page;  
  5.     private long total;  
  6.       
  7.     private QueryDao dao = new QueryDao();  
  8.   
  9.     public long getTotal() {  
  10.         return total;  
  11.     }  
  12.   
  13.     public void setTotal(long total) {  
  14.         this.total = total;  
  15.     }  
  16.   
  17.     public int getRows() {  
  18.         return rows;  
  19.     }  
  20.   
  21.     public void setRows(int rows) {  
  22.         this.rows = rows;  
  23.     }  
  24.   
  25.     public int getPage() {  
  26.         return page;  
  27.     }  
  28.   
  29.     public void setPage(int page) {  
  30.         this.page = page;  
  31.     }  
  32.       
  33.     public void getGridInfo(){  
  34.         HttpServletRequest request = ServletActionContext.getRequest();  
  35.         List<Grid> list = new ArrayList<Grid>();  
  36.         String name = request.getParameter("name");  
  37.           
  38.         if(!("".equals(name) || name == null)){  
  39.             //根据名称进行模糊查询,并初始化查询出来的数据的页数和行数  
  40.             name = name.trim();  
  41.             list = dao.getGridByName(name, page, rows);  
  42.             total = dao.getSize();  
  43.         }else{  
  44.             total = dao.getTotal();  
  45.             list=dao.getGridData(page ,rows);  
  46.         }  
  47.         Map<String,Object> jsonMap = new HashMap<String,Object>();  
  48.         jsonMap.put("total", total);  
  49.         jsonMap.put("rows", list);  
  50.         JSONObject json=new JSONObject();  
  51.         json=JSONObject.fromObject(jsonMap);  
  52.         try {  
  53.             ServletActionContext.getResponse().setContentType("text/html;charset=utf-8");  
  54.             PrintWriter pw=ServletActionContext.getResponse().getWriter();  
  55.             pw.println(json.toString());   
  56.             pw.flush();  
  57.             pw.close();  
  58.         } catch (IOException e) {  
  59.             e.printStackTrace();  
  60.         }  
  61.     }  
  62.   
  63. public void updateGrid(){  
  64.         String id=(String)ServletActionContext.getRequest().getParameter("id");  
  65.         String name=(String)ServletActionContext.getRequest().getParameter("name");  
  66.         String address=(String)ServletActionContext.getRequest().getParameter("address");  
  67.         String tel=(String)ServletActionContext.getRequest().getParameter("tel");  
  68.         String hql="update Grid g set g.name=?,g.address=?,g.tel=? where g.id=?";  
  69.         try  
  70.         {  
  71.             DataAccess.createPersister().saveOrUpdateBySqlString(hql,new Object[]{name,address,tel,id});  
  72.             dao.updateGridCache(id);  
  73.         }  
  74.         catch (Exception ex)  
  75.         {  
  76.             ex.printStackTrace();  
  77.         }  
  78.     }  
  79.   
  80. }  


3.查询数据的QueryDao(如果大数据量,建议使用缓存): 
Java代码   收藏代码
  1. public class QueryDao{  
  2.       
  3.     private long size;  
  4.       
  5.     private int initPage;  
  6.           
  7.     public int getInitPage() {  
  8.         return initPage;  
  9.     }  
  10.       
  11.     public long getSize() {  
  12.         return size;  
  13.     }  
  14.     /** 
  15.      * 查询出所有的grid数据,便于进行大数据量的模糊查询 
  16.      * @return 
  17.      */  
  18.     public List<Grid> getAllGrid(){  
  19.           
  20.         String hql = "from Grid";  
  21.         try  
  22.         {  
  23.             Query query = DataAccess.createQuery();  
  24.               
  25.             @SuppressWarnings("unchecked")  
  26.             List<Grid> gridResult = query.queryByHqlString(hql);  
  27.             return gridResult;  
  28.         }  
  29.         catch (Exception ex)  
  30.         {  
  31.             ex.printStackTrace();  
  32.         }  
  33.         return new ArrayList<Grid>();  
  34.     }  
  35.       
  36.     public List<Grid> getGridData(int page , int row){  
  37.         //Cache cache = CacheManager.getInstance().getCache("grid");  
  38.         List<Grid> list = (List<Grid>)getAllGrid();  
  39.         return spliList(list, page, row);  
  40.     }  
  41.       
  42.     public Long getTotal(){  
  43.         String countHql = "select count(*) from Grid";  
  44.         try  
  45.         {  
  46.             Query query = DataAccess.createQuery();  
  47.               
  48.             List countList = query.queryByHqlString(countHql);  
  49.             long total = (Long)countList.get(0);              
  50.             return total;  
  51.         }  
  52.         catch (Exception ex)  
  53.         {  
  54.             ex.printStackTrace();  
  55.         }  
  56.         return 0L;  
  57.     }  
  58.       
  59.     public Grid getGridById(String id){  
  60.         String hql = "from Grid where id=?";  
  61.         try  
  62.         {  
  63.             Query query = DataAccess.createQuery();  
  64.               
  65.             List countList = query.queryByHqlString(hql,new Object[]{id});  
  66.             return (Grid)countList.get(0);  
  67.         }  
  68.         catch (Exception ex)  
  69.         {  
  70.             ex.printStackTrace();  
  71.         }  
  72.         return new Grid();  
  73.     }  
  74.       
  75.     /** 
  76.      * 查询包含此数据名的数据 
  77.      * @param name 
  78.      * @param total 
  79.      * @return 
  80.      */  
  81.     public List<Grid> getGridByName(String name,int page, int rows){  
  82.         List<Grid> gridList = new ArrayList<Grid>();  
  83.         Cache cache = CacheManager.getInstance().getCache("grid");  
  84.         List<Grid> list = (List<Grid>)cache.getValue();  
  85.         for(int i = 0, len = list.size(); i < len; i++){  
  86.             Grid grid = (Grid) list.get(i);  
  87.             if(grid.getName().contains(name)){  
  88.                 gridList.add(grid);  
  89.             }  
  90.         }  
  91.         size = gridList.size();  
  92.         return spliList(gridList, page, rows);  
  93.     }  
  94.       
  95.     /** 
  96.      * 对list进行分页 
  97.      * @param list 
  98.      * @param page 
  99.      * @param rows 
  100.      * @return 
  101.      */  
  102.     public List spliList(List list, int page, int rows){  
  103.         List grid = new ArrayList();  
  104.         int a = (page - 1) * rows;  
  105.         int b = a + rows;  
  106.         for(int i = a; i < b; i++){  
  107.             try {  
  108.                 grid.add(list.get(i));  
  109.             } catch (IndexOutOfBoundsException e) {  
  110.                 return grid;  
  111.             }  
  112.         }  
  113.         return grid;  
  114.     }  
  115.       
  116.     public void updateGridCache(String id){  
  117.         Cache cache = CacheManager.getInstance().getCache("grid");  
  118.         List<Grid> list = (List<Grid>)cache.getValue();  
  119.         for (int i = 0, len = list.size(); i < len; i++) {  
  120.             Grid grid  = list.get(i);  
  121.             if(id.equals(grid.getId())){  
  122.                 Grid updateGrid = getGridById(id);  
  123.                 list.remove(i);  
  124.                 list.add(i, updateGrid);  
  125.                 cache.setValue(list);  
  126.                 return;  
  127.             }  
  128.         }  
  129.     }  
  130. }  


以上就是如何基本使用easyui的datagrid...
shuangyidehudie
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
easyui datagrid editor回车切换单元格示例，可参考
12-27
easyui datagrid editor回车切换单元格示例，适合熟悉easyui但又不懂如何做的人员，可能参考一下源码JS。
EasyUI_dataGrid
yangxu19992的博客
04-20 605
数据表格属性： $(function (){ $("#ID").datagrid({ url:basePath+"",//远程站点请求数据的地址 loadMsg:"加载数据中...",//载入数据时显示的一条快捷信息 method:"post",//请求远程数据的方法类型 rownumbers:boolean,//true显示行数 singleSelect:boolean,//tru
easyUI 在datagrid中进行单元格编辑，并在单元格加入自定义combobox下拉框
我只是代码搬运工的博客
11-11 3250
最近项目中需要使用easyUI的datagrid表格来展示数据，并允许用户对部分列单元格进行编辑、保存。单元格格式为文本（text）或者下拉框（combobox）。 （1）datagrid的创建使用可以参考easyUI官网。https://www.jeasyui.net/plugins/183.html （2）datagrid默认是不允许编辑里面的单元格的，需要一些配置才可以进行编辑操作。官网也有例子。https://www.jeasyui.net/demo/332.html 注意：只要你写的代码和官
easyui数据表格参数设置详解
xiaolegeaizy的博客
05-27 1266
$('#dg').datagrid({ url: dataUrl, methord: 'post', queryParams: QueryParameters, idField: "id", height: 300, striped: true,//True 奇偶行使用不同背景色 ...
EasyUI实战篇之datagrid：如何重新设置datagrid所配置的属性(options)并重新查询列表(relaod)...
weixin_33681778的博客
09-28 745
http://www.stepday.com/topic/?873 今天在使用EasyUI的datagrid列表组件想实现一个列表的展现，且列表上方有搜索条件，初始化的时候我是这样配置的：   view sourceprint? 1.&lt;table id="tBaoXiuList" title="" class="easyui-datagrid" style="widt...
easyui datagrid 查询 分页
scott444的专栏
05-25 513
$('#list').datagrid({ width:'auto', height:'auto', striped: true, loadMsg:'数据加载中请稍后……', fitColumns: false, pagination: true, nowrap:true,    url:'/LvwanVehicleSearchAction/LvwanHistorySearch',
获取jqGrid中每行的子元素td并修改其属性
jsy625的专栏
06-09 6610
获取jqGrid中每行的子元素td并修改其属性　　最近项目中用到了jqGrid来显示表格，使用起来确实非常方便，值得推荐。昨天，遇到了一个看起来简单的需求，但是网上却没找到这个需求的解决方案（可能是信息检索能力有限，或者英文阅读能力有限），于是把摸索后的解决方案整理如下。需求：实现表中某列元素title的自定义　　jqGrid表中每行的每个td的title都是确定的，默认为该td中的值。当然这个ti
Easyui之Datagrid(数据表格)
月亮投递员的博客
06-24 2968
Datagrid前言1、概念2、常见使用案例3、datagrid属性4、datagrid事件5、datagrid方法6、案例演示7、为什么使用datagrid总结 前言 今天为大家分享的内容是datagrid,数据表格，用来展示表格中的数据！ 1、概念 Datagrid是用来展示表格数据的一种组件！ 2、常见使用案例 没错，我今天要讲的案例效果就和下面这张图差不多： 根据使用的不同情况和创建DataGrid的方式，分为以下三种： 1、如果从现有的表格元素去创建DataGrid，在HTML中定义列、行和数据
easyui datagrid 大数据加载效率慢,优化解决方法(推荐)
09-01
下面小编就为大家带来一篇easyui datagrid 大数据加载效率慢,优化解决方法(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Jquery EasyUI Datagrid右键菜单实现方法
12-29
最近在学Jquery EasyUI，现在来说一说EasyUI的DataGrid，一般当我们在实现前端界面的时候，经常在DataGrid的上面或者后面加一些按钮，方便用户进行一些添加，删除，编辑等功能 用户在每次使用的时候，都需要去先...
jQuery EasyUI datagrid实现本地分页的方法
01-19
本文实例讲述了jQuery EasyUI datagrid实现本地分页的方法。分享给大家供大家参考。具体如下： 一般分页都是后台做，前端做无论从哪方面考虑都不合适。但是有的时候还是有这种需求。 这里重点用到了pagination的监听...
EasyUI DataGrid过滤用法实例
02-22
EasyUI DataGrid过滤用法实例
解决easyui datagrid (后端c#）动态展示表格标题的问题
sinat_36500530的博客
05-19 797
解决过程： 一、后端用list装好动态的标题数据，将原本的实体模型更改为DynamicObject，参考文章（C#基础知识---动态为类型添加属性_weixin_30596343的博客-CSDN博客），动态的添加属性，不通，发现easyui datagrid 无法识别，或者说是前端页面无法读取到数据 二、从前端方向着手 1、后端使用字典的方式动态给模型添加字段 public Dictionary<string, object> dicProperty { get; set; } ..
Jquery Easy UI学习(一)datagrid的使用
兴趣温存的专栏
01-23 2283
Easy UI一个最常用的表格控件，这一篇，我们学习下DataGrid的使用及属性， 方法一：jsp中定义时，直接定义好属性等，还是使用data-options="..."设定属性，  <table id="verification_requirement_list" title="核查需求登记" class="easyui-datagrid"   style="width:900px;
jqGrid 展示数据、获取查询条件进行查询案例
us2019的博客
10-10 1935
如图，用jqgrid实现 数据的展示 html: <div class="gridPanel panel-collapse collapse in" id="cis_grid" style="width:99%"> <table id="gridList"></table> <div id="gridPag...
EasyUi的DataGrid组件扩展，统计当前页信息
weixin_34130389的博客
12-15 108
1.[代码]使用方法 // 为datagrid开启统计功能 $('#list').datagrid({ ..... // 此处代码略 showFooter : true, onLoadSuccess : function() { $('#list').datagrid('statist...
datagrid java_java_easyui体系之DataGrid（3）[转]
weixin_42499335的博客
02-20 421
一：简介在2的基础上实现增删改、增、改都是通过行编辑来实现的。具体业务逻辑：1、 增加一条记录的时候：a) 在datagrid表格最前端增加一行(当然也可在指定位置增加、)增加的行的字段必须与要显示的行的字段相同、或者用于存入数据库的更多信息，b) 当有一条新增记录没有被保存时不能再增加新的行c) 点击保存按钮、保存新增记录d) 未保存之前点击撤销按钮、取消新增行2、 修改一条记录的时候a) 可以...
easyui异步
yangzhao6628的博客
01-12 434
/** 号场列表 */ var venueSiteDatagrid; /** 编辑状态 */ var editRow = undefined; /** 场馆Id */ var venueId; /** 名称 */ var venueName; $(function() {     venueId = $('#venueId').val();     venueName =
LLM⊗KG范式下的知识图谱问答实现框架思想阅读
最新发布
qq_32907491的博客
05-05 376
分享一张有趣的图，意思是在分类场景下，使用大模型和fasttext的效果，评论也很逗。这其实背后的逻辑是，在类别众多的分类场景下，尤其是在标注数据量不缺的情况下，大模型的收益是否能够比有监督模型的收益更多。这个例子虽然没有说标注数据量，但估计量不会少。我们继续回到知识图谱与大模型的话题:读到一个大模型和知识图谱融合的有趣工作《 Think-on-Graph: Deep and Responsible Reasoning of Large Language Model on Knowledge Graph》(
easyui datagrid loading的使用
07-14
在 EasyUI 中，可以使用 `datagrid` 组件的 `loading` 方法来显示加载状态。以下是一个示例代码： ```javascript // 获取 datagrid 元素 var datagrid = $('#myDatagrid'); // 显示加载状态 datagrid.datagrid('...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值