在共享点列表中拖放时更新状态

Question

我使用 Nestable js 拖放我的列表项。并且拖放在 UI 中工作正常。但我需要的是，我想在删除项后更新列表项的状态..我怎样才能实现这使用javascript..

供 Nestable js 参考https://codepen.io/Mestika/pen/vNpvVw

接下来是检索列表项，如波纹管代码

var ListEnumerator = this.myItems.getEnumerator();

        while (ListEnumerator.moveNext()) {

            var currentItem = ListEnumerator.get_current();
            var status = currentItem.get_item('Status');

            if (status == "Planned") {
                var templateString = '<li class="dd-item"  ref="' + currentItem.get_item('ID') + '"><div class="dd-handle"><h6>' + currentItem.get_item('Title') + '</h6><span class="time"><strong>Start: ' + new Date(currentItem.get_item('PlanStart')).toDateString() + '</strong><br/><strong>End: ' + new Date(currentItem.get_item('PlanEnd')).toDateString() + '</strong></span><p>' + currentItem.get_item('TaskDescription') + '</p><strong>Assigned To :</strong><p>' + currentItem.get_item('AssignedTo').get_lookupValue() + '</p></div></li>';
                $('#gridprocess').append(templateString);
            }
            else if (status == "In Process") {
                var templateString = '<li class="dd-item"  ref="' + currentItem.get_item('ID') + '"><div class="dd-handle"><h6>' + currentItem.get_item('Title') + '</h6><span class="time"><strong>Start: ' + new Date(currentItem.get_item('PlanStart')).toDateString() + '</strong><br/><strong>End: ' + new Date(currentItem.get_item('PlanEnd')).toDateString() + '</strong></span><p>' + currentItem.get_item('TaskDescription') + '</p><strong>Assigned To :</strong><p>' + currentItem.get_item('AssignedTo').get_lookupValue() + '</p></div></li>';

                $('#gridinprogress').append(templateString);


            }
            else if (status == "Completed") {
                var templateString = '<li class="dd-item"  ref="' + currentItem.get_item('ID') + '"><div class="dd-handle"><h6>' + currentItem.get_item('Title') + '</h6><span class="time"><strong>Start: ' + new Date(currentItem.get_item('PlanStart')).toDateString() + '</strong><br/><strong>End: ' + new Date(currentItem.get_item('PlanEnd')).toDateString() + '</strong></span><p>' + currentItem.get_item('TaskDescription') + '</p><strong>Assigned To :</strong><p>' + currentItem.get_item('AssignedTo').get_lookupValue() + '</p></div></li>';

                $('#gridcomplete').append(templateString);
            }
            else if (status == "Hold") {
                var templateString = '<li class="dd-item"  ref="' + currentItem.get_item('ID') + '"><div class="dd-handle"><h6>' + currentItem.get_item('Title') + '</h6><span class="time"><strong>Start: ' + new Date(currentItem.get_item('PlanStart')).toDateString() + '</strong><br/><strong>End: ' + new Date(currentItem.get_item('PlanEnd')).toDateString() + '</strong></span><p>' + currentItem.get_item('TaskDescription') + '</p><strong>Assigned To :</strong><p>' + currentItem.get_item('AssignedTo').get_lookupValue() + '</p></div></li>';

                $('#gridincomplete').append(templateString);
            }

        }

这里li标签用于

                                       <div class="dd">
                                            <ol class="dd-list" id="gridprocess" >

                                            </ol>
                                        </div>

如何在拖放时更新状态？ 请给出代码来做到这一点..

Answer 1

最后我实现了上述问题。 使用以下代码......首先我将 ID 设置为类名 dd 作为 ddprocess，如下所示

 <div class="dd" id="ddprocess">
      <ol class="dd-list" id="gridprocess">

      </ol>
 </div>

接下来我写了一个函数当 id ddprocess 发生变化时，我得到每个项目的 id 并将 ID 传递给更新函数

$('#ddprocess').on('change', function () {

            // JSON To get the list item in Process
            var $this = $(this);
            var serializedData = window.JSON.stringify($($this).nestable('serialize'));
            // console.log("sData:", serializedData)

            // convert the JSON into Object
            var obj = JSON.parse(serializedData);
            obj.forEach(myFunction);
            function myFunction(item, index) {
                var eachid = item.id;
                // console.log("Item-id", eachid);//you will get id 
                Updatetoprocess(eachid);
            }

        });

接下来更新功能是将状态更新为 ddprocess id 中每个项目的计划......

function Updatetoprocess(eachid) {
            SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function () {
                var siteurl = "https://abb.sharepoint.com/sites/IAPI-SOP";
                var context = new SP.ClientContext(siteurl);
                var olistnew = context.get_web().get_lists().getByTitle("TaskList");
                var listitem = olistnew.getItemById(eachid);

                listitem.set_item('Status', 'Planned');
                listitem.update();
                context.load(listitem);
                context.executeQueryAsync(function () {
                    alert("Items Updated successfully");
                },
                    function () { console.log("failure") }
                )

            });
        }

谢谢