javascript - Sharepoint 编辑按钮，允许用户编辑 Web 部件列表中的数据

Question

我在 SharePoint 中有一个列表，其中包含不同的列表列(生日、地址等)

我想向 Vue.js 中的此 Edit 按钮添加一个功能，该功能应允许用户直接在 Web 部件中编辑列表列。

这是我创建按钮的方法:

<div class="row" >
<button style="margin-left:1000px" @click="EditMode">Edit</button>
</div>

这是我的函数(只是对列表 html 的引用):

methods: {
    EditMode: function () {   
        window.open("https://MyLink", "_blank");    
    },
}

我遇到的问题是我不知道在 EditMode 函数中写什么。我想要实现的是，列表的列应该以用户可以编辑它们的方式显示在文本(进度、位置、地址等)旁边。 (就像手动打开列表时一样)

Answer 1

您可以尝试使用模式对话框打开编辑表单，示例演示。

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script type="text/javascript" src="https://unpkg.com/vue@2.0.3/dist/vue.js"></script>
    <script type="text/javascript">
        //jQuery.noConflict();
        $(function () {
            new Vue({
                el: '#Vue_App',
                methods: {
                    EditMode: function (e) {
                        e.preventDefault();
                        var options = {
                            // define a URL (and yes, you can pass params to that URL) or reference your HTML object, but NOT both!
                            url: '/Lists/SourceList/EditForm.aspx?ID=1&IsDlg=1',
                            tite: 'Modal Title',
                            allowMaximize: false,
                            showClose: true,
                            width: 430,
                            height: 230,
                            dialogReturnValueCallback: myCallbackFunction
                        };
                        SP.UI.ModalDialog.showModalDialog(options);
                        return false;
                    }
                }
            })
            // The callback function expects a parameter of type SP.UI.DialogResult
            function myCallbackFunction(result) {
                switch (result) {
                    case SP.UI.DialogResult.OK:
                        alert("You clicked OK");
                        // reload data as necessary here
                        break;
                    case SP.UI.DialogResult.cancel:
                        alert("You clicked cancel or close.");
                        break;
                }
            }
        })

    </script>
    <div id="Vue_App">
        <button v-on:click="EditMode">EditMode</button>
    </div>