easyui combobox 在datagrid中动态加载数据

最新推荐文章于 2023-06-19 09:32:43 发布

缘如风

最新推荐文章于 2023-06-19 09:32:43 发布

阅读量1.2k

点赞数

分类专栏： EasyUI框架文章标签： combobox datagrid

本文链接：https://blog.csdn.net/chyuanrufeng/article/details/108386845

版权

EasyUI框架专栏收录该内容

12 篇文章 0 订阅

订阅专栏

easyui表格中实现combobox下拉框的数据动态添加

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表格-下拉框动态添加</title>
		<link rel="stylesheet" type="text/css" href="./jquery-easyui//themes/default/easyui.css">
		<link rel="stylesheet" type="text/css" href="./jquery-easyui//themes/icon.css">

		<script type="text/javascript" src="./jquery-easyui//jquery.min.js"></script>
		<script type="text/javascript" src="./jquery-easyui//jquery.easyui.min.js"></script>
		<script src=""></script>
	</head>
	<body>
		<h2>表格中实现下拉框数据动态添加</h2>
		<div style="margin:20px 0;"></div>
		<table id="tabledg" class="easyui-datagrid" title="Format DataGrid Columns" style="width:700px;height:250px"
		 data-options="
		 				onClickCell: onClickCell,
		 			">
			<thead>
				<tr>
					<th data-options="field:'name',width:80">Item ID</th>
					<th data-options="field:'index',width:100,formatter:combobox_formatter,
				                                    editor:{
				                                        type:'combobox',
				                                        options:{
				                                            panelHeight:'auto',
				                                            valueField:'value',
				                                            textField:'name',
				                                        }}">下拉框</th>

				</tr>
			</thead>
		</table>
		<script>
			//在点击的时候获取对应的下拉框的数据，设置上去即可

			let comboxdata = []
			function getComboxData(index) {
				let rd = [];
				for (let i = 0; i < index; ++i) {
					let d = {
						value: i,
						name: `测试${i}`
					}
					rd.push(d);
				}
				return rd;
			}

			function getData() {
				var rows = [];
				for (var i = 1; i <= 10; i++) {
					var amount = Math.floor(Math.random() * 1000);
					var price = Math.floor(Math.random() * 1000);

					let comboxd = getComboxData(i);
					rows.push({
						name: 'Name ' + i,
						index: parseInt(comboxd.length / 2), //设置默认显示的
						comboxdatas: comboxd
					});
				}

				let d = {};
				d["rows"] = rows;
				d["total"] = rows.length;
				return d;
			}

			$(function() {
				let data = getData();
				$("#tabledg").datagrid("loadData", data);
			})


			
			//设置表格可以编辑
			$.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 ($('#tabledg').datagrid('validateRow', editIndex)) {
					$('#tabledg').datagrid('endEdit', editIndex);
					editIndex = undefined;
					return true;
				} else {
					return false;
				}
			}

			function onClickCell(index, field) {
				if (endEditing()) {
					$('#tabledg').datagrid('selectRow', index)
						.datagrid('editCell', {
							index: index,
							field: field
						});
					editIndex = index;
					
					//重点-------------------------------------------------------------------
					var ed = $('#tabledg').datagrid('getEditor', {index:index,field:field});	
					let dlist = $('#tabledg').datagrid("getRows")[index].comboxdatas;
					$(ed.target).combobox('loadData', dlist);
					//重点-------------------------------------------------------------------
				}
			}

			function combobox_formatter(value, row) {	
				return row.comboxdatas[value].name
			}
			
		</script>
	</body>
</html>