easyui知识总结一


①searchbox
    ①创建方式
        ①标签方式
        <input id="ss" class="easyui-searchbox" style="width:300px" data-options="searcher:qq,prompt:'Please Input Value',menu:'#mm'"></input> 

        <div id="mm" style="width:120px"> 
            <div data-options="name:'all',iconCls:'icon-ok'">All News</div> 
            <div data-options="name:'sports'">Sports News</div> 
        </div> 
        
        ②编码方式
        <input id="ss" style="width:300px"></input> 

        <div id="mm" style="width:120px"> 
            <div data-options="name:'all',iconCls:'icon-ok'">All News</div> 
            <div data-options="name:'sports'">Sports News</div> 
        </div>
        
        $("#ss").searchbox({
            menu:'#mm', //关联搜索下拉列表
            prompt:'Please Input Value'  //提示信息
            width:宽
            height:高
            value:搜索内容默认值
            searcher :function(value,name){
            
            } 指定搜索回调函数
            

        });
    ②方法:
        getValue     none       返回当前搜索值。 
        setValue     value      设置一个新的搜索值。 
        getName     none     返回当前搜索类型名。 
        selectName     name     选择当前搜索类型名。 
        代码示例:
            $('#ss').searchbox('selectName', 'sports');

 

        
②validatebox
    ①创建方式
        ① 标签式
            <input id="vv" class="easyui-validatebox" data-options="required:true,validType:'email'" /> 
        ② 编码方式
            <input id="box"/>
            $(function(){
                $("#box").validatebox({
                    required: true,    
                    validType: 'email' | ['email','length[0,20]']
                    注意:email,url,length[2,10],remote['url','param']
                    missingMessage:"如果出现未填内容时的提示信息",
                    invalidMessage:"自定义的错误信息",
  
                })
            })
    ②方法
        $("#box").validatebox("isValid") 返回值 true|false
    ③自定义校验规则:
            $.extend($.fn.validatebox.defaults.rules, {    
                        equals: {    
                                    validator: function(value,param){    
                                        return value == $(param[0]).val();    
                                    },    
                                    message: '两次密码不一致'   
                        }    
            });  
            <input id="pwd" name="pwd" type="password" class="easyui-validatebox" data-options="required:true" />   
            <input id="rpwd" name="rpwd" type="password" class="easyui-validatebox"     
                required="required" validType="equals['#pwd']" />  
                
            
            
            
            <input id="password" name="password" class="easyui-validatebox" data-options="required:true,validType='pwdLengthEqual[6]'"/>
            $.extend($.fn.validatebox.defaults.rules, {    
                        pwdLengthEqual: {    
                                    validator: function(value,param){    
                                        return value.length == param[0];
                                    },    
                                    message: '密码长度必须为{0}'   
                        }    
            });  
             

------------------------------------------------------------------------------------------
numberbox
    ①创建方式
        ①标签式
            <input class="easyui-numberbox" data-options="min:0,precision:2" value='100'>
        ②编码方式
             <input id="box"/>
              $(function(){
                  $("#box").numberbox({
                     min:0,
                     precision:2,
                  });
              })
    ②常见属性        
        value     number 默认值。  
        min       number 允许的最小值。 null 
        max       number 允许的最大值。 null 
        precision number 在十进制分隔符之后显示的最大精度。(即小数点后的显示精度) 0 
        prefix       string 前缀字符。(比如:金额的$或者¥)  
        suffix    string 后缀字符。(比如:后置的欧元符号€) 
        
    ③常见方法
        setValue value 设置数值输入框的值。 
            代码示例:
                $('#nn').numberbox('setValue', 206.12);
        getValue none 获取数值输入框的值。 
            代码示例:
                var v = $('#nn').numberbox('getValue');
                alert(v);
        clear none 清楚数值输入框的值。 

------------------------------------------------------------------------------------
combo【了解】
    ①创建方式 注意:使用自定义下拉框不能通过标签的方式进行创建
        <input id="box">
        <div id="food">
            <div class="padding:5px;">
                <input type="radio" name="food" value="01"><span>煎饼果子</span><br>
                <input type="radio" name="food" value="02"><span>牛腩米线</span><br>
                <input type="radio" name="food" value="03"><span>水果沙拉</span><br>
                <input type="radio" name="food" value="04"><span>蛋黄派</span><br>
                <input type="radio" name="food" value="05"><span>其他</span><br>
            </div>
        </div>
        
        $("#box").combo({
             required:true,    
        });
        
        $('#box').combo('panel').append($('#food'));
        
        $('input[type=radio]').click(function(){
              $('#box').combo('setText', $(this).next().text()).combo('setValue',$(this).val());
        });
        
    ②常见属性
        editable:false,
        validType:"email",
        required:true,
        invalidMessage:"此项内容不允许为空",
        missingMessage:""
        width         number     组件的宽度。 auto 
        height         number     组件的高度。(该属性自1.3.2版开始可用) 22 
        panelWidth     number     下拉面板宽度。 null 
        panelHeight number     下拉面板高度。 200 
        value:01 字段的默认值
        
    ③常用方法
        showPanel     none 显示下拉面板。 
        hidePanel     none 隐藏下拉面板。 
        isValid     none 返回验证结果。 
        clear         none 清除控件的值。 
        reset         none 重置控件的值。(该方法自1.3.2版开始可用) 
        getText     none 获取输入的文本。 
        setText     text 设置输入的文本。 
        getValue     none 获取组件的值。 
        setValue     value 设置组件的值。 
        
        textbox     none 返回文本框对象。 
            $("#box").combo("textbox").val("煎饼果子");
            
------------------------------------------------------------------------
combobox
    ①创建方式
        ①标签式
            <select id="cc" class="easyui-combobox" name="dept" style="width:200px;">
                <option value="aa">aitem1</option>
                <option>bitem2</option>
                <option>bitem3</option>
                <option>ditem4</option>
                <option>eitem5</option>
            </select>
        ②编程方式
            <input id="box"/>
            
            [{
                "id":1,
                "text":"菜单1"
            },{
                "id":2,
                "text":"菜单2"
            }]
            
            $(function(){
                $("#box").combobox({
                        url:'/EasyUI/combobox.json',    
                        valueField:'id',    
                        textField:'suns', 
                        editable:false,  
                        formatter:function(row){
                            return "<img src='/EasyUI/themes/icons/ok.png'/>"+" "+ row['text'];
                        }
               });
            
    ②常见属性
        groupField         string 指定分组的字段名称(译者注:分组的字段由数据源决定)。(该属性自1.3.4版开始可用) null 
        groupFormatter     function(group) 返回格式化后的分组标题文本,以显示分组项(该属性自1.3.4版开始可用)
            代码示例:
                $('#cc').combobox({
                    groupFormatter: function(group){
                        return '<span style="color:red">' + group + '</span>';
                    }
                });
        method            string HTTP方法检索数据(POST / GET)。 
        mode             string 定义了当文本改变时如何读取列表数据。设置为'remote'时,下拉列表框将会从服务器加载数据。当设置为“remote”模式时,用户输入将被发送到名为'q'的HTTP请求参数到服务器检索新数据。 local 
        onSelect           record 在用户选择列表项的时候触发。 
        onUnselect         record 在用户取消选择列表项的时候触发。 

    ③常见方法
        setValue value 设置下拉列表框的值。 
            代码示例:
                $('#cc').combobox('setValue', '001');
        getData none 返回加载数据。 
        clear none 清除下拉列表框的值。 
        select value 选择指定项。 
        unselect value 取消选择指定项。 

-------------------------------------------------------------------------------
datebox 显示日期 但不显示时 分 秒
    ①创建方式
        ①标签式
            <input id="dd" type="text" class="easyui-datebox" required="required"></input>
        ②编程方式
            <input id="box"/>
              $(function(){
                     $('#box').datebox({
                        value:
                        required:true,
                        editable:false,
                        invlidMessage:'必须填入日期',
                     });  
                });
    ②常见属性
        onSelect date 在用户选择了一个日期的时候触发。 
            代码示例:
            $('#dd').datebox({
                onSelect: function(date){
                    alert(date.getFullYear()+":"+(date.getMonth()+1)+":"+date.getDate());
                }
            });
    ③常见方法
        setValue value 设置日期输入框的值。 
            代码示例:
            $('#dd').datebox('setValue', '6/1/2012');    // 设置日期输入框的值
            var v = $('#dd').datebox('getValue');    // 获取日期输入框的值
        calendar

---------------------------------------------------------------------
datetimebox 继承子 datetimebox
    ①创建方式
        ①标签式
        <input class="easyui-datetimebox" name="birthday"     
            data-options="required:true,showSeconds:false,editable:false,showSeconds:true" style="width:150px">
        ②编程式
        <input id="box" />
        $('#box').datetimebox({    
            value: '3/4/2010 2:3',    
            required: true,    
            showSeconds: false   
        }); 
    ②常见方法
        setValue value 设置日期时间输入框值。 
            代码示例:
            $('#dt').datetimebox('setValue', '6/1/2012 12:30:56');    // 设置日期时间输入框的值
            var v = $('#dt').datetimebox('getValue');                 // 获取日期时间输入框的值
            alert(v);
        calendar
------------------------------------------------------
linkbutton
    ①创建方式:
        标签方式
            <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add'">添加</a>
        编程方式
             <a href="javascript:void(0)" id="box" name="sex"></a>
            $('#box').linkbutton({
                text : '提交',
                iconCls: 'icon-add',
                plain: 'true',
            });        
    ②常见属性
        disabled boolean 为true时禁用按钮 
        
    ③常见方法
        disable none 禁用按钮。  
            代码示例:

            $('#btn').linkbutton('disable');
        enable none 启用按钮。  
            代码示例:

            $('#btn').linkbutton('enable');
            
        select none 选择按钮。(该属性自1.3.3版开始可用) 
        unselect none 取消选择按钮。(该属性自1.3.3版开始可用 


-----------------------------------------------------
form
    ①提交表单
    $('#ff').form('submit', {    
        url:...,    
        onSubmit: function(){    
            // do some check    
            // return false to prevent submit;    
        },    
        success:function(data){    
            alert(data)    
        }    
    });  
    
    ②提交额外参数
    $('#ff').form('submit', {    
        url:...,    
        onSubmit: function(param){    
            param.p1 = 'value1';    
            param.p2 = 'value2';    
        }    
    });  
    
    ③接受服务器的返回结果
    {    
        "success": true,    
        "message": "Message sent successfully."   
    }  
    $('#ff').form('submit', {    
        success: function(data){    
            var dataObject = $.parseJSON(data);  // change the JSON string to javascript object    
            if (dataObject.success){    
                alert(data.message)    
            }    
        }    
    });
    
    ④常见方法
    submit options 执行提交操作,该选项的参数是一个对象,它包含以下属性:
                    url:请求的URL地址。
                    onSubmit: 提交之前的回调函数。
                    success: 提交成功后的回调函数。

                    下面的例子演示了如何提交一个有效并且避免重复提交的表单。

                    $.messager.progress();    // 显示进度条
                    $('#ff').form('submit', {
                        url: ...,
                        onSubmit: function(){
                            var isValid = $(this).form('validate');
                            if (!isValid){
                                $.messager.progress('close');    // 如果表单是无效的则隐藏进度条
                            }
                            return isValid;    // 返回false终止表单提交
                        },
                        success: function(){
                            $.messager.progress('close');    // 如果提交成功则隐藏进度条
                        }
                    });

 
    load data 读取记录填充到表单中。数据参数可以是一个字符串或一个对象类型,如果是字符串则作为远程URL,否则作为本地记录。 
                代码示例:

                $('#ff').form('load','/easyui_day2/query.do');    // 读取表单的URL
                $('#ff').form('load',{
                    name:'name2',
                    email:'mymail@gmail.com',
                    subject:'subject2',
                    message:'message2',
                    language:5
                });

 
    clear none 清除表单数据。 
    reset none 重置表单数据。(该方法自1.3.2版开始可用) 
    validate none 做表单字段验证,当所有字段都有效的时候返回true。该方法使用validatebox(验证框)插件。 
    
    ⑤ 监听
    onSubmit         param     在提交之前触发,返回false可以终止提交。 
    uccess             data     在表单提交成功以后触发。 
    onBeforeLoad     param     在请求加载数据之前触发。返回false可以停止该动作。 
    onLoadSuccess     data     在表单数据加载完成后触发。 
    onLoadError     none     在表单数据加载出现错误的时候触发。 


--------------------------------------------------
messager 对话框
    ①提示框 info warning error question
        $.messager.alert("警告","这是一个警告的内容","warning",function(){
              alert("确认后 执行");          
        });
    ②对话框
        $.messager.confirm("确认对话框","您是否确认删除",function(flag){
           if(flag){
              alert("继续处理");
           }else{
              alert("终端操作");
           }
        });
    ③进度框 
        $.messager.progress({
            title : '执行中',
            msg : '努力加载中...',
            text : '{value}%',
            interval : 100,
        });
    ④自动消失提示框 slide,fade,show
        $.messager.show({
            title : '我的消息',
            msg : '消息在 5 秒后关闭',
            timeout : 2000,
            showType : 'show',
        });
        

转载于:https://my.oschina.net/u/2851681/blog/732229

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值