EasyUI DataGrid表头可编辑（非单元格）

最新推荐文章于 2023-04-19 08:50:39 发布

缘如风

最新推荐文章于 2023-04-19 08:50:39 发布

阅读量494

点赞数

分类专栏： EasyUI框架文章标签： DataGrid 表头可编辑

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

版权

EasyUI框架专栏收录该内容

12 篇文章 0 订阅

订阅专栏

EasyUI DataGrid 数据表格的表头可输入文字

实现EasyUI DataGrid 数据表格的表头可输入文字，方便搜索。（本文是实现了编辑功能未实现搜索匹配）（非单元格）

思路：表头单元格绑定双击事件，选中的单元格动态添加一个input标签，回车或者失去焦点的时候删除input这个标签

效果

代码如下

<!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>
		<style>

		</style>
	</head>
	<body>

		<table id="tabledg" class="easyui-datagrid" title="Format DataGrid Columns" style="width:700px;height:250px"
		 data-options="">
					
			<thead>
				<tr>
					<th id="itemid" data-options="field:'name',width:80">Item ID</th>
					<th id="itemid2" data-options="field:'listprice',width:80,align:'right'">List Price</th>
					<th id="itemid3" data-options="field:'status',width:100,
				                                    editor:{
				                                        type:'combobox',
				                                        options:{
				                                            panelHeight:'auto',
				                                            valueField:'value',
				                                            textField:'status',
				                                            data:[{'status':'投','value':0},{'status':'退','value':1}]	
				                                        }}">压板状态</th>

				</tr>
			</thead>
		</table>
		<script>
			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);
					rows.push({
						inv: 'Inv No ' + i,
						date: $.fn.datebox.defaults.formatter(new Date()),
						name: 'Name ' + i,
						status: (i % 2)?"投":"退",
						listprice: amount
					});
				}

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

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


			
			//
			function focusout(obj)
			{
				$(obj.parentElement).children("div").show();
				obj.remove()
			
			}
			function keydown(event,obj)
			{
				console.log($(obj).attr("index"),$(obj).attr("field"));
				if (event.keyCode == 13) //enter 的时候删除
				{
					$(obj.parentElement).children("div").show();
					obj.remove()
				}
				//去做其他逻辑
				//、、、、、、、、、
			}
			
			//获取表头然后绑定事件
			//可以利用ID获取也可以利用class来获取
			$(function(){
				
				let children = $(".datagrid-header-row").find("td");  //页面多个table的时候有问题
				console.dir(children);
				children.each(function(index,element){
					
					console.log($(element).attr("field"));
					
					//方式1
					$(element).dblclick(function(){
						//this.index = index; //保存域index
						let field = $(element).attr("field"); //保存域名
						let w = $(this);
						//console.log(w["context"].clientWidth,w["context"].clientHeight);  //获取宽高
						//let width = w["context"].clientWidth - 10
                        let width = w[0].offsetWidth - 10
						let itemsstr = `<input type='text' index='${index}' field='${field}' style='height:auto;width:${width}px' onblur='focusout(this)' onkeydown='keydown(event,this)'/>`;
						$(this).prepend(itemsstr)
						$(this).children("div").hide();  //隐藏文字显示
						$(this).children("input").focus();//获取焦点
						console.log($(element));
						console.log(width);
					})
					
					
					//方式2
					// $(element).dblclick(function(){
					// 	let w = $(this);
					// 	let item = document.createElement("input")
					// 	let width = w["context"].offsetWidth-10;
					// 	item.style.width = width+"px"
					// 	$(this).prepend(item)
					// 	$(this).children("div").hide();  //隐藏文字显示
					// 	item.focus(); //获取焦点
					// 	item.index = index; //保存域index
					// 	item.field = $(element).attr("field") //保存域名
						
					// 	//事件绑定
					// 	item.onkeydown = function(event)
					// 	{
					// 		console.log(this.index);
					// 		if (event.keyCode == 13) //enter 的时候删除
					// 		{
					// 			$(this.parentElement).children("div").show();
					// 			this.remove()
					// 		}
					// 		//去做其他逻辑
					// 		//、、、、、、、、、
					// 	}
					// 	item.onblur = function()  //失败了 onfocusout 所以用onblur
					// 	{
							
					// 		$(this.parentElement).children("div").show();
					// 		this.remove()
					// 	}
					// })
					//==================================================================
					
				
				})
				
			})
			
			
			$(function(){
				
				//利用ID的方式获取设置
				//原理同上
				
				//实现方式1
				// $("#itemid").dblclick(function(){
					
				// 	let w = $(this);
				// 	console.log(w["context"].clientWidth,w["context"].clientHeight);  //获取宽高
				// 	console.log(w["context"].offsetWidth,w["context"].offsetHeight); //获取
				// 	console.log(w["context"].offsetLeft);
					
				// 	let width = w["context"].clientWidth - 10
				// 	let index = 1;
				// 	let field = "itemid"
				// 	let itemsstr = `<input type='text' index='${index}' field='${field}' style='height:auto;width:${width}px' onblur='focusout(this)' onkeydown='keydown(event,this)'/>`;
					
				// 	$(this).prepend(itemsstr)
				// 	$(this).children("div").hide();  //隐藏文字显示
				// 	$(this).children("input").focus();//获取焦点
				// })
				
				// //方式2
				// $("#itemid3").dblclick(function(){
					
				// 	let w = $(this);
				// 	console.log(w["context"].clientWidth,w["context"].clientHeight);
				// 	console.log(w["context"].offsetWidth,w["context"].offsetHeight);
				// 	console.log(w["context"].offsetLeft);
					
				// 	let width = w["context"].offsetWidth-10;
				// 	let item = document.createElement("input")
				// 	item.style.width = width+"px"
				// 	$(this).prepend(item)
				// 	$(this).children("div").hide();  //隐藏文字显示
				// 	item.focus(); //获取焦点
				// 	//事件绑定
				// 	item.onkeydown = function(event)
				// 	{
				// 		if (event.keyCode == 13) //enter 的时候删除
				// 		{
				// 			$(this.parentElement).children("div").show();
				// 			this.remove()
				// 		}
				// 		//去做其他逻辑
				// 		//、、、、、、、、、
				// 	}
				// 	item.onblur = function()  //失败了 onfocusout 所以用onblur
				// 	{
				// 		$(this.parentElement).children("div").show();
				// 		this.remove()
				// 	}
					
				// })
				
			})
		

			
		</script>
	</body>
</html>