首先引入相应的css和js
<link href="css/themes/default/easyui.css" rel="stylesheet" type="text/css" />
<link href="css/themes/icon.css" rel="stylesheet" type="text/css" />
<script src="jq/jquery.min.js" type="text/javascript"></script>
<script src="jq/jquery.easyui.min.js" type="text/javascript"></script>
以简单加法计数器为例子
前端代码如下
<script type="text/javascript">
$(function () {
LoadData();//加载页面
$('#tt').form({
url: 'add.ashx',//异步请求的地址
onSubmit: function () { //提交前的验证返回false不提交 true就提交到服务器端
var t1 = $('#txt1').numberbox('getValue');//因为都是用easy-ui 这里需要用这个方法来得到文本框的值而不能用$('#tx1').val()方法
if (t1=='') {
alert('不能为空')
return false;
}
else {
return true;
}
},
success: function (data) { //提交成功后触发该事件 data参数为提交成功后的服务器端的回传值
$('#result').numberbox('setValue', data);//此方法向文本框设置值
}
});
});
function LoadData() { //初始化页面函数
$('#txt1').numberbox({
requird:true,
min:0
});
$('#txt2').numberbox({
requird:true,
min:0
});
$('#result').numberbox({
requird:true
});
}
</script>
客户端页面
<body>
<form id="tt" method="post">
<div>
<input name="txt1" id="txt1" />+
<input name="txt2" id="txt2" />=
<input name="result" id="result" value="" />
<input type="submit" value="提交" />
</div>
</form>
</body>
服务器端代码
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
int t3 = 0;
if (!string.IsNullOrEmpty(context.Request["txt1"]))
{
int t1 = int.Parse(context.Request["txt1"]);
int t2 = int.Parse(context.Request["txt2"]);
t3 = t1 + t2;
context.Response.Write(t3);
}
}
form表单的其他方法
事件：
事件名称：onBeforeLoad
参数：param
说明：发出请求加载数据之前触发。返回 false 就取消这个动作。
事件名称：onLoadSuccess
参数：data
说明：当表单数据加载时触发。
时间名称：onLoadError
参数:none
说明：加载表单数据时发生某些错误的时候触发。
方法
方法名称：submit
例如：
$(’#tt’).form(‘sumbit’,{
url:
onSumbit:function(){
}
success:function(data){
}
});
说明：做提交动作， options 参数是一个对象，它包含系列特性：
url：动作的 URL
onSubmit：提交之前的回调函数
success：提交成功之后的回调函数
方法名称:load
参数：data
说明：加载记录来填充表单。
data 参数可以是一个字符串或者对象类型，字符串作为一个远程 URL，否则作为一个本地记录。
方法名称:clear
参数：none
说明：清除表单数据。
方法名称:validate
参数:none
说明:进行表单字段验证，当全部字段都有效时返回 true 。这个方法和 validatebox 插件一起使用。
839
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
