java_easyui体系之DataGrid（3）

最新推荐文章于 2024-08-14 12:36:58 发布
最新推荐文章于 2024-08-14 12:36:58 发布
阅读量3.7k 收藏 1
点赞数 1
分类专栏： Oscar_front 文章标签： datagrid 动态Editor扩展 easyui datagridDUAL easyui行编辑
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/crave_shy/article/details/17884805
版权

java_easyui体系之DataGrid（3）


一：简介

 

        在2的基础上实现增删改、增、改都是通过行编辑来实现的。具体业务逻辑：

        1、  增加一条记录的时候：

                a)        在datagrid表格最前端增加一行（当然也可在指定位置增加、）增加的行的字段必须与要显示的行的字段相同、或者用于存入数据库的更多信息，

                b)        当有一条新增记录没有被保存时不能再增加新的行

                c)        点击保存按钮、保存新增记录

                d)        未保存之前点击撤销按钮、取消新增行

        2、  修改一条记录的时候

                a)        可以选择一条记录、点击修改之后出现可编辑状态

                b)        可以双击一条记录直接出现可编辑状态、

                c)        不管是那种进入修改的方式、都只能同时修改一条记录、并且密码列不允许编辑

                3、  撤销功能：

                a)        当点击新增、出现新增行之后、不想修改则可以取消新增

                b)        当进入修改状态时、不想修改、点击撤销可取消修改状态

                4、  删除：

                a)        可同时删除多条记录、在删除之前会给出确认框、用于避免误删。

                5、  关于新增、修改的与后台的交互操作、都是通过datagrid的onAfterEdit事件来完成的。具体的逻辑可根据自己的需要自行扩展

                6、  对处于可编辑状态行的输入信息框进行了扩展：

                a)        对用于选择时间的input扩展了一个datetimebox可以精确选择时间的功能

                b)        对某列是否具有可编辑功能进行了扩展

 

二：关键之处


        1、效果图：




        2、datetimebox的扩展及使用方式


                   a）扩展代码：在自己定义的js中、页面必须引入此js文件 

/**
 * 扩展的关于编辑状态的 对要输入日期的控件使用
 */
$.extend($.fn.datagrid.defaults.editors, {
	datetimebox: {
		init: function(container, options){
			var editor = $('<input />').appendTo(container);
			options.editable = false;
			editor.datetimebox(options);
			return editor;
		},
		getValue: function(target){
			return $(target).datetimebox('getValue');
		},
		setValue: function(target, value){
			$(target).datetimebox('setValue', value);
		},
		resize: function(target, width){
			$(target).datetimebox('resize',width);
		},
		destroy: function(target){
			$(target).datetimebox('destroy');
		},
	}
});

                   b）使用方式：是在datagrid初始化时用于显示时间的相应列上加的属性、可见页面源码 

				title : '创建时间',
				field : 'createTime',
				width : 100,//必须要给
				editor : {
					type:'datetimebox',//扩展的用于选择具体时间的类型
					options:{
						required: true,
					}
				}


        3、editor的扩展及使用方式


                   a）扩展代码：在自己定义的js中、页面必须引入此js文件


/**
 * 动态的选择处于修改状态的行中的某些列是否可编辑
 */
$.extend($.fn.datagrid.methods, {
	addEditor : function(jq, param){
		if(param instanceof Array){
			$.each(param, function(index, item){
				var e = $(jq).datagrid('getColumnOption', item.field);
				e.editor = item.editor;
			});
		} else {
			var e = $(jq).datagrid('getColumnOption', param.field);
			e.editor = param.editor;
		}
	},
	removeEditor : function(jq, param){
		if(param instanceof Array){
			$.each(param, function(index, item){
				var e = $(jq).datagrid('getColumnOption', item);
				e.editor = {};
			});
		} else {
			var e = $(jq).datagrid('getColumnOption', param);
			e.editor = {};
		}
	}
});


                  b）使用方式：是在点击修改按钮时触发的函数中、同样双击事件中也要加上、保持一致。

 

				text : '修改',
				iconCls : 'icon-edit',
				handler : function() {
					var rows = $('#datagrid').datagrid('getSelections');
					if(rows.length ==1){
						//修改时、取消密码一栏的可编辑状态
						$('#datagrid').datagrid('removeEditor', 'passWord');
						
						if(editRow != undefined){
							$('#datagrid').datagrid('endEdit', editRow);
						}
						if(editRow == undefined){
							var rowIndex = $('#datagrid').datagrid('getRowIndex',rows[0]);
							$('#datagrid').datagrid('beginEdit',rowIndex);
							editRow = rowIndex;
							$('#datagrid').datagrid('unselectAll');
						}
					}else if( rows.length == 0){
						$.messager.alert('提示', '请选择一条修改记录！','info');
					}else if(rows.length >= 1){
						$.messager.alert('提示', '只能选择一条修改记录！','info');
					}
				}


三：页面源码


        各个方法代码中都有很明确的注释、不再单独赘述。

        1、首页 datagrid2


<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    
    <title>My JSP 'original.jsp' starting page</title>
    
    <link rel="stylesheet" type="text/css" href="css/easyui/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="css/easyui/icon.css">
    <link rel="stylesheet" type="text/css" href="css/easyui/demo.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="js/chyUtils.js"></script>
    
    <script type="text/javascript">
    	function userManage(id){
    		console.info(id);
    		if("door" == id){
    			$('#tt').tabs('select', 0);
    		}
    		if("userManage" == id){
    			$('#tt').tabs('select', 1);
    		}
    	}
    </script>
  </head>
  
	<body id="blayout" class="easyui-layout">
	    <div data-options="region:'north', split:false" style="height:100px;"></div>
	    <div data-options="region:'east',title:'在线列表',split:true" style="width:160px;"></div>
	    <div data-options="region:'west',title:'功能导航',split:true" style="width:160px;">
	    	<div class="easyui-accordion" data-options="fit:true,border:false">
                <div title="Title1" data-options=" iconCls:'icon-save'" style="padding:10px;">
                	content1
                </div>
                <div title="Title2" data-options="fit:true,border:false,iconCls:'icon-reload',selected:true" style="padding:10px">
                    <ul>
                    	<li><a id="door"  class="easyui-linkbutton" οnclick="userManage(id);" data-options="plain:true">门户</a> </li>
                    	<li><a id="userManage" class="easyui-linkbutton" οnclick="userManage(id);" data-options="plain:true">用户管理</a></li>
                    </ul>
                </div>
            </div>
	    </div>
	    <div data-options="region:'center',title:'欢迎',"style="overflow: hidden;">
	    	<div id="tt" class="easyui-tabs" data-options="fit:true,border:false,">
			<div title="门户" data-options="closable:true" >
				门户
			</div>
			<div id="userManage" title="用户管理" data-options="href:'user.jsp',closable:true" >
			</div>
		</div>
	    </div>
	</body>
</html>


        2、user.jsp: 

<script type="text/javascript">
	$(function() {
		var editRow = undefined;//用于存放当前编辑行的index

		$('#datagrid').datagrid({
			url : 'login_getJson.action',
			title : '用户列表',
			iconCls : 'icon-save',
			pagination : true,
			pageSize : 10,
			pageList : [ 10, 20, 30, 40, 50, 60, 70, 80, 90, 100 ],
			fit : true,//使表格自适应
			fitColumns : true,//使得表格中所有的列宽相加等于自适应的宽度、也就是浏览器改变大小的时候下方会不会出现滚动条、一般只有在列较少的时候使用
			nowrap : false,//表格中的文字可以换行、默认是false、不能换行、这样在文字很多的时候就看不到全部：使用真实的数据去测试
			border : false,
			idFeild : 'id',//标识、会记录我们选中项的id、不一定是id、通常使用主键
			sortName : 'id',//设置默认排序时的 字段（必须是field中的一个字段）
			sortOrder : 'asc',//是按照升序还是降序排序	但是仅仅添加这两个字段并不会自动排序、这样写的意义就是前台会自动的向后台传递两个参数：sort order,我们可以在后台查询记录的时候进行排序
			columns : [ [ {
				title : '编号',
				field : 'id',
				width : 100,//必须要给
				//sortable:true,//指定按照这个排序
				checkbox : true,
				
			}, {
				title : '姓名',
				field : 'userName',
				width : 100,//必须要给
				editor : {
					type:'validatebox',
					options:{
						required: true,
					}
				}

			}, {
				title : '密码',  
				field : 'passWord',
				width : 100,//必须要给
				editor : {
					type:'validatebox',
					options:{
						required: true,
					}
				}
			}, {
				title : '创建时间',
				field : 'createTime',
				width : 100,//必须要给
				editor : {
					type:'datetimebox',//扩展的用于选择具体时间的类型
					options:{
						required: true,
					}
				}
			}, {
				title : '修改时间',
				field : 'updateTime',
				width : 100,//必须要给
				editor : {
					type:'datetimebox',//扩展的用于选择具体时间的类型
					options:{
						required: true,
					}
				}

			} ] ],
			toolbar : [ {
				text : '增加',
				iconCls : 'icon-add',
				handler : function() {
					
					if(editRow != undefined){
						$('#datagrid').datagrid('endEdit', editRow);
					}
					if(editRow == undefined){
						$('#datagrid').datagrid('addEditor', {
							field : 'passWord',
							editor : {
								type:'validatebox',
								options:{
									required: true,
								}
							}
						});
						
						$('#datagrid').datagrid('insertRow', {
							index : 0,
							row : {
								id : "1",
								userName:'请输入名称',
								passWord:'请输入密码'
							}
						});
						editRow = 0;
						$('#datagrid').datagrid('beginEdit',0);
						
						/* 在最后一行添加一个增加行。
						$('#datagrid').datagrid('appendRow', {

						});
						var rows = $('#datagrid').datagrid('getRows').length;
						$('#datagrid').datagrid('beginEdit',rows-1);
						*/
					}
				}
			}, '-', {
				text : '删除',
				iconCls : 'icon-remove',
				handler : function() {
					var rows = $('#datagrid').datagrid('getSelections');
					if(rows.length > 0){
						$.messager.confirm('请确认','您确定要删除当前选择的'+rows.length+'项吗？', function(option){
							if(option){
								//一般将id的一个集合传到后台删除
								var ids = [];
								for(var i = 0; i< rows.length; i++){
									ids.push(rows[i].id);
								}
								console.info(ids.join(','));
								/*在这里将id拼接的字符串传到后台、将其删除、调用ajax、在
									ajax的success中再重新加载一下datagrid表格:
									$('#datagrid').datagrid('load',{});
								*/
								
							}
						});
					}else{
						$.messager.alert('提示', '请选择要删除的记录', 'error');
					}
				}
			}, '-', {
				text : '修改',
				iconCls : 'icon-edit',
				handler : function() {
					var rows = $('#datagrid').datagrid('getSelections');
					if(rows.length ==1){
						//修改时、取消密码一栏的可编辑状态
						$('#datagrid').datagrid('removeEditor', 'passWord');
						
						if(editRow != undefined){
							$('#datagrid').datagrid('endEdit', editRow);
						}
						if(editRow == undefined){
							var rowIndex = $('#datagrid').datagrid('getRowIndex',rows[0]);
							$('#datagrid').datagrid('beginEdit',rowIndex);
							editRow = rowIndex;
							$('#datagrid').datagrid('unselectAll');
						}
					}else if( rows.length == 0){
						$.messager.alert('提示', '请选择一条修改记录！','info');
					}else if(rows.length >= 1){
						$.messager.alert('提示', '只能选择一条修改记录！','info');
					}
				}
			}, '-',{
				text : '保存',
				iconCls : 'icon-save',
				handler : function() {
					$('#datagrid').datagrid('endEdit', editRow);
				}
			}, '-',{
				text : '取消编辑',
				iconCls : 'icon-redo',
				handler : function() {
					//将事务回滚、取消选中的行
					editRow = undefined;
					$('#datagrid').datagrid('rejectChanges');
					$('#datagrid').datagrid('unselectAll');
				}
			}, '-' ],
			onAfterEdit : function(rowIndex, rowData, changes){
				console.info(rowData);
				//使用ajax提交、在success中处理、如果添加成功
				/*
					1、添加成功
					editRow = undefined;
					2、添加不成功
					$('#datagrid').datagrid('beginEdit', rowIndex);
				*/
				
				//假设添加成功 
				editRow = undefined;
				
			},
			//双击修改行
			onDblClickRow : function(rowIndex, rowData){
				$('#datagrid').datagrid('unselectAll');
				if(editRow != undefined){
					$('#datagrid').datagrid('endEdit', editRow);
				}
				if(editRow == undefined){
					$('#datagrid').datagrid('removeEditor', 'passWord');
					$('#datagrid').datagrid('beginEdit',rowIndex);
					editRow = rowIndex;
				}
			}
		});
	});

	//查询数据
	function show() {
		$('#datagrid').datagrid('load', serializeObject($('#searchForm')));
	}

	//清除查询条件、返回初始数据展示状态
	function clean() {
		$('#datagrid').datagrid('load', {});
		$('#searchForm').find('input').val('');
	}
</script>

<div class="easyui-layout" data-options="fit:true,border:false,">
	<div data-options="region:'north',border:false,title:'过滤'"
		style="height: 140px;overflow: hidden">
		<form id="searchForm">
			<table class="datagrid-toolbar" style="height:100%;width:100%">
				<tr>
					<th>用户名</th>
					<td><input id="username" name="username" style="width: 320px" />
					</td>
				</tr>
				<tr>
					<th>创建时间</th>
					<td><input name="createTimeStart" editable="false"
						class="easyui-datetimebox" style="width:155px;" /> 至 <input
						name="createTimeEnd" editable="false" class="easyui-datetimebox"
						style="width:155px;" /></td>
				</tr>
				<tr>
					<th>修改时间</th>
					<td><input name="modifyTimeStart" editable="false"
						class="easyui-datetimebox" style="width:155px;" /> 至 <input
						name="modifyTimeEnd" editable="false" class="easyui-datetimebox"
						style="width:155px;" /> <a class="easyui-linkbutton"
						οnclick="show();">查询</a> <a class="easyui-linkbutton"
						οnclick="clean();">清空</a></td>
				</tr>
			</table>
		</form>

	</div>

	<div data-options="region:'center',border:false">
		<table id="datagrid"></table>
	</div>

</div>

        3、LoginAction——getJson()： 

	public String getJson() throws IOException{
		List<UserDTO> userList = new ArrayList<UserDTO>();
		userList.add(new UserDTO("1","chy","123",getCurrentTime(),getCurrentTime()));
		userList.add(new UserDTO("2","mxx","123",getCurrentTime(),getCurrentTime()));
		userList.add(new UserDTO("3","chk","123",getCurrentTime(),getCurrentTime()));
		if("chy".equals(username)){
			userList.add(new UserDTO("4","chy","123",getCurrentTime(),getCurrentTime()));
		}
		//当与后台交互时、可以根据前台回传的页号与每页记录数查询数据
		//List<UserDTO> userList = userService.getUsers(page, rows); 这样就可以动态获取每页记录数、前台动态展示。
		//但是现在前台的总页数却变成每页的记录数、这样就要求还要有个service查询总记录数、然后重新构造Json传回到前台
		//int count = userService.getUersCount();
		
		/*
		 * 想要按照某个列进行排序的时候、就使用前台传过来的关于排序的字段和排序方式 sort、order
		 * List<UserDTO> userList = userService.getUsers(page, rows, sort, order) 
		 */
		System.out.println("sort" + sort + " order" + order);
		
		Map<String, Object> m = new HashMap<String, Object>();
		m.put("total", 12);
		m.put("rows", userList);
		
		
		System.out.println(getJson(m));
		
		PrintWriter pw  = ServletActionContext.getResponse().getWriter();
		pw.write(getJson(m));
		pw.flush();
		pw.close();
		return null;
	}

	private String getCurrentTime(){
		SimpleDateFormat   sDateFormat   =   new   SimpleDateFormat("yyyy-MM-dd hh:mm:ss");   
		return  sDateFormat.format(new   java.util.Date()); 
		
	}
	
	private String getJson(Object o) throws IOException,
			JsonGenerationException, JsonMappingException {
		ObjectMapper om = new ObjectMapper();
		StringWriter sw = new StringWriter();
		JsonGenerator jg = new JsonFactory().createJsonGenerator(sw);
		om.writeValue(jg, o);
		jg.close();
		return sw.toString();
	}

        4、UserDTO： 


package com.chy.ssh.business.bean;

import java.io.Serializable;

@SuppressWarnings("serial")
public class UserDTO implements Serializable{
	private String id;
	private String userName;
	private String passWord;
	private String createTime;
	private String updateTime;
	
	
	public UserDTO() {
		super();
	}
	
	
	public UserDTO(String id, String userName, String passWord,
			String createTime, String updateTime) {
		super();
		this.id = id;
		this.userName = userName;
		this.passWord = passWord;
		this.createTime = createTime;
		this.updateTime = updateTime;
	}


	public String getCreateTime() {
		return createTime;
	}
	public void setCreateTime(String createTime) {
		this.createTime = createTime;
	}
	public String getUpdateTime() {
		return updateTime;
	}
	public void setUpdateTime(String updateTime) {
		this.updateTime = updateTime;
	}
	public String getUserName() {
		return userName;
	}
	public void setUserName(String userName) {
		this.userName = userName;
	}
	public String getPassWord() {
		return passWord;
	}
	public void setPassWord(String passWord) {
		this.passWord = passWord;
	}
	public String getId() {
		return id;
	}
	public void setId(String id) {
		this.id = id;
	}
	
}

        5、chyUtils.js: 


/**
 * 动态的选择处于修改状态的行中的某些列是否可编辑
 */
$.extend($.fn.datagrid.methods, {
	addEditor : function(jq, param){
		if(param instanceof Array){
			$.each(param, function(index, item){
				var e = $(jq).datagrid('getColumnOption', item.field);
				e.editor = item.editor;
			});
		} else {
			var e = $(jq).datagrid('getColumnOption', param.field);
			e.editor = param.editor;
		}
	},
	removeEditor : function(jq, param){
		if(param instanceof Array){
			$.each(param, function(index, item){
				var e = $(jq).datagrid('getColumnOption', item);
				e.editor = {};
			});
		} else {
			var e = $(jq).datagrid('getColumnOption', param);
			e.editor = {};
		}
	}
});
 

 

四：补充说明
 

 
 
 

 


      代码贴的比较多、这样看起来会有头有尾一点、以后用可以直接copy。。。没有与后台交互、但是这里不是重点、页面写好、后台就视个人而定了。 

 

 
 
 

 

                

        

        

    

  


    

      

        

            

              
                
                  huaying.chen
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
easyui datagrid editor onBeforeEdit事件下使用getEditor和getEditors失效

				
			

			

				

					我说我想
				

				

					10-22
					
					1万+
					
				

			

		

		

			
				
我在使用onClickRow: function(rowIndex,rowData){
                    if(editRow!=-1){
                        reportgrid.datagrid('validateRow');
                        reportgrid.datagrid('endEdit',ed

			
		

	



                

              
                



	

		

			

				
					
datagrid java_java_easyui体系之DataGrid（3）[转]

				
			

			

				

					weixin_42499335的博客
				

				

					02-20
					
					439
					
				

			

		

		

			
				
一：简介在2的基础上实现增删改、增、改都是通过行编辑来实现的。具体业务逻辑：1、 增加一条记录的时候：a) 在datagrid表格最前端增加一行(当然也可在指定位置增加、)增加的行的字段必须与要显示的行的字段相同、或者用于存入数据库的更多信息，b) 当有一条新增记录没有被保存时不能再增加新的行c) 点击保存按钮、保存新增记录d) 未保存之前点击撤销按钮、取消新增行2、 修改一条记录的时候a) 可以...

			
		

	



                


  
              

                


	

		

			

				
					
java_easyui体系之DataGrid（1）

				
			

			

				

					Oscar Chen
				

				

					01-03
					
					4037
					
				

			

		

		

			
				
摘要：
        简单的使用DataGrid来展示表格数据、以及对分页、总记录数、按字段排序、获取Json进行了简单说明。

			
		

	





	

		

			

				
					
WPF之DataGrid

					
最新发布

				
			

			

				

					Major_S的博客
				

				

					08-14
					
					339
					
				

			

		

		

			
				
【代码】WPF之DataGrid。

			
		

	



		

			
		



	

		

			

				
					
java_easyui体系之DataGrid（5）

				
			

			

				

					Oscar Chen
				

				

					01-08
					
					3302
					
				

			

		

		

			
				
摘要：
        datagrid最后一个、主要是补充formatter的使用、以及datagrid样式的调节。

			
		

	





	

		

			

				
					
datagrid java_EasyUI DataGrid 结合Java 各种技巧大综合，你值得拥有。

				
			

			

				

					weixin_30380991的博客
				

				

					02-12
					
					257
					
				

			

		

		

			
				
singleSelect : true这两天，一直被datagrid折磨着，不过今天基本结束了，我准备把这几天碰到的问题和解决方法总结一下，欢迎指正。环境：jquery-easyui-1.3.2版本。DataGrid 生成从后台传过来直接生成datagridjsp代码：说明：只需要定义一个table，给他一个id就OK。js代码：$('#items').datagrid({url:"dataLis...

			
		

	





	

		

			

				
					
easyui datagrid java_java_easyui体系之DataGrid（1）[转]

				
			

			

				

					weixin_39771351的博客
				

				

					02-15
					
					191
					
				

			

		

		

			
				
一：简介以表格的形式展示数据、项目中式很常见的一个使用、table展示数据、牵扯到分页、上一页下一页、首页、尾页、翻页、选中展示的记录用于操作、总记录数等等、使用DataGrid很容易实现这一点。二：页面源码各个字段在页面中都有详细的说明datagrid.jspMy JSP 'original.jsp' starting page内嵌页面datagridtaps.html：dategridtaps...

			
		

	





	

		

			

				
					
easyUI之datagrid（数据表格）使用

				
			

			

				

					2401_84091663的博客
				

				

					04-19
					
					861
					
				

			

		

		

			
				
正值金三银四招聘旺季，很多小伙伴都询问我有没有前端方面的面试题，特地整理出来赠送给大家！资料领取方式：点击这里前往免费获取既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！[外链图片转存中…(img-9VZKbTnN-1713481672878)]由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！如果你觉得这些内容对你有帮助，可以扫码获取！！

			
		

	





	

		

			

				
					
easyUI之datagrid（数据表格）使用，前端高级工程师面试实战

				
			

			

				

					m0_v648374的博客
				

				

					03-18
					
					1055
					
				

			

		

		

			
				
编程基础的初级开发者，计算机科学专业的学生，以及平时没怎么利用过数据结构与算法的开发人员希望复习这些概念为下次技术面试做准备。或者想学习一些计算机科学的基本概念，以优化代码，提高编程技能。这份笔记都是可以作为参考的。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】基础的初级开发者，计算机科学专业的学生，以及平时没怎么利用过数据结构与算法的开发人员希望复习这些概念为下次技术面试做准备。或者想学习一些计算机科学的基本概念，以优化代码，提高编程技能。这份笔记都是可以作为参考的。

			
		

	





	

		

			

				
					
easyui datagrid表格解析日期，成长整型

				
			

			

				

					2401_83816794的博客
				

				

					03-23
					
					667
					
				

			

		

		

			
				
/ 这里用到一个javascript的Date类型的拓展方法，这个是自己添加的拓展方法，在后面的步骤3定义。

			
		

	





	

		

			

				
					
java_easyui体系之DataGrid（4）[转]

				
			

			

				

					weixin_33910460的博客
				

				

					01-18
					
					105
					
				

			

		

		

			
				
一：简介
在前面DataGrid（3）的基础上添加后台的实现、本来是想只搭建前台页面的、后台不写、现在觉得还是都实现好点、从真实情况出发、后台用的ssh。
1、 新增冻结列功能。
2、 实现界面的添加、删除、修改、撤销编辑、撤销选中、清空datagrid记录的功能、在后台也对其实现。
3、 新增右键菜单功能。
4、 可根据右键菜单来对记录进行新增、修改、删除。
二：效果图

三：关...

			
		

	





	

		

			

				
					
详解EasyUi控件中的Datagrid

				
			

			

				

					12-29
				

			

		

		

			
				
最近手头有个web项目需要用到第三方控件(EasyUi),用第三方控件做出来的效果毕竟比原生态的要稍微好看那么一点，该项目中有个需求，需要在数据列表中直接编辑数据保存，行话叫做行内编辑。
   在讲行内编辑之前，我们需要先了解如何使用EasyUi创建一个DataGrid，当然方式有很多（1.easyui.js，或者直接html代码加easyui的Style），我采用的是JS的方式：
   一、使用Js创建DataGrid

上面是效果图，
Html代码如下：在页面定义一个table

<!--数据展示 -->
 
   </ta

			
		

	





	

		

			

				
					
datagrid

				
			

			

				

					10-30
				

			

		

		

			
				
我想要的效果截图，点击一下选择去全选下面的所有项

			
		

	





	

		

			

				
					
EasyUI之datagrid从java服务器自动填充数据

				
			

			

				

					qq_18453581的博客
				

				

					03-09
					
					1576
					
				

			

		

		

			
				
关于easyUI  datagrid插件从java后台获取数据前段代码&lt;table id="dg" title="dg1" class="easyui-datagrid" style="width:700px;height:250px"	 url="${pageContext.request.contextPath }/getUsers.do" toolbar="#toolbar&qu

			
		

	





	

		

			

				
					
java_easyui体系之DataGrid（2）

				
			

			

				

					Oscar Chen
				

				

					01-04
					
					2814
					
				

			

		

		

			
				
摘要：
        进一步实现使用datagrid实现数据的查询功能、实现将form序列化成一个对象、使用load方法结合查询条件动态展示datagrid中的数据。

			
		

	





	

		

			

				
					
java datagrid控件_使用JQuery EasyUI 中的DataGrid控件实现数据的提取和显示 | 学步园...

				
			

			

				

					weixin_33586720的博客
				

				

					03-06
					
					303
					
				

			

		

		

			
				
第一步：定义dao接口package yycg.base.dao.mapper;import java.util.List;import yycg.base.vo.SysuserCustom;import yycg.base.vo.SysuserQueryVo;public interface SysuserMapperCustom {/*** findSysuserList名称和mapper.x...

			
		

	





	

		

			

				
					
java datagrid控件_Java中基于AJAX技术的DataGrid控件编程

				
			

			

				

					weixin_35056701的博客
				

				

					02-16
					
					332
					
				

			

		

		

			
				
简介在传统的Web开发中，每次DataGrid控件填充或更新都相应于一次到服务器的数据回馈。但是，借助于AJAX技术，我们可以在不进行表单提交(刷新)的情况下即可以填充DataGrid控件。在本文中，我们通过一个简单示例并借助于一个DropDownList控件的帮助来讨论如何达到这一目的。在这个例子中，我们使用了一个DropDownList控件；一旦改变DropDownList的值，它即用相应的城...

			
		

	





	

		

			

				
					
EASYUI之DataGrid的使用（java）

				
			

			

				

					HONEY18703425251的博客
				

				

					09-14
					
					922
					
				

			

		

		

			
				
EASYUI-DataGrid的使用

			
		

	





	

		

			

				
					
java_easyui体系之DataGrid（4）

				
			

			

				

					Oscar Chen
				

				

					01-07
					
					2530
					
				

			

		

		

			
				
摘要：
                在前面DataGrid（3）的基础上添加后台的实现、本来是想只搭建前台页面的、后台不写、现在觉得还是都实现好点、从真实情况出发、后台用的ssh。新增冻结列功能。实现界面的添加、删除、修改、撤销编辑、撤销选中、清空datagrid记录的功能、在后台也对其实现。 新增右键菜单功能。可根据右键菜单来对记录进行新增、修改、删除。

			
		

	





	

		

			

				
					

				
			

			

				

					
				

			

		

		

			
				

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 5

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值