easyui中 form combobox datagrid 等有回显功能的对象方法 onBeforeLoad 获取当前对象

本文介绍如何使用jQuery EasyUI实现表单验证及Combobox数据加载。通过示例代码展示了如何设置表单验证规则，并在提交时进行验证。此外，还解决了Combobox加载数据时的问题，通过onBeforeLoad函数正确传递参数。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>Validate Form on Submit - jQuery EasyUI Demo</title>
        <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
        <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
        <link rel="stylesheet" type="text/css" href="../demo.css">
        <script type="text/javascript" src="../../jquery.min.js"></script>
        <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
    </head>
    <script>
        $('.easyui-combobox').combobox({
            method: 'get',
            url: 'baseDictAction_execute?dict_type_code=' + $(this).prop('id'),

            valueField: 'dict_id',

            textField: 'dict_item_name',
        });

        function submitForm() {
                $('#customer_add').form('submit', {
                    onSubmit: function() {
                        return $(this).form('enableValidation').form('validate');
                    }
                });
            }

    </script>

    <body class="easyui-panel" >


        <div >
            <div style="padding:10px 60px 20px 60px">
                <form id="customer_add" class="easyui-form" method="post" data-options="novalidate:true" enctype="multipart/form-data">
                    <table cellpadding="5">
                        <tr>
                            <td>客户名称:</td>
                            <td><input class="easyui-textbox" type="text" name="cust_name" data-options="required:true"></input>
                            </td>
                            <td>客户级别:</td>
                            <td>
                                <input id="006" class="easyui-combobox" name="cust_level"  value="xxxxxxx"/>
                            </td>
                        </tr>
                        <tr>
                            <td>信息来源:</td>
                            <td>
                                <input id="009" class="easyui-combobox" name="cust_source" />
                            </td>
                            <td>客户行业:</td>
                            <td>
                                <input id="001" class="easyui-combobox" name="cust_industry" />
                            </td>
                        </tr>
                        <tr>
                            <td>固定电话:</td>
                            <td><input class="easyui-textbox" type="text" name="cust_phone" data-options="required:true"></input>
                            </td>
                            <td>移动电话:</td>
                            <td><input class="easyui-textbox" type="text" name="cust_mobile" data-options="required:true"></input>
                            </td>
                        </tr>
                        <tr>
                            <td>图片上传:</td>
                            <td><input type="file" name="photo" /></td>
                        </tr>

                    </table>

                </form>
                <div style="padding:5px">
                    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()">保存</a>

                </div>
            </div>
        </div>

    </body>

</html>

如以上代码,想同时加载3个combobox的数据,发送请求根据dict_type_code查询数据字典后回显,由于id为元素属性,必须获得当前对象, 故使用$(this).prop(‘id’),但发送请求参数为undefined.

因为this对象并非当前元素而是window

解决办法:
利用onBeforeLoad 添加参数

    $(function(){

        $('.easyui-combobox').combobox({

            url: "${pageContext.request.contextPath}/BaseDictAction",

            valueField: 'dict_id',

            textField: 'dict_item_name',

            editable:false,

            onBeforeLoad:function(param){
                    param.dict_type_code=$(this).prop('id');
                }

        });
    });