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更改时，我将获得Every Item ID并将ID传递给Update函数

$('#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") }
                )

            });
        }

谢谢

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

1 个答案: