普元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	Boolean	是否选中.	false
value	Object	定义复选框和后台交互的值	false
trueValue	Object	“真”值	true
falseValue	Object	“假”值	false

<div id="ck1" name="product" class="nui-checkbox" checked="true" text="NUI CheckBox" ></div>
<divi d="ck2" name="product" class="nui-checkbox" checked="false" text="NUI CheckBox" ></div>

listbox列表窗口

属性:

名称	类型	描述	默认
columns	Array	列对象集合,用来定义多列样式.	无.
data	Array	本地数据对象.	无.
url	String	远程数据加载地址.	无 .
value	String	定义控件和后台交互的值.	无.
valueField	String	数据解析value字段名称.	id
textField	String	数据解析textx字段名称.	text
showCheckBox	Boolean	显示多选框.	false
showAllCheckBox	Boolean	显示全选框.	true
multiSelect	Boolean	是否多选.	false
showNullItem	Boolean	显示空项.	false
nullItemText	String	空项文本.	无.

方法:

名称	参数	描述	返回值
setValue(value)		设置值.	无.
getValue()		获取值.	无.
getFormValue()		获取表单值.	String
load(url)	url:访问地址.	加载远程数据.	无.
loadData(Array)	array:集合对象.	加载本地数据.	无.
getCount()		获取总项数.	无.
getAt(Number)	number:索引编号.	获取索引处对象.	无.
indexOf(Object)	object:对象.	获取对象索引号.	无.
findItems(value)		根据值获取项数组.	Array
updateItem(Object,options)	object:更新的对象,options:跟新的数据.	更新项.	无.
removeAll()		删除所有项.	无.
addItems(Array, Number)	array:加入的集合,number:加入项的编号.	加入多个项.	无.
addItem(Object, Number)	object:对象, number:加入项的编号.	加入单个项.	无.
removeItems(Array)	array:删除的集合.	删除多个项.	无.
moveItem(Object, Number)	object:移动项对象,number:移动项的位置编号.	移动项到新索引位置.	无.
isSelected(Object)	Object:对象.	是否选中项.	Boolean
getSelecteds()		获取选中项集合.	Array
getSelected()		获取当前选中项.	Object
Select(Object)	Object:对象	选中项.	无.
Deselect(Object)	Object:对象	取消选中项.	无.
Selects(Array)	array:集合	选中多个项.	无.
Deselects(Array)	array:集合	取消选中多个项.	无.
selectAll()		选中所有项.	无.
deselectAll()		取消选中所有项.	无.

事件:

名称	参数	描述
valuechanged		值改变时发生.
itemclick		项点击时发生.
itemdblclick		项双击时发生.
beforeload		数据加载前发生.
preload		数据加载，设置到Tree前发生.
loaderror		数据加载错误时发生.
load		数据加载成功时发生.

<div id="listbox1" class="nui-listbox" style="width: 150px; height: 100px;" url="displayAddDialog.do"  textField="text" valueField="id"  dataField="countrys"></div>
<div id="listbox2" class="nui-listbox" style="width: 400px; height: 120px;" url="../data/countrys.txt"  value="cn"  dataField="countrys"  showCheckBox="true" multiSelect="true">
	<div property="columns">
		<div header="ID" field="id"></div>
		<div header="国家" field="text"></div>
	</div>
</div>

URL返回数据

{countrys:
    [
        { id: "usa", text: "美国" },
        { id: "cn", text: "中国" },
        { id: "jp", text: "日本" },
        { id: "en", text: "英国" },
        { id: "de", text: "德国" },
        { id: "fr", text: "法国" },
        { id: "ca", text: "加拿大" },
        { id: "at", text: "奥地利" },
        { id: "ch", text: "瑞士" }
    ]
}

单列页面效果:

 

多选+多列页面效果:

 

checkboxlist复选框组

属性:

名称	类型	描述	默认值
multiSelect	Boolean	是否多选.	true
repeatLayout	String:none,flow,table	布局方式.	none
repeatDirection	String:vertical,horizontal	平铺方向.	horizontal
repeatItems	Number	平铺显示项数.	0

方法:

名称	方法	描述	返回值
setValue（value）		设置值.	无.
getValue()		获取值.	无.

事件:

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

<div id="cbl1" class="nui-checkboxlist" repeatItems="2" repeatLayout="table"  onload="onLoad" url=" displayAddDialog.do" textField="text" valueField="id" value="cn,usa" ></div>

 数据结构:

{countrys:
    [
        { id: "usa", text: "美国" },
        { id: "cn", text: "中国" },
        { id: "jp", text: "日本" },
        { id: "en", text: "英国" },
        { id: "de", text: "德国" },
        { id: "fr", text: "法国" },
        { id: "ca", text: "加拿大" },
        { id: "at", text: "奥地利" },
        { id: "ch", text: "瑞士" }
    ]
}

 

 

radiobuttonlist单选框组

属性:

名称	类型	描述	默认值
repeatLayout	String:none,flow,table	布局方式.	none
repeatItems	number	平铺显示项数.	0
repeatDirection	String:vertical,horizontal	平铺方向.	horizontal

方法:

名称	参数	描述	返回值
setValue(value)		设置值.	无.
getValue()		获取值.	无.

事件:

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

<div class="nui-radiobuttonlist" repeatItems="2" repeatLayout="table" repeatDirection="vertical" url="displayAddDialog.do"  textField="text" valueField="id" value="cn" dataField="countrys"></div>

 URL返回数据

{countrys:
    [
        { id: "usa", text: "美国" },
        { id: "cn", text: "中国" },
        { id: "jp", text: "日本" },
        { id: "en", text: "英国" },
        { id: "de", text: "德国" },
        { id: "fr", text: "法国" },
        { id: "ca", text: "加拿大" },
        { id: "at", text: "奥地利" },
        { id: "ch", text: "瑞士" }
    ]
}

calendar日期选择框

属性:

名称	类型	描述	默认值
value	String	值.	无.
columns	Number	列个数.	1
rows	Number	行个数.	1
viewDate	Date	默认显示日期.	无
showTime	Boolean	显示时间输入框.	false
timeFormat	String	时间格式化字符串.	H:mm

方法:

名称	参数	描述	返回值
setValue(value)		设置值.	无.
getValue()		获取值.	无.
getFormValue()		获取表单值.	String

事件:

名称	参数	描述
valuechanged		值改变时发生.
datechanged		日期改变时发生.
timechanged		时间改变时发生.

<div id="calendar1" class="nui-calendar" value="2014-9-4" ></div>

buttonedit按钮编辑器

属性:

名称	类型	描述	默认值
text	String	文本.	无.
value	Object	值.	false
textName	String	文本字段名称.	无.
selectOnFocus	Boolean	获取焦点时选中文本.	false
maxLength	Number	最大文本字符数.	1000
minLength	Number	最小文本字符数.	0
allowInput	Boolean	允许文本输入.	true
required	Boolean	不允许为空.	false
errorMode	String:icon、border、none	错误提示方式.	icon
validateOnChanged	Boolean	值改变时验证.	true
showClose	Boolean	是否显示关闭按钮.	false

方法:

名称	参数	描述	返回值
setValue(value)		设置值.	无.
getValue()		获取值.	无.
getFormValue()		获取表单值.	String
validate()		验证控件值.	Boolean
isValid()		是否通过验证.	Boolean
setIsValid(Boolean)		设置验证结果.	无.

事件:

名称	参数	描述
valuechanged		值改变时发生.
buttonclick		按钮点击时发生.
validation		验证时发生.
enter		回车时发生.
keydown		键盘按下时发生.
keyup		键盘按起时发生.
focus		获取焦点时发生.
blur		失去焦点时发生.
closeclick		点击关闭按钮时激发.

<input id="btnEdit1"class="nui-buttonedit"onbuttonclick="onButtonEdit"/>

textbox文本输入框

名称	类型	描述	默认值
emptyText	String	文本为空时的提示内容.	无.
value	String	值.	无.
allowInput	Boolean	允许文本输入.	true
selectOnFocus	Boolean	获取焦点时选中文本.	false
maxLength	Number	最大字符串.	无.
errorMode	String:icon、border、none	错误提示方式.	icon
validateOnChanged	Boolean	值改变时验证.	true
validateOnLeave	Boolean	失去焦点时验证.	true
required	Boolean	不允许为空.	false
vtype	String	验证规则.如vtype=”email”.参考示例.	无.
emailErrorText	String		请输入邮件格式.
urlErrorText	String		请输入URL格式.
floatErrorText	String		请输入数字.
intErrorText	String		请输入整数.
dateErrorText	String		请输入日期格式 {0}.
maxLengthErrorText	String		不能超过 {0} 个字符.
minLengthErrorText	String		不能少于 {0} 个字符.
maxErrorText	String		数字不能大于 {0}.
minErrorText	String		数字不能小于 {0}.
rangeLengthErrorText	String		字符数必须在 {0} 到 {1} 之间.
rangeErrorText	String		数字必须在 {0} 到 {1} 之间.

方法:

名称	参数	描述	返回值
setValue(value)		设置值.	无.
getValue()		获取值.	无.
getFormValue()		获取表单值.	String
validate()		验证控件值.	Boolean
isValid()		是否通过验证.	Boolean
setIsValid(Boolean)		设置验证结果.	无.

事件:

名称	参数	描述
valuechanged		值改变时发生.
validation		验证时发生.
enter		回车时发生.
keydown		键盘按下时发生.
keyup		键盘按起时发生.
focus		获取焦点时发生.
blur		失去焦点时发生.

单行输入框:<input class="nui-textbox" value="0" /> <br /><br />

password密码框

属性:

名称	类型	描述	默认值
value	String	值.	无.

方法:

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

名称	参数	描述	返回值
setValue(value)		设置值.	无.
getValue()		获取值.	无.

事件:

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

密码输入框:<input class="nui-password" value="12345"/>

textarea多行文本输入框

属性:

名称	类型	描述	默认值
value	String	值.	无.

方法:

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

名称	参数	描述	返回值
setValue(value)		设置值.	无.
getValue()		获取值.	无.

事件:

名称	参数	描述
valuechanged		值改变时发生

<input class="nui-textarea" value="中国" />

combobox下拉列表

属性:

名称	类型	描述	默认值
value	String	值.	无.
valueField	String	值字段.	id
textField	String	文本显示字段.	text
multiSelect	Boolean	多选.	false
data	Array	数据对象.	无.
url	String	方法名	无.
columns	Array	下拉列表列集合.参考Columns	无.
showNullItem	Boolean	显示空项.	false
nullItemText	String	空项文本.	无.
valueFromSelect	Boolean	必须从选择项录入.	false

方法:

名称	参数	描述	返回值
setValue(value)		设置值.	无.
getValue()		获取值.	无.
getFormValue()		获取表单值.	String
Load(url)		加载数据.	无.
Select(Number)		选择项.	无.

事件:

名称	参数	描述
valuechanged		值改变时发生
itemclick		下拉项点击时发生

 

<tr>
	<td class="form_label">分配状态:</td>
	<td colspan="1">
		<select class="nui-combobox" name="allotstate" >
			<option value=""  hidden="true">所有匹配项 </option>
			<option value="0" selected>未匹配</option>
			<option value="1">已匹配</option>
		</select>
	</td>
</tr>

<input class="nui-combobox" style="width: 150px;" textField="text" valueField="id" url="displayAddDialog.do" value="cn" showNullItem="true" allowInput="true" />
<div class="nui-combobox" style="width: 250px;" textField="text" valueField="id" url="newStudentCtrler/displayAddDialog.do" value="cn,usa" multiSelect="true" >
	<div property="columns">
		<div header="ID" field="id"></div>
		<div header="国家" field="text"></div>
	</div>
</div>

url返回数据

{countrys:
    [
        { id: "usa", text: "美国" },
        { id: "cn", text: "中国" },
        { id: "jp", text: "日本" },
        { id: "en", text: "英国" },
        { id: "de", text: "德国" },
        { id: "fr", text: "法国" },
        { id: "ca", text: "加拿大" },
        { id: "at", text: "奥地利" },
        { id: "ch", text: "瑞士" }
    ]
}

datepicker日期选择框

属性:

名称	类型	描述	默认值
value	Date	值	无.
format	String	格式化显示字符串.	yyyy-MM-dd
timeFormat	String	格式化时间字符串.	H:mm
viewDate	Date	下拉默认显示日期.	无.
minDate	Date	最小日期.	无.
maxDate	Date	最大日期.	无.
showTime	Boolean	显示”时间输入框”.	false
showOkButton	Boolean	显示”确定”按钮.	false

方法:

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

名称	参数	描述	返回值
setValue(value)		设置值.	无.
getValue()		获取值.	无.
getFormValue()		获取表单值.	String

事件:

名称	参数	描述
valuechanged		值改变时发生

<input id="date1" class="nui-datepicker" value="2014-09-04" />
<inputid="date2"class="nui-datepicker"style="width:200px;" format="yyyy-MM-dd HH:mm:ss" showTime="true" />

spinner数字输入框

属性:

名称	类型		描述	默认值
value			值.	无.
minValue	number		控件最小起始值.	0
maxValue		number	控件最大终止值.	100
increment			步长,点击一次控件增加或减少的步长.例如: 设置为1,每次增加或减少1步长; 设置为0.1,每次增加或减少0.1步长.	1
decimalPlaces		number	需要精确到小数点后几位,一般配合步长使用,增加步长的粒度.	0

方法:

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

名称	参数	描述	返回值
setValue(value)		设置值.	无.
getValue()		获取值.	无.
getFormValue()		获取表单值.	String
getFormattedValue()		获取格式化后的值.	String

事件:

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

<input	id="sp1"class="nui-spinner"	minValue="200" maxValue="250" />

treeselect树形选择框

属性:

名称	类型	描述	默认值
data	Array	树形数据对象.	无.
url	String	数据加载地址.	无.
value	String	选中的节点值.	无.
valueField	String	值字段.	id
parentField	String	父节点字段.	pid
resultAsTree	Boolean	url数据是否列表.	true
textField	String	节点文本字段.	text
multiSelect	Boolean	多选.	false
checkRecursive	Boolean	是否联动选择.	false
autoCheckParent	Boolean	是否自动选择父节点.比如选中子节点,将父节点也自动选中.	false
expandOnLoad	Boolean/Number	加载后是否展开.比如:true展开所有节点;0展开第一级节点.以此类推.	false
valueFromSelect	Boolean	必须从选择项录入.	false

方法:

名称	参数	描述	返回值
setValue(value)		设置值.	无.
getValue()		获取值.	无.
getFormValue()		获取表单值.	String
Load(url)		加载数据.	无.

事件:

名称	参数	描述
valuechanged		值改变时发生.
nodeclick		下拉项点击时发生.
beforenodecheck	{   sender: Object,    //树对象   node: Object,      //节点对象   isLeaf: Boolean,   checked: Boolean,  //Check状态   cancel: false }	Check选择前发生.
beforenodeselect	{   sender: Object,     //树对象   node: Object,       //节点对象   isLeaf: Boolean,   cancel: false }	选择节点前发生.

<input id="select1" class="nui-treeselect" url=" newStudentCtrler/displayAddDialog.do " textField="text" dataField="treeNodes" valueField="id" parentField="pid" />

URL返回数据

{   treeNodes:
[
    {id: "base", text: "Base", expanded: false},
    {id: "ajax", text: "Ajax", pid: "base"},
    {id: "json", text: "JSON", pid: "base"},
    {id: "date", text: "Date", pid: "base"},
    {id: "control", text: "Control", pid: "base"},
    {id: "forms", text: "Forms", expanded: false},
    {id: "button", text: "Button", pid: "forms"},
    {id: "listbox", text: "ListBox", pid: "forms"},
    {id: "checkboxlist", text: "CheckBoxList", pid: "forms"},
    {id: "lists", text: "Lists", expanded: false},
    {id: "datagrid", text: "DataGrid", pid: "lists"},
    {id: "tree", text: "Tree", pid: "lists"},
    {id: "treegrid", text: "TreeGrid ", pid: "lists"},
    {id: "layouts", text: "Layouts", expanded: false},
    {id: "panel", text: "Panel", pid: "layouts"},
    {id: "splitter", text: "Splitter", pid: "layouts"},
    {id: "layout", text: "Layout ", pid: "layouts"},
    {id: "navigations", text: "Navigations", expanded: false},
    {id: "pager", text: "Pager", pid: "navigations"},
    {id: "tabs", text: "Tabs", pid: "navigations"},
    {id: "navbar", text: "OutlookBar", pid: "navigations"},
    {id: "menu", text: "Menu", pid: "navigations"}
]
}

 

lookup下拉搜索框

属性:

名称	类型	描述	默认值
valueField	String	值字段.	id
textField	String	文本字段.	text
grid	String	表格id.如”#datagrid1”.	无.
popup	String	下拉框id.如”#gridPanel”.	无.

方法:

名称	参数	描述	返回值
setValue(value)		设置值.	无.
getValue()		获取值.	无.
deselectAll()		清除所有选中.	无.

事件:

名称	参数	描述
valuechanged		值改变时发生

<input id="lookup2" class="nui-lookup" style="width: 200px;" textField="name" valueField="id" popupWidth="auto" popup="#gridPanel" grid="#datagrid1" />
<div id="gridPanel" class="nui-panel" style="width: 450px; height: 250px;" borderStyle="border:0" showToolbar="true" title="header" iconCls="icon-add" showCloseButton="true" showHeader="false" bodyStyle="padding:0">
	<div property="toolbar" style="padding: 5px; padding-left: 8px; text-align: center;">
		<span>姓名：</span> <input id="keyText" class="nui-textbox" style="width: 160px;" onenter="onSearchClick" /> <a class="nui-button" onclick="onSearchClick">Search</a>
	</div>
	<div id="datagrid1" class="nui-datagrid" style="width: 100%; height: 100%;" borderStyle="border:0" url="../data/AjaxService.jsp?method=SearchEmployees" multiSelect="true" showPageSize="false" showPageIndex="false">
		<div property="columns">
			<div type="checkcolumn">#</div>
			<div field="loginname" width="120" headerAlign="center" allowSort="true">员工帐号</div>
			<div field="name" width="120" headerAlign="center" allowSort="true">姓名</div>
			<div field="createtime" width="100" headerAlign="center" dateFormat="yyyy-MM-dd" allowSort="true">创建日期</div>
		</div>
	</div>
</div>

htmlfile文件上传控件

属性:

名称	类型	描述	默认值
buttonText	String	按钮文本.	无.
limitType	String	文件限制类型.如”.bmp;.txt”	无.

事件:

名称	参数	描述
fileselect		文件选择时激发.0

<form id="upload" action="newStudentCtrler/displayAddDialog.do" method="post" enctype="multipart/form-data">图片:
<input class="nui-htmlfile" name="Fdata" limitType="*.txt" />
<input type="submit" value="上传"/>
</form