从共享点列表格式化SP服务表的最佳方法

时间:2018-08-02 13:46:39

标签: javascript html sharepoint spservices

我要从SharePoint列表中引入数据,并按“客户端”过滤列表。在大多数情况下,将传输多条数据。我希望能够分离信息并设置其格式。我知道CSS是答案,但想知道这样做的最佳实践是什么。

另一个问题是,当从列表中获取联系信息时,我想引入在列表中显示的Microsoft联系人样式。有什么办法做到这一点。

谢谢。

<head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">    
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/css/dataTables.jqueryui.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>    

<script src="https://www.datatables.net/release-datatables/extensions/ColReorder/js/dataTables.colReorder.js"></script>
<!--SPServices Javascript-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices-2014.02.min.js"></script>
<!--SpServices JavaScript get items from list 'files'-->
<script language="javascript" type="text/javascript">
  $(document).ready(function() {
     var myQuery =
      "<Query>" +
      "<Where><Eq><FieldRef Name='Client'/><Value Type='Text'>South West Water H5O</Value></Eq></Where>"+
      "<OrderBy>" +
      "<FieldRef Name='Client' />" +
      "</OrderBy>" +
      "</Query>";
    $().SPServices({
      webURL: "https://ext.kier.group/teams/Utilities/",
      operation: "GetListItems",
      async: false,
      listName: "UtilitiesContracts",
      CAMLQuery: myQuery,
      CAMLRowLimit: 100,
      completefunc: function(xData, Status) {
        var liHtml = "<tbody>";
        $(xData.responseXML).SPFilterNode("z:row").each(function() {
          liHtml = liHtml + "<tr><td>" + $(this).attr("ows_ContractDetailPage").substring(8) + "</td></tr><tr><td><img src='" + $(this).attr("ows_ClientLogo").split(', ')[1] + "' /></td></tr><tr><td>" + $(this).attr("ows_Client") + "</td></tr><tr><td>" + $(this).attr("ows_ContractDescription") + "</td></tr><tr><td>" + $(this).attr("ows_OperationalContacts") + "</td></tr><tr><td>" + $(this).attr("ows_CommercialContatcs") + "</td></tr><tr><td>" + $(this).attr("ows_ContractDetailPage").substring(8) + "</td></tr><tr><td>" + $(this).attr("ows_OperationalPage").substring(8) + "</td></tr>";
        });
        liHtml += "</tbody>";
        $("#Contracts").append(liHtml);
      }
    });
    $('#Contracts').DataTable({
      "dom": 'Rlfrtip'
    });
  });
</script>

<style>
#Contracts {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}
</style>

</head>

<body>
<div id = "Contracts"/>

</body>

0 个答案:

没有答案