Dynamics CRM 表单的客户端大小操作

Question

原问题：

我正在尝试创建一些 javascript 以添加到 Microsoft Dynamics CRM 中的表单。

我有以下脚本，我已将其分配给表单 onLoad 事件：

$(document).ready(function () {

    if ($('#CheckBox1').is(':checked')) {

        $('<div id="div2">Some Data Here</div>').insertAfter("#Div1");

        $('#divHeader').height('+=25px');

        var newtop = $('#divMain').position().top + 25;
        $('#divMain').css('top', newtop + 'px');
    }

});

以下是表格的精简版 HTML

<div id="divHeader">
    <div id="Div1"></div>
</div>

<div id="divMain"></div>

加载表单时，应该发生的是：

<div id="divHeader">
    <div id="Div1"></div>
    <div id="Div2">Some Data Here</div>
</div>

<div id="divMain"></div>

这确实发生了。但是，问题是 divHeader 和 divMain 没有调整大小，所以新添加的 Div2 除非用户在 divHeader 中向下滚动才能看到。

如果我添加警报：

$(document).ready(function () {

    if ($('#CheckBox1').is(':checked')) {

        alert("Random alert");

        $('<div id="div2">Some Data Here</div>').insertAfter("#Div1");

        $('#divHeader').height('+=25px');

        var newtop = $('#divMain').position().top + 25;
        $('#divMain').css('top', newtop + 'px');
    }

});

整个过程完美无缺。我如何在没有警报的情况下让它工作？

更新 1：

setTimeout 也可以代替 alert.

$(document).ready(function () {

    setTimeout(function () {
        if ($('#CheckBox1').is(':checked')) {

            $('<div id="div2">Some Data Here</div>').insertAfter("#Div1");

            $('#divHeader').height('+=25px');

            var newtop = $('#divMain').position().top + 25;
            $('#divMain').css('top', newtop + 'px');

        }
    }, 5000);

});

看来 $(document).ready 似乎没有正确完成它的工作。在这两种情况下 alert 或 setTimeout，在调整 div 标签大小之前，表单有额外的时间来完成加载。

Answer 1

使用 Jquery 插件 Wait until element exists 插件将等待元素出现在 DOM 中，然后触发给定的处理函数。

$(document).ready(function () {

    $('#CheckBox1').waitUntilExists(function () { //  OR $('#Div1').waitUntilExists(function ()
        if ($('#CheckBox1').is(':checked')) {

            $('<div id="div2">Some Data Here</div>').insertAfter("#Div1");

            $('#divHeader').height('+=25px');

            var newtop = $('#divMain').position().top + 25;
            $('#divMain').css('top', newtop + 'px');

        }
    });

});

Answer 2

完全不支持在 Dynamics CRM 中进行 DOM 操作。参见 Do Not Access the DOM。

您将需要使用受支持的方法来操作表单（即 Xrm.Page）。虽然无法在 CRM 表单上动态 add/remove 内容，但您可以显示和隐藏元素。据我了解，如果表单上的布尔字段（显示为复选框）为真，您将尝试显示一些内容。

这可以通过将您想要 show/hide 的控件添加到您的表单来完成（该控件可以是标准 CRM 字段之一，也可以是自定义 Web 资源，具体取决于您的要求）。然后，当您的布尔属性更改其值时，您将 JavaScript 写入 show/hide 有问题的控件：

function onload() {
    Xrm.Page.getAttribute("booleanField").addOnChange(showMoreStuffInHeader);
    showMoreStuffInHeader();
}

function showMoreStuffInHeader() {
    var visible = Xrm.Page.getAttribute("booleanField").getValue();
    Xrm.Page.getControl("someDataHereControl").setVisible(visible);
}

Dynamics CRM 表单的客户端大小操作

Client-size manipulation of a Dynamics CRM Form

html

javascript

jquery

dynamics-crm

dynamics-crm-2011