SharePoint 2016 - JSLink - 保存不与IE一起使用但与Chrome一起使用

时间:2017-10-26 06:16:23

标签: javascript sharepoint

我在我的SP上使用的JSLINK有一个奇怪的行为。如果我更改了JSLINK正在转换的字段的值,那么表单的保存按钮不能与IE一起使用,但Chrome也没关系。

该字段是Multiline纯文本的类型。我正在使用它来保存一些JSON。

以下是代码:

(function() {
    var loaded = false;

    var repeaterFormArr = [
        "<input type='text' id='nameInput' placeholder='Nom complet' class='ms-long ms-spellcheck-true intervenantsBox' required>",
        "<input type='text' id='addressInput' placeholder='Adresse' class='ms-long ms-spellcheck-true intervenantsBox'>",
        "<input type='text' id='phoneInput' placeholder='Telephone' class='ms-long ms-spellcheck-true intervenantsBox'>",
        "<input type='text' id='emailInput' placeholder='Email' pattern=\"[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$\" title='xxx@yyy.zzz' class='ms-long ms-spellcheck-true intervenantsBox'>",
        "<select name='typeActor' id='typeActor' class='ms-long intervenantsBox'><option value='plaignant'>Plaignant</option><option value='avocat'>Avocat</option><option value='DPO'>DPO</option><option value='demandeur'>Demandeur</option></select>",
    ];

    var ControlRenderModeIntervenant;
    var repeaterFormValues = [];

    function includeCss() {
        if (loaded) return;
        loaded = true;
        var link = document.createElement('link');
        link.href = _spPageContextInfo.siteAbsoluteUrl + '/Style%20Library/CSS/intervenantsEditCustom.css';
        link.rel = 'stylesheet';
        document.head.appendChild(link);
    }

    // This function provides the rendering logic
    function IntervenantsRepeaterFiledViewTemplate(ctx) {
        ControlRenderModeIntervenant = ctx.ControlMode;

        if (ctx.CurrentItem[ctx.CurrentFieldSchema.Name] && ctx.CurrentItem[ctx.CurrentFieldSchema.Name] != '[]') {
            var fieldValue = ctx.CurrentItem[ctx.CurrentFieldSchema.Name].replace(/&quot;/g, "\"").replace(/(<([^>]+)>)/g, "");
            repeaterFormValues = JSON.parse(fieldValue);
        }

        return GetRenderHtmlRepeaterValuesIntervenants();
    }

    // This function provides the rendering logic
    function IntervenantsRepeaterFiledEditFTemplate(ctx) {
        var field = ctx.CurrentFieldSchema,
            encodedName = field.Name + '_' + field.Id + '_$NumberField';

        ControlRenderModeIntervenant = ctx.ControlMode;

        var formCtx = SPClientTemplates.Utility.GetFormContextForCurrentField(ctx);

        if (formCtx.fieldValue) {
            repeaterFormValues = JSON.parse(formCtx.fieldValue);
        }

        // Register a callback just before submit.
        ctx.FormContext.registerGetValueCallback(field.Name, function() {
            return JSON.stringify(repeaterFormValues);
        });
        ctx.FormContext.registerInitCallback(field.Name, function() {
            document.getElementById('innerFormIntervenants').addEventListener('submit', function(evt) {
                evt.preventDefault();
                AddIntervenant();
                return false;
            });
            var deleteLinks = document.getElementsByClassName('delete-link');
            if (deleteLinks.length > 0) {
                for (var i = 0; i < deleteLinks.length; i++) {
                    deleteLinks[i].addEventListener("onclick", function(evt) {
                        evt.preventDefault();
                        DeleteItem(deleteLinks[i].getAttribute('data-myAttri'));
                        return false;
                    });
                }
            }
        });
        // formCtx.registerGetValueCallback(formCtx.fieldName, function() {
        //     return JSON.stringify(repeaterFormValues);
        // });


        var HTMLViewTemplate = "<form id='innerFormIntervenants'>{Controls}<div><input type='submit' value='Add' style='margin-left:0'></div><br/><div id='divRepeaterValues'>{RepeaterValues}</div><br/></form>";
        var returnHTML = "";

        for (index = 0; index < repeaterFormArr.length; ++index) {
            returnHTML += repeaterFormArr[index];
        }

        returnHTML = HTMLViewTemplate.replace(/{Controls}/g, returnHTML);
        returnHTML = returnHTML.replace(/{RepeaterValues}/g, GetRenderHtmlRepeaterValuesIntervenants());

        return returnHTML;
    }

    function GetRenderHtmlRepeaterValuesIntervenants() {

        var index;
        var innerindex;
        var HTMLItemsTemplate = "<table width='600px' style='border:1px solid #ababab;'>{Items}</table>";
        var HTMLItemTemplate = "<tr>{Item}</tr>";
        var HTMLValueTemplate = "<td>{Value}</td>";

        if (ControlRenderModeIntervenant == SPClientTemplates.ClientControlMode.EditForm || ControlRenderModeIntervenant == SPClientTemplates.ClientControlMode.NewForm) {
            HTMLItemTemplate = "<tr>{Item}<td><a class='delete-link' data-myAttri='{Index}' href='#'><img src='/SiteAssets/IMG/user-delete.png' class='deleteUserButton'/></a></td></tr>";
        }

        var returnHTML = "";
        var tempValueHtml;


        for (index = 0; index < repeaterFormValues.length; ++index) {
            tempValueHtml = "";

            for (innerindex = 0; innerindex < repeaterFormValues[index]["Intervenant"].length; ++innerindex) {
                tempValueHtml += HTMLValueTemplate.replace(/{Value}/g, repeaterFormValues[index]["Intervenant"][innerindex]["Value"]);
            }

            returnHTML += HTMLItemTemplate.replace(/{Item}/g, tempValueHtml);
            returnHTML = returnHTML.replace(/{Index}/g, index);
        }

        if (repeaterFormValues.length) {
            returnHTML = HTMLItemsTemplate.replace(/{Items}/g, returnHTML);
        }

        return returnHTML;
    }

    function AddIntervenant() {

        var innerFormIntervenants = document.getElementById('innerFormIntervenants');

        if (innerFormIntervenants.checkValidity()) {

            var index;
            var tempRepeaterValue = [];

            for (index = 0; index < innerFormIntervenants.length; index++) {

                if (innerFormIntervenants[index].type != "submit" && innerFormIntervenants[index].type != "button" && innerFormIntervenants[index].type != "reset") {
                    tempRepeaterValue.push({
                        "ID": innerFormIntervenants[index].id,
                        "Value": innerFormIntervenants[index].value
                    });

                    innerFormIntervenants[index].value = "";
                }
            }

            repeaterFormValues.push({ "Intervenant": tempRepeaterValue });

            document.getElementById("divRepeaterValues").innerHTML = GetRenderHtmlRepeaterValuesIntervenants();
        }
    }

    function DeleteItem(index) {
        repeaterFormValues.splice(index, 1);
        document.getElementById("divRepeaterValues").innerHTML = GetRenderHtmlRepeaterValuesIntervenants();
    }

    var overrideCtx = {};
    overrideCtx.Templates = {};
    overrideCtx.Templates.OnPreRender = includeCss;
    overrideCtx.Templates.Fields = {
        myCustomField: {
            View: IntervenantsRepeaterFiledViewTemplate,
            DisplayForm: IntervenantsRepeaterFiledViewTemplate,
            NewForm: IntervenantsRepeaterFiledEditFTemplate,
            EditForm: IntervenantsRepeaterFiledEditFTemplate
        }
    };

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();

在Debug中,我可以看到调用了回调函数。然后它进入JS的SharePoint内部以保存项目。但保存按钮只是灰色,然后没有任何附加。

0 个答案:

没有答案