Sharepoint 編輯按鈕，允許用戶從 Web 部件的列表中編輯數據

Question

我在 SharePoint 中有一個列表，其中包含不同的列表列（生日、地址等）

我想將 function 添加到 Vue.js 中的此Edit按鈕中，該按鈕應允許用戶直接在 Web 部件中編輯列表列。

這是我創建按鈕的方式：

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

這是我所擁有的 function （只是對列表中 html 的引用）：

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

我遇到的問題是我不知道在EditMode function 中寫什么。 我想要實現的是，在文本（進度、Position、地址等）旁邊，列表的列應該以用戶可以編輯的方式出現。 （就像手動打開列表一樣）

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>