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

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>

 

  • 0
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值