javascript - 如何在共享点列表项中添加状态“活动”或“非活动”。通过使用共享点设计器？

Question

我有两个选择下拉菜单，第一个从共享点列表中获取项目，当我单击移动按钮时，所选项目移动到第二个下拉列表，当我单击共享点列表的保存按钮状态时动态更改。如果项目在第一个下拉列表中状态为“活动”。如果项目在第二个下拉项目状态是“非活动”。请告诉我我该怎么做。？

我只做了这个代码.soo，请告诉我我该怎么做？

$(document).ready(function(){
ExecuteOrDelayUntilScriptLoaded(retrieveListItems,'sp.js');
});



var ItemContainer = { ItemList: [] };
 function retrieveListItems() {
    var clientContext = new SP.ClientContext.get_current();
    var oList = clientContext.get_web().get_lists().getByTitle('States');
    var camlQuery = new SP.CamlQuery();
 //   camlQuery.set_viewXml('<View><RowLimit>100</RowLimit></View>');         
    this.collListItem = oList.getItems(camlQuery);
    clientContext.load(collListItem);
    clientContext.executeQueryAsync(
        Function.createDelegate(this, this.onListDataLoadQuerySucceeded),
        Function.createDelegate(this, this.onListDataLoadQueryFailed));
}

function onListDataLoadQuerySucceeded(sender, args) { 

    var listItemInfo = '';
    var listItemEnumerator = collListItem.getEnumerator();
    while (listItemEnumerator.moveNext()) {
        var oListItem = listItemEnumerator.get_current();
        var tempItem = { ID: oListItem.get_id(), Value: 
oListItem.get_item('Title') };
        ItemContainer.ItemList.push(tempItem);
    }
   fillDropDown();
  }

function onListDataLoadQueryFailed(sender, args) {
    alert('Request failed. ' + args.get_message() + '\n' + 
args.get_stackTrace());
}

 function fillDropDown() {
    var ddlCategory = document.getElementById('sct1');
    if (ddlCategory != null) {
        for (var i = 0; i < ItemContainer.ItemList.length; i++) {
            var theOption = new Option;
            theOption.value = ItemContainer.ItemList[i].ID;
            theOption.text = ItemContainer.ItemList[i].Value;
            ddlCategory.options[i] = theOption;
        }
    }
}



//for button function



   $(function(){function moveitems(origin,dest){
$(origin).find(':selected').appendTo(dest);
}
$("#move").click(function(){
moveitems('#sct1','#sct2');
});
});   

我想要这种类型

标签： javascriptjquerysharepoint-2013sharepoint-jsom

Answer 1

要求似乎与我测试的这个要求非常接近，您可以查看我的测试解决方案。

<select id='selectItems' multiple='multiple'></select>
    <!-- Bootstrap CSS -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="/SiteAssets/MultiSelectjQLib/multi-select.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <!-- Bootstrap JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
    <script src="/SiteAssets/MultiSelectjQLib/jquery.multi-select.js"></script>
    <script type="text/javascript">
        ExecuteOrDelayUntilScriptLoaded(custom, "sp.js");
        function custom() {
            var clientContext = new SP.ClientContext.get_current();
            //update list as your list
            var list = clientContext.get_web().get_lists().getByTitle("MultiSelectTest");
            //get the first item only, you may update the logic per you requirement
            var items = list.getItems(SP.CamlQuery.createAllItemsQuery());
            clientContext.load(items);
            clientContext.executeQueryAsync(
                function () {
                    var listItemEnumerator = items.getEnumerator();
                    while (listItemEnumerator.moveNext()) {
                        var oListItem = listItemEnumerator.get_current();
                        var _Title = oListItem.get_item('Title');
                        var _Status = oListItem.get_item('Status');
                        var _ID = oListItem.get_item('ID');
                        if (_Status) {
                            $('#selectItems').append($("<option></option>").attr("value", _ID).text(_Title));
                        } else {
                            $('#selectItems').append($("<option selected></option>").attr("value", _ID).text(_Title));
                        }
                    }
                    $('#selectItems').multiSelect({
                        afterSelect: function (values) {
                            alert("Select value: " + values);
                            var oListItem = list.getItemById(values);
                            oListItem.set_item('Status', false);
                            oListItem.update();

                            clientContext.executeQueryAsync(
                               function () {
                                   alert('update complete');
                               },
                                function (sender, args) {
                                    console.log(args);
                                }
                            );
                        },
                        afterDeselect: function (values) {
                            alert("Deselect value: " + values);
                            var oListItem = list.getItemById(values);
                            oListItem.set_item('Status', true);
                            oListItem.update();

                            clientContext.executeQueryAsync(
                               function () {
                                   alert('update complete');
                               },
                                function (sender, args) {
                                    console.log(args);
                                }
                            );
                        }
                    })
                },
                    function (sender, args) {
                        console.log(args);
                    })
        }
    </script>