关于控制DataGrid 的显示与隐藏，以及单及某个单元格事件生成另一个表单

最新推荐文章于 2020-06-12 13:58:40 发布

BUG创建者

最新推荐文章于 2020-06-12 13:58:40 发布

阅读量887

点赞数

分类专栏： easyUI

本文链接：https://blog.csdn.net/wzwzwz555/article/details/88544416

版权

easyUI 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

DataGrid中hide无效，display无效等问题

看见原生的js getElementById 突然就就明白了

看代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Cell Editing in DataGrid - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../themes/icon.css">
	<script type="text/javascript" src="../jquery.min.js"></script>
	<script type="text/javascript" src="../jquery.easyui.min.js"></script>
	<script type="text/javascript" src="datagrid-cellediting.js"></script>
	<script type="text/javascript">
		var data = {"total":28,"rows":[
			{"productid":"FI-SW-01","productname":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},
			{"productid":"K9-DL-01","productname":"Dalmation","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},
			{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":38.50,"attr1":"Venomless","itemid":"EST-11"},
			{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"},
			{"productid":"RP-LI-02","productname":"Iguana","unitcost":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"},
			{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"},
			{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"},
			{"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":23.50,"attr1":"Adult Female","itemid":"EST-16"},
			{"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"},
			{"productid":"AV-CB-01","productname":"Amazon Parrot","unitcost":92.00,"status":"P","listprice":63.50,"attr1":"Adult Male","itemid":"EST-18"}
		]}
		var data1 = {"total":28,"rows":[
			{"productid":"FI-SW-01","productname":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},
			{"productid":"K9-DL-01","productname":"Dalmation","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},
			{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":38.50,"attr1":"Venomless","itemid":"EST-11"},
			{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"},
			{"productid":"RP-LI-02","productname":"Iguana","unitcost":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"},
			{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"},
			{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"},
			{"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":23.50,"attr1":"Adult Female","itemid":"EST-16"},
			{"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"},
			{"productid":"AV-CB-01","productname":"Amazon Parrot","unitcost":92.00,"status":"P","listprice":63.50,"attr1":"Adult Male","itemid":"EST-18"}
		]}


		$(function(){
			$('#dgg').datagrid({
				data: data1
			}).datagrid('enableCellEditing').datagrid('gotoCell', {
				index: 0,
				field: 'productid'
			});

		})

		$(function(){
			document.getElementById("cc").style.display="none";

			// var panel=$('#xxxLayout').layout('panel','center')//获取center panel
			// 		panel.hide()
			$('#dg').datagrid({
				data: data,

				onClickCell:function(rowIndex, field, value){
		//alert(value);
		$("#cc").toggle()
		$('#divID').panel('open')
		$("#dg").datagrid("resize");
		console.log(value)
		console.log(rowIndex)
		console.log(field)
		
}





			}).datagrid('enableCellEditing').datagrid('gotoCell', {
				index: 0,
				field: 'productid'
			});
		});

	
	</script>
	<style>
#cc{
	position: absolute;
	top: 500px;
	height: 600px;
}


	</style>
</head>
<body>
	<h2>Cell Editing in DataGrid</h2>
	<p>Click a cell to start editing.</p>
	<div style="margin:20px 0;"></div>
	
	<table id="dg" title="一个表格" style="width:700px;height:215px">
		<thead>
			<tr>
				<th data-options="field:'itemid',width:100">Item ID</th>
				<th data-options="field:'productid',width:100">Product</th>
				<th data-options="field:'listprice',width:80,align:'right'">List Price</th>
				<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
				<th data-options="field:'attr1',width:250,">Attribute</th>
				<th data-options="field:'status',width:60,align:'center'">Status</th>
			</tr> 
		</thead>
	</table>
	<div id="cc" style="width:700px;height:215px;">
		<!-- <div id="cc" style="width:700px;height:215px;"class="easyui-panel" closed='true'> -->
	<table id="dgg" title="另一个表格" style="width:700px;height:215px;">
		<thead>
			<tr>
				<th data-options="field:'itemid',width:100">Item ID</th>
				<th data-options="field:'productid',width:100">Product</th>
				<th data-options="field:'listprice',width:80,align:'right'">List Price</th>
				<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
				<th data-options="field:'attr1',width:250,">Attribute</th>
				<th data-options="field:'status',width:60,align:'center'">Status</th>
			</tr>
		</thead>
	</table>


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

BUG创建者

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于控制DataGrid 的显示与隐藏，以及单及某个单元格事件生成另一个表单

DataGrid中hide无效，display无效等问题看见原生的js getElementById 突然就就明白了看代码&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Cell Editing in DataGrid - jQuery...
复制链接

扫一扫