easyUI学习1

panel组件：

<div id="p" class="easyui-panel" title="My Panel"
    style="width:500px;height:150px;padding:10px;background:#fafafa;"
    data-options="iconCls:'icon-remove',closable:true,
                    collapsible:true,minimizable:true,maximizable:true">
    <p>panel content.</p>
    <p>panel content.</p>
</div>

class="easyui-panel"：组件名
iconCls：'icon-remove' 左上角图标
closable:true 是否可关闭（默认false）
collapsible:true 是否可折叠（默认false）
minimizable：最小化（默认false）
maximizable：最大化（默认false）
fit:true：是否自适应
closed:是否不显示（隐藏）
某个事件或者某个按钮

<input type="button" class="easyui-linkbutton" value="打开" onclick="$('#p').panel('open')">
<input type="button" class="easyui-linkbutton" value="隐藏" onclick="$('#p').panel('close')">
<input type="button" class="easyui-linkbutton" value="销毁" onclick="$('#p').panel('destroy')">

easyUI form提交：

        $('#user_reg_regForm').form({
            url : '${pageContext.request.contextPath}/userController/reg.action',
            success : function(result) {
                var r = $.parseJSON(result);
                if (r.success) {
                    $('#user_reg_regDialog').dialog('close');
                }
                $.messager.show({
                    title : '提示',
                    msg : r.msg
                });
            }
        });    

        $('#user_reg_regDialog').show().dialog({
            modal : true,
            title : '用户注册',
            closed : true,
            width : 250,
            height : 180,
            buttons : [ {
                text : '注册',
                handler : function() {
                    $('#user_reg_regForm').submit();
                }
            } ]
        });    

与ajax提交区别：

　　ajax提交，指定dataType:'json' 返回json,则可以正常r.msg
   　　 js将字符串转化为json对象：r=eval("("+r+")");
    　　query 将字符串转化为json jQuery.parseJSON(json); (严格要求键值对以双引号引起来)
　　easyUI form提交，返回json格式的字符串 $.parseJSON(jsonStr)

　　form提交可以文本域，文件域 并且是无刷新提交。

　　form提交返回下载文件，配置一个返回头类型

<!-- Spring MVC JSON配置 -->
    <bean class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter">
        <property name="messageConverters">
            <list>
                <!-- <bean id="fastJsonHttpMessageConverter" class="com.alibaba.fastjson.support.spring.FastJsonHttpMessageConverter"> -->
                <bean id="fastJsonHttpMessageConverter" class="sy.util.FastJsonHttpMessageConverter">
                    <property name="supportedMediaTypes">
                        <list>
                            <value>text/html;charset=UTF-8</value><!-- 避免IE出现下载JSON文件的情况 -->
                        </list>
                    </property>
                </bean>
            </list>
        </property>
    </bean>

表单验证：

<div id="user_reg_regDialog" style="display: none;overflow: hidden;">
    <div align="center">
        <form method="post" id="user_reg_regForm">
            <table class="tableForm">
                <tr>
                    <th>登录名</th>
                    <td><input name="name" class="easyui-validatebox" data-options="required:true" />
                    </td>
                </tr>
                <tr>
                    <th>密码</th>
                    <td><input type="password" name="pwd" class="easyui-validatebox" 
                                data-options="required:true" style="width: 150px;" />
                    </td>
                </tr>
                <tr>
                    <th>重复密码</th>
                    <td><input type="password" name="rePpwd" class="easyui-validatebox" 
                                data-options="required:true,validType:'eqPwd[\'#user_reg_regForm input[name=pwd]\']'" 
                                style="width: 150px;" />
                    </td>
                </tr>
            </table>
        </form>
    </div>
</div>

增加自己的验证类型（仔细参数param的传递）

$.extend($.fn.validatebox.defaults.rules, {
    eqPwd : {
        validator : function(value, param) {
            return value == $(param[0]).val();
        },
        message : '密码不一致！'
    }
});