easyUI 在datagrid中进行单元格编辑，并在单元格加入自定义combobox下拉框

最新推荐文章于 2023-11-11 16:57:18 发布

CCUT

最新推荐文章于 2023-11-11 16:57:18 发布

阅读量3.2k

点赞数 2

分类专栏： easyUI 文章标签： javascript html jquery

本文链接：https://blog.csdn.net/qq_29622845/article/details/109616147

版权

easyUI 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

最近项目中需要使用easyUI的datagrid表格来展示数据，并允许用户对部分列单元格进行编辑、保存。单元格格式为文本（text）或者下拉框（combobox）。

（1）datagrid的创建使用可以参考easyUI官网。https://www.jeasyui.net/plugins/183.html

（2）datagrid默认是不允许编辑里面的单元格的，需要一些配置才可以进行编辑操作。官网也有例子。https://www.jeasyui.net/demo/332.html

注意：只要你写的代码和官网一致，是可以实现编辑操作的。但是我自己试的时候，是部分copy的，有些部分冲突了，找了半天才找到原因。我在html部分定义了表格的列信息

	<table id="dg" class="easyui-datagrid" style="width:1010px;height:auto" 
		data-options="
			iconCls: 'icon-edit',
			singleSelect: true,
			toolbar: '#tb',
			method: 'get',
			onClickCell: onClickCell">
			<thead>
			<tr>
				<th data-options="field:'id',width:150,hidden:true">用户需求内部编号</th>
				<th data-options="field:'userReqBocNo',width:150">用户需求内部编号</th>
				<th data-options="field:'sysReqBocNo',width:150">系统需求需求内部编号</th>
				<th data-options="field:'sysReqName',width:150">系统需求名称</th>
				<th data-options="field:'milestone',width:150,editor:'text'">当前里程碑点</th>
				<th data-options="field:'startTime',width:100,editor:'datebox'">开始时间</th>
				<th data-options="field:'endTime',width:100,editor:'datebox'">结束时间</th>
				<th data-options="field:'status',width:100,editor:'text'">状态</th>
				<th data-options="field:'percent',width:100,editor:{type:'combobox',options:
				{url:'loadComboxData.action?projectId=<%=projectId %>&comboxKey=enum&enumId=percent',valueField: 'value', textField: 'text'}}">完成百分比</th>
			</tr>
		</thead>
	</table>

在js也定义了表格的列信息，但是在js中定义的列数和html中定义的列数不一致（html多出来一个了，没注意到）。导致单元格编辑无效。所以写代码要仔细，慢，切忌赶工。

（3）现在单元格已经可以进行编辑了，看上面的html代码，<th> 中有个属性 editor，这个就是你的单元格进行编辑的时候编辑类型。

editor:'text' 文本类型、editor:'datebox' 日期类型、还有最后一个 editor:{type:'combobox', ……} 下拉框类型。

主要是combobox

url ：下拉框数据的地址

valueField : 下拉框内容中每个选项的value

textField: 下拉框内容中每个选项的text（就是你可以看到的选项）

数据演示：

loadComboxData.action?projectId=<%=projectId %>&comboxKey=enum&enumId=percent

下面这个地址获取到的内容如下

最终实现的效果如下

下面是完整前端代码

<%@ page import="org.apache.jasper.tagplugins.jstl.core.ForEach"%>
<%@ page contentType='text/html; charset=UTF-8'%>
<%@ page import="java.util.*" %>
<%@ page import="com.google.gson.Gson" %>
<%@ page import="com.google.gson.GsonBuilder" %>
<%@ page import="com.google.gson.reflect.TypeToken" %>
<%@ page import="com.teamlive.intf.IRunnable" %>
<%@ page import="com.polarion.alm.tracker.model.IWorkItem" %>
<%@ page import="com.polarion.alm.tracker.model.IWorkRecord" %>
<%@ page import="com.polarion.platform.persistence.IEnumOption" %>
<%@ page import="com.polarion.alm.projects.model.IUser" %>
<%@ page import="com.polarion.core.util.types.DateOnly" %>
<%@ page import="com.polarion.core.util.types.duration.DurationTime" %>
<%@ page import="com.polarion.alm.tracker.ITrackerService"%>
<%@ page import="com.teamlive.utils.GuiceService" %>
<%@ page import="com.teamlive.utils.ServiceUtil" %>
<%@ page import="com.teamlive.boc.utils.WorkItemUtil" %>
<%@ page import="org.apache.log4j.Logger" %>
<%
final String projectId = request.getParameter("projectId");
final String itemId = request.getParameter("itemId");
ITrackerService trackerService = GuiceService.create(ITrackerService.class);
final IWorkItem item = trackerService.getWorkItem(projectId, itemId);
final String type = item.getType().getId();
final String submitter = WorkItemUtil.getFiledKey(item, "submitter");
final String approver = WorkItemUtil.getFiledKey(item, "approver");
final String reportTime =  WorkItemUtil.getDateField2String(item, "reportTime");
final String status = item.getStatus().getId();
final IUser user = trackerService.getProjectsService().getCurrentUser();
final String userId = user.getId();

%>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/easyui/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/jquery.min.js"></script>
<script type="text/javascript" src="js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/easyui/easyui.custom.js?a=1"></script>
<script type="text/javascript" src="js/easyui/easyui-lang-zh_CN.js"></script>
<!-- <script type="text/javascript" src="js/custom/custom.js"></script> -->
<style type="text/css">

</style>
<script type="text/javascript">
	var projectId = '<%=projectId %>';
	var userId = '<%=userId%>';
	var type = '<%=type%>';
	var submitter = '<%=submitter%>';
	var itemId = '<%=itemId%>';
	var status = '<%=status%>';
	$(function(){
		$.ajax({
			type:"get",
			url:"getProjectInfoFromProject.action",
			data:{"itemId":itemId,"projectId":projectId},
			success:function(data){
				var dataArray = JSON.parse(data);
				$('#dg').datagrid('loadData', dataArray);
			}
		});	
	});
	
	$.extend($.fn.datagrid.methods, {
		editCell: function(jq,param){
			return jq.each(function(){
				var opts = $(this).datagrid('options');
				var fields = $(this).datagrid('getColumnFields',true).concat($(this).datagrid('getColumnFields'));
				for(var i=0; i<fields.length; i++){
					var col = $(this).datagrid('getColumnOption', fields[i]);
					col.editor1 = col.editor;
					if (fields[i] != param.field){
						col.editor = null;
					}
				}
				$(this).datagrid('beginEdit', param.index);
				for(var i=0; i<fields.length; i++){
					var col = $(this).datagrid('getColumnOption', fields[i]);
					col.editor = col.editor1;
				}
			});
		}
	});
	
	var editIndex = undefined;
	function endEditing(){
		if (editIndex == undefined){return true}
		if ($('#dg').datagrid('validateRow', editIndex)){
			$('#dg').datagrid('endEdit', editIndex);
			editIndex = undefined;
			return true;
		} else {
			return false;
		}
	}
	function onClickCell(index, field){
		if (endEditing()){
			$('#dg').datagrid('selectRow', index).datagrid('editCell', {index:index,field:field});
			editIndex = index;
		}
	}
	
	function saveProjectInfo(){
		endEditing();
		var rows = $('#dg').datagrid('getRows')
		//获取当前页的数据行 
		var percent1 = rows[0]['percent']; 
		var percent2 = rows[1]['percent']; 
		var percent3 = rows[2]['percent']; 
		var percent4 = rows[3]['percent']; 
		var percent5 = rows[4]['percent']; 
		
		$.ajax({
			type:"get",
			url:"updateOverAllPerformance.action",
			data:{"itemId":itemId,"projectId":projectId,"percent1":percent1,"percent2":percent2,"percent3":percent3,
				"percent4":percent4,"percent5":percent5},
			success:function(data){
			}
		});	
		
	}
	
</script>
</head>
<body style="height:200px">
	<table id="dg" class="easyui-datagrid" style="width:910px;height:auto" 
		data-options="
			iconCls: 'icon-edit',
			singleSelect: true,
			toolbar: '#tb',
			method: 'get',
			onClickCell: onClickCell">
			<thead>
			<tr>
				<th data-options="field:'id',width:50">序号</th>
				<th data-options="field:'milePost',width:100">里程碑点</th>
				<th data-options="field:'startTime',width:150">开始时间</th>
				<th data-options="field:'endTime',width:150">结束时间</th>
				<th data-options="field:'sign',width:350">标志</th>
				<th data-options="field:'percent',width:100,editor:{type:'combobox',options:
				{url:'loadComboxData.action?projectId=<%=projectId %>&comboxKey=enum&enumId=percent',valueField: 'value', textField: 'text'}}">完成百分比</th>
			</tr>
		</thead>
	</table>
	<div id="tb" style="height:auto">
		<a href="javascript:void(0)"  class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true" onclick="saveProjectInfo()">保存并提交</a>
	</div>
	
</body>
</html>

CCUT

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
easyUI 在datagrid中进行单元格编辑，并在单元格加入自定义combobox下拉框

最近项目中需要使用easyUI的datagrid表格来展示数据，并允许用户对部分列单元格进行编辑、保存。单元格格式为文本（text）或者下拉框（combobox）。（1）datagrid的创建使用可以参考easyUI官网。https://www.jeasyui.net/plugins/183.html（2）datagrid默认是不允许编辑里面的单元格的，需要一些配置才可以进行编辑操作。官网也有例子。https://www.jeasyui.net/demo/332.html注意：只要你写的代码和官
复制链接

扫一扫