jquery - 使用客户端验证生成 Openerp 二维码

Question

我想根据字段卷号生成一个二维码，并使用 JavaScript 文件(客户端验证)将其显示在 ID 名为“vyas_qrcode”的 div 容器中。

1. 生成二维码的逻辑在js文件(qrcode_js.js)里面的start: function()里面，this.$el.append()。在 chromes 控制台中输入时，附加内的代码可以工作，但在此文件中显示错误，提示“<”意外。

2. 我尝试将此逻辑直接放入 xml 中，但它甚至在加载页面和 dom 之前就加载，因此生成了 qrcode，但值为空。

3. 我知道我应该将它放在“start: function() ”中，它指的是正在加载的页面和 DOM，但不确定如何从那里开始。

   <

4. 我还想知道如何验证字段“名称”并使其包含 5 到 10 个字符，并且不应包含符号。我不想从 python 文件中执行此操作，而是从客户端执行此操作，无论是在“init: function()”还是“start: function()”中。

5. 感谢大家抽出宝贵的时间来帮助我。

我创建的 3 个文件是，

from osv import osv,fields

    class qrcode_clientside(osv.osv):

        _name = 'qrcode.clientside' # Name of the table.

        _columns = {

        'name': fields.char("Name", size=64, requried=True),    # Name of the person. The name should be between 5 and 10 characters and must not contain symbols . How to do this with the javascript file(qrcode_js.js)
        'roll_number': fields.integer("Roll Number", required=True),    # Roll number of the person.
        }

然后是xml文件qrcode_js.xml

    <?xml version="1.0" encoding="utf-8" ?>
<openerp>
    <data>

        <record model="ir.actions.act_window" id="action_qrcode_clientside">
            <field name="name">QRCode Generation</field>
            <field name="res_model">qrcode.clientside</field>
            <field name="view_type">form</field>
            <field name="view_mode">tree,form</field>
        </record>

        <menuitem name="QR Code JS" id="qrcode_js_menu" sequence="10" />
        <menuitem name="QR Code Side Menu" id="qrcode_js_sidemenu" parent="qrcode_js_menu" sequence="3" />
        <menuitem name="QR Code Generator" id="qrcode_js_finalmenu" parent="qrcode_js_sidemenu" sequence="4" action="action_qrcode_clientside" />

        <record model="ir.ui.view" id="view_qrcode_clientside_form" >
            <field name="name">qrcode.clientside Form View</field>
            <field name="model">qrcode.clientside</field>
            <field name="arch" type="xml">
                <form string="QRCode Clientside Generation" version="7.0">
                    <sheet>
                        <group>
                            <group>
                                <field name="name" /> <!-- The name should be between 5 and 10 characters and must not contain symbols . How to do this with the javascript file(qrcode_js.js).-->
                                <field name="roll_number" class="roll_number_class" />
                             </group>
                             <group>
                                <div id="vyas_qrcode" width="100" height="75" >    <!-- This is where the QR Code should be generated. It should have the value of the Roll number of the person. -->
                                        QR Code Placeholder
                                </div>
                            </group>
                    </group>
                     </sheet>
                </form>
            </field>
        </record>


        <record model="ir.ui.view" id="view_qrcode_clientside_tree" >
            <field name="name">qrcode.clientside Tree View</field>
            <field name="model">qrcode.clientside</field>
            <field name="arch" type="xml">
                <field name="name" />
                <field name="roll_number" />
            </field>
        </record>


    </data>
</openerp>

然后是 Javascript 文件 qrcode_js.js 。

openerp.js_qrcode_vyas = function(instance){

instance.js_qrcode_vyas = {};

alert("Inside the main function ");

instance.js_qrcode_vyas.qrcode_clientside = instance.web.Widget.extend({

init: function(parent, name){
    console.log("qrcode_clientside page has been loaded.");
},

start: function(){
    this.$el.append('
        <script type="text/javascript" src="js_qrcode_vyas/static/src/js/jquery.qrcode.min.js"></script>
        <script>
                $(document).ready(function(){
                        rollnumber_from_field = $(".roll_no_class").text();     // Getting the value of Roll Number from the roll_number field.
                        qroptions = { width: 40,height: 40, text:rollnumber_from_field  , size: 100, render:"image" }; // To pass arguments to get the QR code.
                        setTimeout(function(){$("#vyas_qrcode").qrcode(qroptions);}, 4000); // Generating the QR code and displaying it after a delay of 4 seconds.
                        });

        </script>
        ');

},
});
};

Answer 1

您不需要附加 javascript 标签，您应该能够执行以下操作:

start: function(){
                    rollnumber_from_field = this.val();     // Getting the value of Roll Number from the roll_number field.
                    qroptions = { width: 40,height: 40, text:rollnumber_from_field  , size: 100, render:"image" }; // To pass arguments to get the QR code.
                    setTimeout(function(){$("#vyas_qrcode").qrcode(qroptions);}, 4000); // Generating the QR code and displaying it after a delay of 4 seconds.
                    });
                    ...

(我没有测试过)。看看其他一些小部件。或者看教程:http://odoo-80.readthedocs.org/en/latest/howtos/web.html#widgets-basics

此外，请确保您的 vyas_qrcode.js 文件包含在您的 __openerp__.py 文件中。