EasyUI表单

最新推荐文章于 2018-09-26 08:50:36 发布

雨过天晴~

最新推荐文章于 2018-09-26 08:50:36 发布

阅读量237

点赞数

分类专栏： EasyUI

本文链接：https://blog.csdn.net/u012714280/article/details/80686996

版权

EasyUI 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍了如何利用EasyUI库来创建动态表单。通过HTML、JavaScript和JSON配置文件prompt.json，实现了表单的构建和数据显示。示例中详细展示了代码结构和最终的展示效果。

摘要由CSDN通过智能技术生成

html代码如下：

<!DOCTYPE HTML>
<html>
  <head>
    <title></title>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=8">
	<meta http-equiv="Expires" content="0">
	<meta http-equiv="Pragma" content="no-cache">
	<meta http-equiv="Cache-control" content="no-cache">
	<meta http-equiv="Cache" content="no-cache">
	<link rel="stylesheet" type="text/css" href="common/easyui/themes/icon.css">
	<link id="themeLink" rel="stylesheet" type="text/css" href="common/easyui/themes/bootstrap/easyui.css">
	<style type="text/css">
	body {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 1em;
		vertical-align: middle;
		font-weight: normal
	}
	</style>
	<script type="text/javascript" src="common/easyui/jquery.min.js"></script>
	<script type="text/javascript" src="common/easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="common/easyui/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
<h2>基础表单</h2>
<div class="easyui-panel" title="添加用户" style="width:800px">
	<div style="padding:20px 60px 20px 60px">
	<form id="ff" method="post">
		<table cellpadding="5">
			<tr>
				<td>Name:</td>
				<td><input class="easyui-textbox" type="text" name="name" data-options="required:true"></input></td>
			</tr>
			<tr>
				<td>Email:</td>
				<td><input class="easyui-textbox" type="text" name="email" data-options="required:true,validType:'email'"></input></td>
			</tr>
			<tr>
				<td>Subject:</td>
				<td><input class="easyui-textbox" type="text" name="subject" data-options="required:true"></input></td>
			</tr>
			<tr>
				<td>Message:</td>
				<td><input class="easyui-textbox" name="message" data-options="multiline:true" style="height:60px"></input></td>
			</tr>
			<tr>
				<td>（单选框）Course:</td>
				<td>
					<input class="easyui-combobox" data-options="
							valueField: 'label',
							textField: 'value',
							multiple:true,
							data: [{
								label: 'java',
								value: 'Java'
							},{
								label: 'perl',
								value: 'Perl'
							},{
								label: 'ruby',
								value: 'Ruby'
							}]" />
				</td>
			</tr>
			<tr>
				<td>（多选框1）Language:</td>
				<td>
					<select class="easyui-combobox"  id="cc1" name="language">
						<option value="ar">Arabic</option>
						<option value="bg">Bulgarian</option>
						<option value="ca">Catalan</option>
						<option value="zh-cht">Chinese Traditional</option>
						<option value="cs">Czech</option>
						<option value="da">Danish</option>
						<option value="nl">Dutch</option>
						<option value="en" selected="selected">English</option>
						<option value="et">Estonian</option>
						<option value="fi">Finnish</option>
						<option value="fr">French</option>
						<option value="de">German</option>
						<option value="el">Greek</option>
						<option value="ht">Haitian Creole</option>
						<option value="he">Hebrew</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>（多选框2）提示:</td>
				<td>
					<select class="easyui-combobox" name="state" style="width:200px;" 
							data-options="url:'file:///E:/prompt.json',
								valueField:'value',
								textField:'text',
								multiple:true"/>
				</td>
			</tr>
			<tr>
				<td>（级联多选框1）提示:</td>
				<td>
					<input class="easyui-combobox" id="cc2" 
							data-options=" valueField: 'value', textField: 'text',url: 'file:///E:/prompt.json',
							onSelect: function(data){
									//alert(data.value);
									//var url = 'get_data2.php?id='+data.value;
									//$('#cascade').combobox('reload', url);
								}" />
					级联:<input id="cascade" class="easyui-combobox" data-options="valueField:'id',textField:'text'" />
				</td>
			<tr>
			<tr>
				<td>（级联多选框2）提示:</td>
				<td>
					<input id="cb" name="prompt" value="">
					已选择：<input class="easyui-textbox" id="cb_case" name="message" data-options="multiline:true" style="height:60px"/>
				</td>
			</tr>
			</tr>
				<td>（多选框4）提示:</td>
				<td>
					<table>
						<tr> 
							<td><div id="dl1" style="height:200px;width:200px;"></div></td>
							<td>
								<!--
								<button id="dl_add" class="easyui-linkbutton" style="width:50px;margin:5px;">>|</button><br />
								<button id="dl_add_all" class="easyui-linkbutton" style="width:50px;margin:5px;">>>|</button><br />
								<button id="dl_remove_all" class="easyui-linkbutton" style="width:50px;margin:5px;">|<<</button><br />
								<button id="dl_remove" class="easyui-linkbutton" style="width:50px;margin:5px;">|<</button>
								-->
								<a href="javascript:void(0);" id="dl_add" class="easyui-linkbutton" style="width:50px;margin:5px;">>|</a><br />
								<a href="javascript:void(0);" id="dl_add_all" class="easyui-linkbutton" style="width:50px;margin:5px;">>>|</a><br />
								<a href="javascript:void(0);" id="dl_remove_all" class="easyui-linkbutton" style="width:50px;margin:5px;">|<<</a><br />
								<a href="javascript:void(0);" id="dl_remove" class="easyui-linkbutton" style="width:50px;margin:5px;">|<</a>
							</td>
							<td><div id="dl2" style="height:200px;width:200px;"></div></td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
	</form>
	<div style="text-align:center;padding:5px">
		<a href="javascript:void(0);" class="easyui-linkbutton" οnclick="submitForm()">Submit</a>
		<a href="javascript:void(0);" class="easyui-linkbutton" οnclick="clearForm()">Clear</a>
	</div>
	</div>
</div>
</body>
</html>

JS代码如下：

<script type="text/javascript">
function submitForm(){
	$('#ff').form('submit');
}
function clearForm(){
	$('#ff').form('clear');
}
function moveRow(id,rowIndex,rowData,toId){
	//删除
	$("#"+id).datalist("deleteRow",rowIndex);
	//添加
	var value = rowData.value;
	var text = rowData.text;
	var row = {
		value:value,
		text:text
	};
	//$("#"+toId).datalist("appendRow",row);
	$("#"+toId).datalist("insertRow",{index:0,row:row});//作为第一条
	//重新加载
	$("#"+toId).datalist("loadData",$("#"+toId).datalist('getRows'));
}
$(function () {
	$('#dl1').datalist({
		url:'file:///E:/prompt.json',
		method:'get',	
		valueField:'value',	
		textField:'text',	
		lines:false,
		//checkbox: true,
		singleSelect:false,
		//单击事件   
		onClickRow:function(rowIndex,rowData){
			//单击默认选择
		},
		//双击事件
		onDblClickRow :function(rowIndex,rowData){
			moveRow("dl1",rowIndex,rowData,"dl2");
		}
	});
	$('#dl2').datalist({
		//url:'file:///E:/prompt.json',
		//method:'get',	
		valueField:'value',	
		textField:'text',	
		lines:false,
		//checkbox: true,
		singleSelect:false,
		//单击事件   
		onClickRow:function(rowIndex,rowData){
			//单击默认选择
		},
		//双击事件
		onDblClickRow :function(rowIndex,rowData){
			moveRow("dl2",rowIndex,rowData,"dl1");
		}
	});
	//移动按钮
	$("#dl_add").click(function () {
		var rows = $("#dl1").datalist("getSelections");
		/*
		//方式1
		var rowArray = new Array();
		$(rows).each(function(i){
			var value = rows[i].value;
			var text = rows[i].text;
			var row = {
				value:value,
				text:text
			};
			rowArray.push(row);
			//删除
			var rowIndex = $("#dl1").datalist("getRowIndex", rows[i]);
			$("#dl1").datalist("deleteRow",rowIndex);
		});
		rowArray = rowArray.concat($("#dl2").datalist("getRows"));//合并
		var total = { "total":rowArray.length,rows:rowArray };
		$("#dl2").datalist("loadData",rowArray);
		*/
		//方式2
		$(rows).each(function(i){
			var value = rows[i].value;
			var text = rows[i].text;
			var row = {
				value:value,
				text:text
			};
			//添加
			//$("#dl2").datalist("appendRow",row);
			$("#dl2").datalist("insertRow",{index:0,row:row});//作为第一条
			//删除
			var rowIndex = $("#dl1").datalist("getRowIndex", rows[i]);
			$("#dl1").datalist("deleteRow",rowIndex);
		});
		//移动完后重新加载dl2,否则显示不正常
		$("#dl2").datalist("loadData",$("#dl2").datalist('getRows'));
	});
	//移动按钮
	$("#dl_add_all").click(function () {
		var data = $("#dl1").datalist("getData");
		var rows = data.rows;
		var rowsLength = rows.length;
		var indexArray = new Array();
		for (var i = 0; i < rowsLength; i++){
			var value = rows[i].value;
			var text = rows[i].text;
			var row = {
				value:value,
				text:text
			};
			//添加
			$("#dl2").datalist("appendRow",row);
		}
		//删除
		var rows = $("#dl1").datalist('getRows');
		for(var i=rows.length-1;i>=0;i--){
			$("#dl1").datalist("deleteRow",i);
		}
		//移动完后重新加载dl2,否则显示不正常
		$("#dl2").datalist("reload");
	});
	$("#dl_remove").click(function () {
		var rows = $("#dl2").datalist("getSelections");
		/*
		//方式1
		var rowArray = new Array();
		$(rows).each(function(i){
			var value = rows[i].value;
			var text = rows[i].text;
			var row = {
				value:value,
				text:text
			};
			rowArray.push(row);
			//删除
			var rowIndex = $("#dl2").datalist("getRowIndex", rows[i]);
			$("#dl2").datalist("deleteRow",rowIndex);
		});
		rowArray = rowArray.concat($("#dl1").datalist("getRows"));//合并
		var total = { "total":rowArray.length,rows:rowArray };
		$("#dl1").datalist("loadData",rowArray);
		*/
		//方式2
		var rows = $("#dl2").datalist("getSelections");
		var rowArray = new Array();
		$(rows).each(function(i){
			var value = rows[i].value;
			var text = rows[i].text;
			var row = {
				value:value,
				text:text
			};
			//添加
			//$("#dl1").datalist("appendRow",row);
			$("#dl1").datalist("insertRow",{index:0,row:row});//作为第一条
			//删除
			var rowIndex = $("#dl2").datalist("getRowIndex", rows[i]);
			$("#dl2").datalist("deleteRow",rowIndex);
		});
		//移动完后重新加载dl1,否则显示不正常
		$("#dl1").datalist("loadData",$("#dl1").datalist('getRows'));
		
	});
	$("#dl_remove_all").click(function () {
		var data = $("#dl2").datalist("getData");
		var rows = data.rows;
		var rowsLength = rows.length;
		var indexArray = new Array();
		for (var i = 0; i < rowsLength; i++){
			var value = rows[i].value;
			var text = rows[i].text;
			var row = {
				value:value,
				text:text
			};
			//添加
			$("#dl1").datalist("appendRow",row);
		}
		//删除
		var rows = $("#dl2").datalist('getRows');
		for(var i=rows.length-1;i>=0;i--){
			$("#dl2").datalist("deleteRow",i);
		}
		//移动完后重新加载dl1
		$("#dl1").datalist("reload");
	});
	$('#cb').combobox({
		url:'file:///E:/prompt.json',
		valueField:'value',
		textField:'text',
		multiple:true,
		method:'get',
		panelHeight:'auto',
		onSelect: 
			function(data){
				var value = data.value;
				var text = data.text;
				$('#cb_case').textbox("setValue", value);
			}
	});
});
</script>

其中prompt.json如下：

[{
    "value":"in",
    "text":"属于列表"
},{    
    "value":"not in",
    "text":"不属于列表"
},{    
    "value":"=",
    "text":"等于"
},{    
    "value":"<>",
    "text":"不等于"
},{    
    "value":">",
    "text":"大于"
},{ 
    "value":">=",
    "text":"大于或等于"
},{ 
    "value":"<",
    "text":"小于"
},{ 
    "value":"<=",
    "text":"小于或等于"
},{ 
    "value":"between",
    "text":"介于"
},{  
    "value":"not between",
    "text":"不介于"
},{ 
    "value":"is null",
    "text":"为空"
},{
    "value":"is not null",
    "text":"不为空"
},{
    "value":"like",
    "text":"匹配模式"
},{    
    "value":"not like",
    "text":"不同于模式"
}]

最终效果如下：