easyUI 中datagrid控件demo，包括选中一行能读取到数据_easyui-datagrid 的onclickrow属性-优快云博客

本文链接：https://blog.youkuaiyun.com/sdzhangshulong/article/details/50722857

本文介绍了一个基于easyUI的施工方管理系统的实现方法，包括如何使用datagrid组件的onClickRow事件来展示施工方详细信息，并通过form表单加载所选行数据。此外，还涉及了危险源分析的管理和维护，包括新增、删除和保存等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当上方点击时，下方显示所有详细信息，要利用datagrid的onClickRow方法，此方法自带参数rowIndex和rowData，

查看easyUI的帮助文档如下：

还有form表单的load加载方法来加载rowData，rowData为选中行的数据，如下图所示

源代码如下，jsp页面：

<%@ page pageEncoding="UTF-8"%>
<!doctype html>
<html>
<head>
<title>安全会议 | 安全管理 | 国信集团</title>
<%@include file="/common/base.jsp"%>
<script type="text/javascript"
	src="${ctx}/common/js/security_management/builder.js"></script>
</head>
<body class="easyui-layout overflow_x_auto body_parts2">
	<%@ include file="../../header.jsp"%>

	<div data-options="region:'center',border:false,minWidth:1366">
		<div class="easyui-layout" data-options="fit:true">
			<div
				data-options="region:'west',split:false,border:false,width:225,bodyCls:'hasSubMenu'">
				<div id="SideScroll_01" class="easyui-panel sideNav"
					data-options="fit:true,border:false">
					<%@ include file="../safetySide.jsp"%>
				</div>
			</div>
			<div data-options="region:'center',border:false">
				<div class="easyui-layout" data-options="fit:true">
					<div
						data-options="region:'west',split:false,border:false,width:175,bodyCls:'hasTree'">
						<div id="SideScroll_02" class="easyui-panel subSideNav"
							data-options="fit:true,border:false">
							<ul class="subSideMenu">
								<li><a href="${ctx}/safetyorg/main">组织结构图</a></li>
								<li><a href="${ctx}/sfyperson/main">人员信息（通讯录）</a></li>
								<li><a href="${ctx}/sfymeetinginfo/main">安全会议</a></li>
								<li class="current"><a href="${ctx}/construManage/main">施工方管理</a></li>
							</ul>
						</div>
					</div>
					<div data-options="region:'center',border:false">
						<div class="easyui-layout" data-options="fit: true">
							<div id="SideScroll_03"
								data-options="region: 'west',border: false, width:200, bodyCls:'sideTree'">
								<ul id="orgTree" class="easyui-tree"></ul>
							</div>

							<div id="Main"
								data-options="region:'center',border:false,bodyCls:'mainBg_GreyShadow pt60'">
								<div class="toolsWrap pdL10">
									<div class="toolsBox clearfix">
										<a id="AddNew" href="javascript:void(0);"
											class="tools_btn bg_ease colL"><span class="btn_add">新增</span></a>
										<a id="DelRecords" href="javascript:void(0);"
											class="tools_btn bg_ease colL"><span class="btn_del">删除</span></a>
										<a onClick="" href="javascript:void(0);"
											class="tools_btn bg_ease colL"><span class="btn_import">导入</span></a>
										<a onClick="" href="javascript:void(0);"
											class="tools_btn bg_ease colL"><span class="btn_export">导出</span></a>
										<div class="mt10 pdL10 colL">
											<span class="pdR20"><input id="q_txt"
												class="easyui-searchbox"></span>
										</div>
									</div>
								</div>
								
								
								<!-- 此div为通过easyUI加载的列 -->
								<div class="pb25 regionBox">
									<table id="BuilderDg" class="easyui-datagrid"></table>
								</div>
								
								<div class="pb25 regionBox">
								<form id="SfyBuildForm" >
									<!-- 页面最下面的div -->
									<div id="BuilderTab" class="easyui-tabs">
										<div title="基本信息" style="padding: 10px;">
											<table class="table01">
												<tbody>
													<tr>
														<th></th>
														<td><a id="EditBuilderSaveBtn"
															href="javascript:void(0);"
															class="easyui-linkbutton save_btn play_none">保存</a> <a
															id="ViewBuilderEditBtn" href="javascript:void(0);"
															class="easyui-linkbutton edit_btn">编辑</a></td>
													</tr>
													<tr>
														<th>项目名称</th>
														<td><input name="buildProjName" class="entry10 easyui-textbox" type="text"
															data-options="required: true"></td>
													</tr>
													<tr>
														<th>所处施工阶段</th>
														<td><input name="buildConsStage" class="entry10 easyui-textbox" type="text"></td>
													</tr>
													<tr>
														<th>所属分公司</th>
														<td><input id="dwid1" name="branchOffice" class="entry10 easyui-textbox"
															type="text" data-options="required: true"></td>
													</tr>
													<tr>
														<th>总包单位</th>
														<td><input name="totalUnit" class="entry02 easyui-textbox" type="text"><span
															class="pdL10"><a href="javascript:void(0);">下载</a></span></td>
													</tr>
													<tr>
														<th>分包商</th>
														<td><input name="branchUnit" class="entry02 easyui-textbox" type="text"><span
															class="pdL10"><a href="javascript:void(0);">下载</a></span></td>
													</tr>
													<tr>
														<th>监理单位</th>
														<td><input name="supervisorUnit" class="entry02 easyui-textbox" type="text"><span
															class="pdL10"><a href="javascript:void(0);">下载</a></span></td>
													</tr>
													<tr>
														<th>施工方<br> 安全负责人
														</th>
														<td><input name="consStaff" class="entry02 easyui-textbox" type="text">
															<span class="pdL10 pdR5">联系电话</span> <input name="consStaffTel"
															class="entry02 easyui-textbox" type="text"></td>
													</tr>
												</tbody>
											</table>
										</div>
										<div title="危险源分析" style="padding: 10px;">
											<div id="EditToolsHazard" class="clearfix bg_grey_linear">
												<a id="OpenEditAddHazard" href="javascript:void(0);"
													class="tools_btn bg_ease colL"><span class="btn_add">新增</span></a>
												<a id="DelEditHazard" href="javascript:void(0);"
													class="tools_btn bg_ease colL"><span class="btn_del">删除</span></a>
											</div>
											<table id="LedgerDg01" class="easyui-datagrid">
												<thead>
													<tr>
														<th data-options="field:'productid'" width="220">时间</th>
														<th data-options="field:'devPlanTypeName'" width="100">类型</th>
														<th data-options="field:'devPlanname'" width="150">内容</th>
														<th data-options="field:'devPtexeName'" width="220">巡检人</th>
													</tr>
												</thead>
											</table>
										</div>
									</div>
									</form>
								</div>
								<!-- *******************************************************************************页面代码分割线*******************************************************************************************-->
								<div id="ViewDialog" class="easyui-dialog dialog_twoCol">
									<form id="addSfyBuildForm" method="post" action="addConstruManageInfo">
										<div id="DialogTab" class="easyui-tabs">
											<div title="基本信息" style="padding: 5px;">
												<table class="table02">
													<tbody>
														<tr>
															<th>项目名称</th>
															<td colspan="3"><input name="buildProjName"
																class="entry10 easyui-textbox" type="text"
																data-options="required: true"></td>
														</tr>
														<tr>
															<th>所处施工阶段</th>
															<td colspan="3"><input name="buildConsStage"
																class="entry10 easyui-textbox" type="text"></td>
														</tr>
														<tr>
															<th>所属分公司</th>
															<td colspan="3"><input id="dwid" name="branchOffice"
																class="entry10 easyui-textbox" type="text"
																data-options="required: true"></td>
														</tr>
														<tr>
															<th>总包单位</th>
															<td colspan="3"><input name="totalUnit"
																class="entry02 easyui-textbox" type="text"><span
																class="pdL10"><input type="text"
																	class="entry02 easyui-filebox"></span></td>
														</tr>
														<tr>
															<th>分包商</th>
															<td colspan="3"><input name="branchUnit"
																class="entry02 easyui-textbox" type="text"><span
																class="pdL10"><input type="text"
																	class="entry02 easyui-filebox"></span></td>
														</tr>
														<tr class="cloneRow play_none">
															<th>分包商</th>
															<td colspan="3"><input
																class="entry02 easyui-textbox" type="text"><span
																class="pdL10"><input type="text"
																	class="entry02 easyui-filebox"></span> <a
																class="delRow" href="javascript:void(0);">删除</a></td>
														</tr>
														<tr>
															<th></th>
															<td colspan="3"><a id="AddSubcontractor"
																href="javascript:void(0);"
																class="easyui-linkbutton com_btn">添加分包商</a></td>
														</tr>
														<tr>
															<th>监理单位</th>
															<td colspan="3"><input name="supervisorUnit"
																class="entry02 easyui-textbox" type="text"><span
																class="pdL10"><input type="text"
																	class="entry02 easyui-filebox"></span></td>
														</tr>
														<tr>
															<th>施工方<br> 安全负责人
															</th>
															<td><input name="consStaff"
																class="entry02 easyui-textbox" type="text"></td>
															<th>联系电话</th>
															<td><input name="consStaffTel"
																class="entry16 easyui-textbox" type="text"></td>
														</tr>
													</tbody>
												</table>
											</div>
											<div title="危险源分析" style="padding: 15px 10px;">
												<div id="ToolsHazard" class="clearfix bg_grey_linear">
													<a id="OpenAddHazard" href="javascript:void(0);"
														class="tools_btn bg_ease colL"><span class="btn_add">新增</span></a>
													<a id="DelHazard" href="javascript:void(0);"
														class="tools_btn bg_ease colL"><span class="btn_del">删除</span></a>
												</div>
												<table id="HazardDG" class="easyui-datagrid"></table>
											</div>
										</div>
										<div class="common_btn dialog-button">
											<a id="SaveBuilder" href="javascript:void(0);"
												class="easyui-linkbutton save_btn">保存</a>

											<!-- <a id="EditBuilder" href="javascript:void(0);" class="easyui-linkbutton edit_btn play_none">编辑</a> -->
											<a onClick="$('#ViewDialog').dialog('close');"
												href="javascript:void(0);"
												class="easyui-linkbutton close_btn">关闭</a>
										</div>
									</form>
								</div>
								<div id="AddHazardDialog" class="easyui-dialog dialog_oneCol">
									<div class="boxStyle02">
										<form id="AddHazardForm">
											<table class="table01">
												<tbody>
													<tr>
														<th>时间段</th>
														<td><input class="entry01 easyui-textbox" type="text"></td>
													</tr>
													<tr>
														<th>标题</th>
														<td><input class="entry01 easyui-textbox" type="text"
															data-options="height: 60, multiline: true"></td>
													</tr>
													<tr>
														<th>措施</th>
														<td><input class="entry01 easyui-textbox" type="text"
															data-options="height: 60, multiline: true"></td>
													</tr>
												</tbody>
											</table>
										</form>
									</div>
									<div class="common_btn dialog-button">
										<a id="SaveAddHazard" href="javascript:void(0);"
											class="easyui-linkbutton save_btn">保存</a> <a
											onClick="$('#AddHazardDialog').dialog('close');"
											href="javascript:void(0);"
											class="easyui-linkbutton close_btn">取消</a>
									</div>
								</div>

								<div id="EditAddHazardDialog"
									class="easyui-dialog dialog_oneCol">
									<div class="boxStyle02">
										<form id="AddEditHazardForm">
											<table class="table01">
												<tbody>
													<tr>
														<th>时间段</th>
														<td><input class="entry01 easyui-textbox" type="text"></td>
													</tr>
													<tr>
														<th>标题</th>
														<td><input class="entry01 easyui-textbox" type="text"
															data-options="height: 60, multiline: true"></td>
													</tr>
													<tr>
														<th>措施</th>
														<td><input class="entry01 easyui-textbox" type="text"
															data-options="height: 60, multiline: true"></td>
													</tr>
												</tbody>
											</table>
										</form>
									</div>
									<div class="common_btn dialog-button">
										<a id="SaveEditAddHazard" href="javascript:void(0);"
											class="easyui-linkbutton save_btn">保存</a> <a
											onClick="$('#EditAddHazardDialog').dialog('close');"
											href="javascript:void(0);"
											class="easyui-linkbutton close_btn">取消</a>
									</div>
								</div>

							</div>
							<!--Content end-->
						</div>
					</div>

				</div>
			</div>
		</div>
	</div>
</body>
</html>

js页面：

/* -------------------------------------------------------------------
	* 通用函数
	* init
 ------------------------------------------------------------------- */ 

$(function(){


	
	
	
	jq.tree({
		el : '#orgTree',
		url : '/safetyorg/tree',
		onClick : function(node) {
			loadNode(node.id);
		},
		onLoadSuccess : function() {
			var node = $('#orgTree').tree('getRoot');
			$('#orgTree').tree('select', node.target);
			loadNode(node.id);
		}
	});
	
	$("#ViewDialog").dialog({
		closed: true,
		modal: true,
		shadow: false
	});
	            
	$("#AddHazardDialog").dialog({
		closed: true,
		modal: true,
		shadow: false,
		title: '添加危险源分析'
	});
	
	$("#EditAddHazardDialog").dialog({
		closed: true,
		modal: true,
		shadow: false,
		title: '添加危险源分析'
	});
	
	jq.searchbox({
		el : '#q_txt',
		fn : query
	});
	
	$('#dwid').combotree({
		url: base + "/safetyorg/tree",
		method:"GET"
	});
	$('#dwid1').combotree({
		url: base + "/safetyorg/tree",
		method:"GET"
	})
	
	
	
	var pp = {
		el : "#BuilderDg",
		onClickRow: viewBuilder,
		onLoadSuccess: function(data){
			//console.log(data.rows.length);
			if(data.rows.length > 0){
				$(this).datagrid('selectRow',0);
			}
		},
		columns : [ [
				{
					field : 'checkboxSel',
					checkbox : true
				},
				{
					field : 'buildProjName',
					width : 220,
					align : 'center',
					title : '项目名称'
				},
				{
					field : 'buildConsStage',
					width : 100,
					align : 'center',
					title : '所处施工阶段'
				},
				{
					field : 'totalUnit',
					width : 150,
					align : 'center',
					title : '总包单位'
				},
				{
					field : 'branchUnit',
					width : 220,
					align : 'center',
					title : '分包单位'
				}, {
					field : 'supervisorUnit',
					width : 100,
					align : 'center',
					title : '监理单位'
				}, {
					field : 'consStaff',
					width : 150,
					align : 'center',
					title : '施工方安全负责人'
				} ] ]

	};
	jq.dataGrid(pp);
	
	$("#HazardDG").datagrid({
		height: 250,
		fitColumns: true,
		method: 'get',
		//url: '../devequipment/list',
		pagination : true,
		onLoadSuccess:function(data){
			if(data!= null && data.length > 0 ){
			 	$("#BuilderDg").datagrid("selectRow",0);
			}
		},
		columns: [[
			{field:'ck',checkbox:true},
			{field:'devNo',title:'时间段',width:220},
			{field:'devName',title:'标题',width:100},
			{field:'devTypeName',title:'措施',width:150}
		]],
		toolbar: '#ToolsHazard'
	});
	
	
	$("#DialogTab").tabs({
		height: 300
	});
	
	$("#BuilderTab").tabs({
		//height: 350,
		fit: true,
		narrow: true,
		plain: true,
		headerCls: 'nobd',
		tabHeight: 40,
		onSelect:function(title,index){
		reloadTabs(index+1);
		}
	});
	
	$("#LedgerDg01").datagrid({
		//height: 235,
		fit: true,
		fitColumns: true,
		method: 'get',
		pagination : true,
		url: '../devplanrecord/list',
		queryParams: {
				devId:null
			},
		onBeforeLoad:function(param){
				if(param.devId == null){
					return false;
			}
		},
		toolbar: '#EditToolsHazard'
	});
	
	//新增一个施工方
	$("#AddNew").bind("click", function(){
		addBuilder();
	});
	
	//删除一个施工方
	$("#DelRecords").bind("click", function(){
	//	var rowData = $("#BuilderDg").datagrid("getChecked");
	//	console.info(rowData);
	//	var rowData1 = $("#BuilderDg").datagrid("getSelected");
	//	console.info("选中"+rowData1);
		delBuilder();
	});
	//
	$("#SaveBuilder").bind("click", function(){
		saveBuilder();
	});
	
	//新增施工方时，新增，删除，保存危险源分析
	$("#OpenAddHazard").bind("click", function(){
		$("#AddHazardDialog").dialog('open');
		$("#AddHazardForm").form('clear');
	});
	$("#DelHazard").bind("click", function(){
		delHazard($("#HazardDG"));
	});
	$("#SaveAddHazard").bind("click", function(){
		saveHazard( $("#AddHazardForm"), $("#AddHazardDialog"), $("#HazardDG") );
	});
	
	//查看施工方信息，点击编辑按钮操作
	$("#ViewBuilderEditBtn").bind("click", function(){
		editBuilder();
	});
	
	//查看进入编辑状态之后，新增，删除，保存危险源分析
	$("#OpenEditAddHazard").bind("click", function(){
		$("#EditAddHazardDialog").dialog('open');
		$("#AddEditHazardForm").form('clear');
	});
	$("#DelEditHazard").bind("click", function(){
		delHazard($("#LedgerDg01"));
	});
	$("#SaveEditAddHazard").bind("click", function(){
		saveHazard( $("#AddEditHazardForm"), $("#EditAddHazardDialog"), $("#LedgerDg01") );
	});
	
	//新增施工方时，添加分包商
	$("#AddSubcontractor").bind("click", function(){
		var _node = $("tr.cloneRow").clone(true).removeClass("play_none").removeClass("cloneRow").addClass("addRow");		
		$(this).parent("td").parent("tr").before(_node);	
		$(".delRow").bind("click", function(){
			$(this).parent("td").parent("tr.addRow").remove();
		});
	});
	
	$("#BuilderTab .easyui-textbox").textbox('disable');
	$("#BuilderTab .easyui-combobox").combobox('disable');
	
});


//新增施工方
function addBuilder(){
	$("#ViewDialog").dialog("open").dialog('setTitle','新增');
	$("#addSfyBuildForm").form('clear');

	$("#ViewDialog .easyui-textbox").textbox('enable');
	$("#ViewDialog .easyui-combobox").combobox('enable');
	/*$("#ViewDialog").siblings(".dialog-button").find(".save_btn").removeClass("play_none");
	$("#ViewDialog").siblings(".dialog-button").find(".edit_btn").addClass("play_none");*/
}

//编辑一个施工方
function editBuilder(){	
	$("#EditBuilderSaveBtn").removeClass("play_none");
	$("#ViewBuilderEditBtn").addClass("play_none");
	
	$("#BuilderTab .easyui-textbox").textbox('enable');
	$("#BuilderTab .easyui-combobox").combobox('enable');
	
}


//保存一个施工方
function saveBuilder(){
	/*var devId = $("#devId").val();
	var saveOrgUrl = "../devequipment/save";
	if(devId !=""){
		saveOrgUrl = "../devequipment/edit";		
	}*/
	$('#addSfyBuildForm').form('submit', {
		//url : saveOrgUrl,
		onSubmit : function() {
			var isValid = $(this).form('validate');
			if (!isValid) {
			}
			return isValid; // return false will stop the form submission
		},
		success : function(datas) {// 返回的是组织id
			var data = eval("("+datas+")");
			if (data.success) {
				$('#ViewDialog').dialog('close');
				$.messager.show({
					title : '保存成功',
					msg : '保存设备成功.',
					timeout : 3000,
					showType : 'slide'
				});
				$("#BuilderDg").datagrid('reload');
			} else {
				var msg = "保存设备失败.";
				msg = data.message;
				$.messager.show({
					title : '保存失败',
					msg : msg,
					timeout : 3000,
					showType : 'slide'
				});
			}
		}
	});
}
//删除施工方
function delBuilder(){
	var rec = $("#BuilderDg").datagrid('getChecked'); //获取选定的行【这是一个数组】
	if(rec.length > 0){
		/*$.each(rec, function(i){
			var row = $("#BuilderDg").datagrid('getRowIndex',rec[i]); //获取行索引
			$("#BuilderDg").datagrid('deleteRow',row); //这是前台删除，需要提交到后台
		});*/
		$.messager.confirm('信息', '确定要删除吗？', function(confirmFlg) {//fn(b): 当用户点击“确定”按钮的时侯将传递一个true值给回调函数，否则传递一个false值。 
	        if (confirmFlg) {
						var GroupIds = new Array();
						for (var i = 0; i < rec.length; i++) {
							var row = rec[i];
							GroupIds.push(row.buildId);
						}
						$.ajax({
									type : "get",
									dataType : 'JSON',
									url : "../construManage/delete/"+ GroupIds.join(','),
									success : function(result) {
										if (result.success) {
											$("#BuilderDg").datagrid("reload");
											$.messager.alert('提示', '删除成功！','info');
										}else{
											$.messager.alert('提示', '删除失败！','info');
										}
									}
								});
					}
	    });
	} else {
		$.messager.alert('提示','请选择你要删除的记录！','warning');
	};		
}
//保存一个危险源分析
function saveHazard(ele_01, ele_02, ele_03){ //ele_01 form, ele_02 diaolog, ele_03 datagrid
	/*$('#AddHazardForm')*/ele_01.form('submit', {
		url : '',
		onSubmit : function() {
			var isValid = $(this).form('validate');
			if (!isValid) {
			}
			return isValid; // return false will stop the form submission
		},
		success : function(datas) {// 返回的是组织id
			var data = eval("("+datas+")");
			if (data.success) {
				/*$('#AddHazardDialog')*/ele_02.dialog('close');
				$.messager.show({
					title : '保存成功',
					msg : '保存设备成功.',
					timeout : 3000,
					showType : 'slide'
				});
				/*$("#HazardDG")*/ele_03.datagrid('reload');
			} else {
				var msg = "保存设备失败.";
				msg = data.message;
				$.messager.show({
					title : '保存失败',
					msg : msg,
					timeout : 3000,
					showType : 'slide'
				});
			}
		}
	});
}
//删除危险源分析
function delHazard(ele_01){
	var rec = /*$("#HazardDG")*/ele_01.datagrid('getSelections'); //获取选定的行【这是一个数组】
	if(rec.length > 0){
		/*$.each(rec, function(i){
			var row = $("#BuilderDg").datagrid('getRowIndex',rec[i]); //获取行索引
			$("#BuilderDg").datagrid('deleteRow',row); //这是前台删除，需要提交到后台
		});*/
		$.messager.confirm('信息', '确定要删除吗？', function(confirmFlg) {
	        if (confirmFlg) {
						var GroupIds = new Array();
						for (var i = 0; i < rec.length; i++) {
							var row = rec[i];
							GroupIds.push(row.devId)
						}
						$.ajax({
									type : "get",
									dataType : 'JSON',
									url : '',
									success : function(result) {
										if (result.success) {
											/*$("#HazardDG")*/ele_01.datagrid("reload");
											$.messager.alert('提示', '删除成功！','info');
										}else{
											$.messager.alert('提示', '删除失败！','info');
										}
									}
								});
					}
	    });
	} else {
		$.messager.alert('提示','请选择你要删除的记录！','warning');
	};		
}

// 加载
function loadNode(_orgId) {
	$('#q_txt').searchbox('setValue', '');
	jq.queryGrid({
		el : "#BuilderDg",
		url : '/construManage/list',
		queryParams : {
			orgId : _orgId
		}
	});
	$('#orgTreeDg').combotree('setValue', _orgId);
}

//查询
function query(value, name) {
	var node = $('#orgTree').tree('getSelected');
	if (node == null) {
		jq.warning('未选择组织树节点');
		return false;
	}
	$('#orgTreeDg').combotree('setValue', node.id);
	jq.queryGrid({
		el : "#BuilderDg",
		method : 'post',
		url : '/construManage/list',
		queryParams : {
			title : value,
			orgId : node.id
		}
	});
	
}






//查看施工方
function viewBuilder(rowIndex, rowData){
	
/*	$("#BuilderTab").tabs('select', 0);
	$("#SfyBuildForm").form('clear');
	$("#BuilderTab .easyui-textbox").textbox('disable');
	$("#BuilderTab .easyui-combobox").combobox('disable');
*/	
	

	$("#SfyBuildForm").form("clear");
	$("#SfyBuildForm").form("load",rowData);
	

	
	
	
}