jquery easy-ui form表单用法

最新推荐文章于 2023-04-20 14:45:22 发布

sd6275832ght

最新推荐文章于 2023-04-20 14:45:22 发布

阅读量1.6k

点赞数

本文链接：https://blog.csdn.net/sd6275832ght/article/details/83786251

版权

首先引入相应的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 插件一起使用。