考核系统中,使用了Easyui。组合框在系统中使用的频率很高,它的级联效果也容易实现。
例如:
页面中,只需给url传入一个地址,返回一个JSON即可,然后绑定字段text和字段value
<input id="unitCategory" class="easyui-combobox" name="cc" data-options="
url:'CadresBaseInfo.ashx?test=queryUnitCategory',
method:'get',
panelHeight:'auto',
valueField:'type',
textField:'name',
delay:200,
onSelect:function(rec){
var url = 'CadresBaseInfo.ashx?name='+rec.type;
$('#unitName').combobox('clear'),
$('#unitName').combobox('reload', url);
}
" />
<a>单位名称</a>
<input id="unitName" class="easyui-combobox" name="cc" data-options="
panelHeight:'auto',
valueField:'cityid',
textField:'departmentname'" />
实现起来方便,不过在后面下拉框中载入年份的时候,它是默认选择第一项,不能选择其他项,让我很无语。也没找到办法,不过它实现加载文字还是很不错滴。
这几天鼓捣动态表单的生成问题,也是头大不止。表单在后台拼接字符串生成,前台只需绑定返回的变量就行。
后台代码为:
PageLoad中调用ReturnFormDiv()方法就行。
private void ReturnFormDiv() {
StringBuilder sb = new StringBuilder();
StringBuilder xb = new StringBuilder();
//定义每个对象的名字
string txtValue = "txtValue"; //生成文本框的name
string txtHidden1="txtHidden1";
string txtHidden2 = "txtHidden2";
//生成隐藏域的name
//获取票数级别表
DataTable dt = GetLevel();
for (int i = 0; i < dt.Rows.Count; i++)
{
sb.Append("<div class='fitem'>");
sb.Append("<label>");
//获取级别的名称
sb.Append(dt.Rows[i]["Name"].ToString()+"票数:" );
sb.Append("</label>");
sb.Append("<input id='" + dt.Rows[i]["Id"].ToString() + "' editor:'numberbox' name='" + txtValue + "' class='easyui-validatebox' required='true' />");
sb.Append("<input name='" + txtHidden2 + "' title='" + dt.Rows[i]["Id"].ToString() + "' type='hidden' value='" + dt.Rows[i]["Id"].ToString() + "' runat='server'/> ");
sb.Append("</div>");
xb.Append("<input name='" + txtHidden1 + "' type='hidden' value='" + dt.Rows[i]["Id"].ToString() + "' runat='server'/> ");
}
fmDiv = sb.ToString();
hiddenDiv = xb.ToString();
}
前台页面中绑定返回的fmDiv
<%=hiddenDiv %>
<form id="Form1" method="post" novalidate>
<div class="fitem">
<label>单位名称: </label>
<%-- <input id="CountryInfo" class="easyui-combobox" name="cc" />--%>
<select id="CountryInfo" class="easyui-combobox" name="cc" style="width: 127px">
</select>
</div>
<%=fmDiv %>
<input id="CategoryID" name="CategoryID" type="hidden" />
<input id="CategoryName" name="CategoryName" type="hidden" />
<input id="test" type="hidden" />
<div id="dlg-buttons1">
<a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-ok" οnclick="saveUser()">保存</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-cancel" οnclick="javascript:$('#dlg1').dialog('close')">取消</a>
</div>
</form>
在表单中Easyui中有个弊端就是,动态拼接的隐藏域在表单中value是不显示的,为此特意在外面也生成和<%=fmDiv%>一样的<%=hiddenDiv%>来方便传值。拼接成表单最后显示为:
问题又来了,如何让红色的票数框只能输入数字。为此在拼接字符串的时候,设置name值一样。js中有一个方法是IsNaN()意思是is not a number,前台js验证代码为:
var object = document.getElementsByName("txtValue");
for (var i = 0; i < object.length; i++) {
var _input = object[i].value;
if (isNaN(_input)) {
alert('输入的票数必须为数字');
return;
}
}
这个UI的确需要时间来验证,学习吧...