easyui实现input弹框选择数据

最新推荐文章于 2022-05-13 17:49:58 发布

w19970811

最新推荐文章于 2022-05-13 17:49:58 发布

阅读量328

点赞数

文章标签： javascript html

本文链接：https://blog.csdn.net/w19970811/article/details/115302449

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
//引入jq和easyui的包
<link href="css/easyui.css" rel="stylesheet">
<script src="js/jquery.easyui.min.js"></script>
 <script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
<title>easyui</title>
</head>
<body>

<!-- easyui插件支持 -->
	<div id="busytypeSelectGridDialog" class="easyui-dialog" title="选择" buttons="#dlg-grid-buttons" resizable="true"
		data-options="iconCls:'icon-save'" closed="true" style="width:600px;height:400px;">
		<div id="dlg-grid-buttons">
			<a href="#" class="easyui-linkbutton" onclick="javascript:busytypeGridSelectOk();">确定</a>
			<a href="#" class="easyui-linkbutton" onclick="javascript:$('#busytypeSelectGridDialog').dialog('close')">关闭</a>
		</div>
		<table id="busytypeSelectGrid" singleSelect="true">
		</table>
	</div>




					<td class="c1" >
						easyui弹框:
					</td>
					<td>
                        <input type="text" id="easyui1" name = "easyui1" class = "easyui1" style="width:130px;"/>
					  <a href = "#" onclick="daoduan('dzkh')" id = "a1">选择</a>
                        
                    </td>
				</tr>
                   
			</table>
			</div>
        

<script type="text/javascript">
//表格单选
var selectData = []
 function daoduan(field){
 	var easyui1= $("#easyui1").val().trim();
 	var params = "";
 	$("td[width='23%'] input").each(function (index){
 		params += ($(ele).attr('id')+":"+$(ele).val()+";")
 	});
//这里填写你访问后台的链接
 	var procurl="easyui1?easyui1="+easyui1;
 	selectField = field;
 	if (true){
 		selectData[field] = $('#busytypeSelectGrid').datagrid({
 			url: procurl,
 			fitColumns:true,
 			onClickRow:function(row){
 				busytypeGridSelectOk();
 			},
//这个为弹出弹出表格的表头
 			columns:[[{field:'NAME',title:'名称',width:50},{field:'CODE',title:'代码',width:50}]]

 		});
 	}
 	
 	$('#busytypeSelectGridDialog').dialog('open');
 	var v = $('#'+field).val();
 	var node = $('#busytypeSelectGrid').datagrid('selectRecord', v);
 	if ( node){
 			$('#busytypeSelectGrid').datagrid('selectRecord', node.target);
 	}
 }
 
function busytypeGridSelectOk(){
	var row = $('#busytypeSelectGrid').datagrid('getSelected');
	var columns = (Object.getOwnPropertyNames(row));
//给input框赋值
	/* $('#easyui1').val(row.NAME);*/
	$('#'+selectField).val(row.NAME);
	for(var i=0; i<columns.length; i++){
		if('CODE' == columns[i] || 'TITLE' == columns[i]){
			continue;
		}else{
			$('#'+columns[i]).val(row[columns[i]]);
		}
	}
	$('#busytypeSelectGridDialog').dialog('close');	
}
 
</script>
</body>
</html>

w19970811

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
easyui实现input弹框选择数据

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head>//引入jq和easyui的包<link href="css/easyui.css" rel="style...
复制链接

扫一扫