普元nui:Forms

DataBinding数据绑定 

jsp

//数据表格
<div id="datagrid" class="nui-datagrid" style="width: 500px; height: 320px;" idField="id" url="../firstCtrler/gridList.do" multiSelect="true" allowResize="true" allowUnselect="false">
	<div property="columns">
		<div type="checkcolumn"></div>
		<div field="sno" width="100" headerAlign="center" align="center" allowSort="true">学生编号</div>
		<div field="name" width="100" headerAlign="center" align="center">姓名</div>
		<div field="sex" width="100" headerAlign="center" renderer="onGenderRenderer" align="center">性别</div>
		<div field="age" width="100" headerAlign="center" align="center">年龄</div>
	</div>
</div>


//form对象
<div id="editform" class="form">
	<input class="nui-hidden" name="id" id="id" />
	<table style="width: 50%;">
		<tr>
			<td style="width: 60px;" align="right">学生编号：</td>
			<td style="width: 80px;"><input name="sno" class="nui-textbox" vtype="int" required="true" /></td>
		</tr>
		<tr>
			<td style="width: 60px;" align="right">姓名：</td>
			<td style="width: 80px;"><input name="name" class="nui-textbox" required="true" /></td>
		</tr>
		<tr>
			<td style="width: 60px;" align="right">性别：</td>
			<td style="width: 60px;"><input name="sex" class="nui-combobox" data="Genders" textField="text" valueField="id" required="true" /></td>
		</tr>
		<tr>
			<td style="width: 60px;" align="right">年龄：</td>
			<td style="width: 80px;"><input name="age" class="nui-spinner" minValue="0" maxValue="100" value="25" required="true" /></td>
		</tr>
	</table>
</div>


//控件
<div id="editform2" class="form">
	<input id="dname" name="name" class="nui-textbox" required="true" />
</div>


<script type="text/javascript">
	//定义本地性别json数组
	var Genders = [ {
		id : 1,
		text : '男'
	}, {
		id : 2,
		text : '女'
	} ];
	$J.parse();
	var grid = $J.get("datagrid");
	grid.load();
	var editWindow = $J.get("editWindow");
	var db = new $J.DataBinding();
	//绑定表单,第一个参数是form对象，第二个参数是数据表格
	db.bindForm("editform", grid);
	//第一个参数是控件id，第二个参数是数据表格，第三个参数是数据，表格对应的数据字段名称
	db.bindField("dname", grid, "name");
	//在数据表格加载时将性别从数据库储存转换成对应的汉字显示
	function onGenderRenderer(e) {
		for (var i = 0, l = Genders.length; i < l; i++) {
			var g = Genders[i];
			if (g.id == e.value)
				return g.text;
		}
		return "";
	}
</script>

 

autocomplete下拉列表输入框

属性:

名称	类型	描述	默认
text	string	用来设定默认显示值, 例如:让它默认显示“中国”.	无
value	String	用来设定控件默认值，和text配合使用,例如:value=”cn”配合text=”中国”,控件显示的是”中国”,提交后台的是数据”cn”.	无
valueField	String	数据解析value字段名称， 例如:此json中告诉控件解析时id:”cn”是value字段.	id
textField	String	数据解析text字段名称	text
searchField	String	定义文本框查询字段名称，用来封装文本框输入信息给后台,用来筛选数据.	key
url	String	数据加载地址	无
columns	Array	下拉列表列集合.参考Columns.	无

方法:

在使用方法的时候,需要先用$J 获取到对象,如$J. get (id),再使用方法.

名称	参数	描述	返回值
setValue（value）	value为要设置的值	对控件值域赋值.	无.
getValue()		获取控件值域的值.	无.
getFormValue()		获取表单值.	String
doQuery()		弹出下拉选择框,并自动检索填充数据.	无.

事件:

名称	参数	描述
valuechanged		文本输入框的值改变时发生.

jsp

<input class="nui-autocomplete" style="width:150px;" url="displayAddDialog.do"  showNullItem="true" allowInput="true" 
dataField="countrys" value="cn" textField="text" valueField="id" />

URL返回数据

{countrys:
[
{ id: "cn", text: "中国" },
{ id: "usa", text: "美国" },
{ id: "en", text: "英国" }
]
}

textboxlist下拉多选框

属性:

名称	类型	描述	默认
url	String	后台方法名	无
value	String	用来设定控件默认值.	无
text	String	用来设定控件默认显示值.	无
valueField	String	数据解析value字段名称.	id
textField	String	数据解析text字段名称.	text
searchField	String	定义文本框查询字段名称，用来封装文本框输入信息给后台,用来筛选数据.	“key”
allowInput	Boolean	允许文本输入.	true
required	Boolean	不允许为空.	false
errorMode	String：icon、border、none	错误提示方式.	icon
validateOnChanged	Boolean	值改变时验证.	true

方法:

在使用方法的时候,需要先用$J 获取到对象,如$J. get (id),再使用方法.

名称	参数	描述	返回
setUrl（value）		设置数据加载地址.	无
setText（value）		设置文本,例如:”中国,美国,加拿大”.	无
setValue（value）		设置值.例如:”cn,usa,ca”.	无
getValue()		获取值.	无
getFormValue()		获取表单值.	String
validate()		验证控件值.	Boolean
isValid()		是否通过验证.	Boolean
setIsValid（Boolean）		设置验证结果.	无

事件:

名称	参数	描述
valuechanged		值改变时发生.
validation		验证时发生.

<input id="tbl1" class="nui-textboxlist" required="true" style="width:250px;"
url="displayAddDialog.do" value="cn,usa" text="中国,美国"
dataField="countrys"	valueField="id"	textField="text" onvaluechanged="onValueChanged"/>

数据结构:

{ countrys:
[
{ id: "usa", text: "美国" },
 { id: "cn", text: "中国" },
 { id: "en", text: "英国" },
 { id: "de", text: "德国" },
 { id: "fr", text: "法国" }
]
}

Button 按钮

属性:

名称	类型	描述	默认值
text	String	定义按钮显示名称.	无.
iconCls	String	定义按钮显示图标.	无.
iconStyle	String	定义按钮显示图标样式.	无.
iconPosition	left/top	定义图标显示位置.	left
href	String	定义按钮超链接地址.	无.
target	String	超链接弹出方式.	无.
plain	Boolean	定义按钮背景透明.	false
checked	Boolean	定义按钮是否选中.	无.
checkOnClick	Boolean	定义按钮点击时是否自动选中.	无.
groupName	String	菜单项组名称.设置后,会单选菜单项组.	无.

事件:

名称	参数	描述
click		按钮点击时触发.
checkedchanged		按钮选择变化触发.

<a class="nui-button" iconCls="icon-edit" onclick="onClick">Edit</a>

checkbox复选框

属性:

名称	类型	描述	默认值
text	String	定义复选框显示名称.	无.
checked