如何将自定义列表的方向从垂直方向变为水平方向

Question

我有一个自定义列表 Web 部件，我想在自定义页面上显示团队成员。我不想垂直列出每个名称（名称只是我要显示的字段），我想先水平显示名称，然后垂直显示以填充页面上的区域。

这仅供显示，通常只有 5 到 50 条记录需要显示。我现在可以使用代码，但我需要在不影响 SharePoint 中的任何其他 table 的情况下增加列之间的间距。我的代码是：

<script type="text/javascript">
        SP.SOD.executeFunc('sp.js', 'SP.ClientContext', DisplayMembers);
        function DisplayMembers()
        {retrieveListItems();}

var sectionName = GetUrlKeyValue('Section');
var siteUrl = _spPageContextInfo.siteServerRelativeUrl ;
var collListItem
//console.log("Section="+sectionName);

function retrieveListItems() {
console.log("retrieveListItems");
    var clientContext = new SP.ClientContext.get_current();
    var oList = clientContext.get_web().get_lists().getByTitle('Contacts');
    var camlQuery = new SP.CamlQuery();
    camlQuery.set_viewXml('<View><Query><Where><Eq><FieldRef Name=\'Section\'/><Value Type=\'Text\'>'+ sectionName +'</Value></Eq></Where></Query></View>'); 

    collListItem = oList.getItems(camlQuery);
    clientContext.load(collListItem);
    clientContext.executeQueryAsync(Function.createDelegate(this, this.onmemQuerySucceeded),
                                    Function.createDelegate(this, this.onmemQueryFailed));
}
function onmemQuerySucceeded(sender, args) {
    var listItemEnumerator = collListItem.getEnumerator();
    var displaytable = "<H1>Members</H1><table>"
    var tblWidth = 3;
    var currentWidth = 1;
    while (listItemEnumerator.moveNext()) {
        //console.log("counter currentWidth="+currentWidth);

        var oListItem = listItemEnumerator.get_current();
        //console.log("Name="+oListItem.get_item('Title'));
        if (currentWidth == 1){
            displaytable +="<tr><td>" + oListItem.get_item('Title') +"</td><td>"
        } else if (currentWidth < tblWidth){
            displaytable += oListItem.get_item('Title') +"</td><td>"
        } else {
            displaytable += oListItem.get_item('Title') +"</td><tr>"
        }
        if (currentWidth == tblWidth) {
            currentWidth = 1;
        } else {
            currentWidth++;
        }
    }
    displaytable+="</table>"
    $("#pid").html(displaytable)
}
function onmemQueryFailed(sender, args) {
alert('Error: ' + args.get_message() + '\n' + args.get_stackTrace());
}
</script>
<p id="pid"></p>

Answer 1

我相信你需要的是flexbox。将您的自定义 CSS 注入您的 SharePoint 页面，您就可以开始了。

这里有一些可能有用的链接

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

https://docs.microsoft.com/en-us/sharepoint/dev/solution-guidance/use-css-to-brand-pages

Answer 2

@Steve Harvancik,

我相信您正在寻找弹性布局。下面的flex box是否满足要求？

.main {  
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  background-color: rgba(86, 61, 124, 0.15);
  border: 1px solid rgba(86, 61, 124, 0.15);  
}

.item {
  background-color: rgba(86, 61, 124, 0.15);
  padding: 0.5rem;  
}

<div class="main">
  <div class="item">Flex item 1</div>
  <div class="item">Flex item 2</div>
  <div class="item">Flex item 3</div>
  <div class="item">Flex item 4</div>
  <div class="item">Flex item 5</div>
  <div class="item">Flex item 6</div>
  <div class="item">Flex item 7</div>
  <div class="item">Flex item 8</div>     
</div>

BR

如何将自定义列表的方向从垂直方向变为水平方向

How can I shift the orientation of a custom list from vertical to horizontal

javascript

sharepoint-2013