Jquery无法在Sharepoint脚本编辑器上工作
我正在处理一个项目，我必须在引导数据表中显示sharepoint列表。列表显示正确，但我为引导数据表添加了类，该表未显示为数据表（无排序和搜索）。我总是包含一个jquery脚本，它使表头上的复选框像一个集合复选框一样工作，但它也不工作。我在sharepoint之外尝试过同样的脚本，它工作得非常好。这是我的密码：Jquery无法在Sharepoint脚本编辑器上工作,jquery,html,bootstrap-4,sharepoint-online,Jquery,Html,Bootstrap 4,Sharepoint Online,我正在处理一个项目，我必须在引导数据表中显示sharepoint列表。列表显示正确，但我为引导数据表添加了类，该表未显示为数据表（无排序和搜索）。我总是包含一个jquery脚本，它使表头上的复选框像一个集合复选框一样工作，但它也不工作。我在sharepoint之外尝试过同样的脚本，它工作得非常好。这是我的密码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design Bootstrap</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">
<!-- Bootstrap core CSS -->
<link href="https://lotusbetaanalytics.sharepoint.com/sites/Globodox/sitepages/mdb/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="https://lotusbetaanalytics.sharepoint.com/sites/Globodox/sitepages/mdb/css/mdb.min.css" rel="stylesheet">
<link href="https://lotusbetaanalytics.sharepoint.com/sites/Globodox/sitepages/mdb/css/addons/datatables.min.css" rel="stylesheet">
<script type="text/javascript" src="https://lotusbetaanalytics.sharepoint.com/sites/Globodox/sitepages/mdb/js/jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="text-center">
<button type="button" class="btn btn-default btn-sm approve">Approve</button>
<button type="button" class="btn btn-warning btn-sm query">Query</button>
<button type="button" class="btn btn-danger btn-sm remove">Reject</button>
</div>
<table id="dtMaterialDesignExample" class="table btn-table table-striped table-bordered requisition" style="width:100%"></table>
<div class="modal fade" id="basicExampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel"></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success btn-md" data-dismiss="modal">Ok</button>
</div>
</div>
</div>
</div>
<div class="modal fade modal2" id="basicExampleModal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
</div>
<div class="modal-body">
<h3>Reject Requisition ?</h3>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success btn-md close">Yes</button>
<button type="button" class="btn btn-info btn-md" data-dismiss="modal">No</button>
</div>
</div>
</div>
</div>
<!-- SCRIPTS -->
<!-- JQuery -->
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="https://lotusbetaanalytics.sharepoint.com/sites/Globodox/sitepages/mdb/js/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="https://lotusbetaanalytics.sharepoint.com/sites/Globodox/sitepages/mdb/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="https://lotusbetaanalytics.sharepoint.com/sites/Globodox/sitepages/mdb/js/mdb.min.js"></script>
<script type="text/javascript" src="https://lotusbetaanalytics.sharepoint.com/sites/Globodox/sitepages/mdb/js/addons/datatables.min.js"></script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js">
</script>
<script type="text/javascript" src="/sites/Globodox/sitepages/_layouts/15/sp.runtime.js"></script>
<script type="text/javascript" src="/sites/Globodox/sitepages/_layouts/15/sp.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#dtBasicExample').DataTable();
$('.dataTables_length').addClass('bs-select');
});
$(function() {
GetRequisition();
});
function GetRequisition() {
var clientContext = new SP.ClientContext.get_current();
var oList = clientContext.get_web().get_lists().getByTitle('PaymentRequisitionv6');
this.collListItem = oList.getItems("");
clientContext.load(collListItem);
clientContext.executeQueryAsync(
Function.createDelegate(this, this.onQuerySucceeded),
Function.createDelegate(this, this.onQueryFailed)
);
}
function onQuerySucceeded(sender, args) {
var listItemEnum = collListItem.getEnumerator();
var RequisitionInfo = '<thead>' +
'<tr>' +
'<th><input type="checkbox" id="master"></th>' +
'<th class="th-sm">ID<i class="fa fa-sort float-right" aria-hidden="true"></i></th>' +
'<th class="th-sm">PO Number<i class="fa fa-sort float-right" aria-hidden="true"></i></th>' +
'<th class="th-sm">Requester Name<i class="fa fa-sort float-right" aria-hidden="true"></i></th>' +
'<th class="th-sm">Action</th>' +
'</tr>' +
'</thead>';
RequisitionInfo += '<tbody>';
while (listItemEnum.moveNext()) {
var oListItem = listItemEnum.get_current();
RequisitionInfo += '<tr>' +
'<td><input type="checkbox" name="" value="" class="check"></td>' +
'<td>' + oListItem.get_id() + '</td>' +
'<td>' + oListItem.get_item('PONumber') + '</td>' +
'<td>' + oListItem.get_item('ReqName') + '</td>' +
'<td><button type="button" class="btn btn-outline-success btn-sm m-0 waves-effect" data-toggle="modal" data-target="#basicExampleModal"><i class="fa fa-check"></i></button> <button type="button" class="btn btn-outline-warning btn-sm m-0 waves-effect" data-toggle="modal" data-target="#basicExampleModal"><i class="fas fa-question"></i></button> <button type="button" class="btn btn-outline-danger btn-sm m-0 waves-effect" data-toggle="modal" data-target=".modal2"><i class="fa fa-times"></i></button></td>' +
'</tr>';
}
RequisitionInfo += '<tbody>';
$('.requisition').html(RequisitionInfo);
}
// select with checkbox
$('#master').on('click', function(e) {
if ($(this).is(':checked', true)) {
$(".check").prop('checked', true);
} else {
$(".check").prop('checked', false);
}
});
</script>
</body>
</html>
材料设计引导
批准
查询
拒绝
&时代；
...
好啊
拒绝申请？
对
不
$（文档）.ready（函数（）{
$（'#dtBasicExample'）.DataTable（）；
$（'.dataTables_length'）.addClass（'bs-select'）；
});
$（函数（）{
getrequision（）；
});
函数getrequision（）{
var clientContext=new SP.clientContext.get_current（）；
var oList=clientContext.get_web（）.get_lists（）.getByTitle（'PaymentRequisitionv6'）；
this.collListItem=oList.getItems（“”）；
加载（collListItem）；
clientContext.executeQueryAsync(
Function.createDelegate（this，this.onquerySucceed），
Function.createDelegate（this，this.onQueryFailed）
);
}
函数onquerysucceed（发送方，参数）{
var listItemEnum=collListItem.getEnumerator（）；
var requisioninfo=“”+
'' +
'' +
“身份证”+
“订单号”+
“请求者名称”+
“行动”+
'' +
'';
requisioninfo+=''；
while（listItemEnum.moveNext（））{
var oListItem=listItemEnum.get_current（）；
请购单信息+=“”+
'' +
''+oListItem.get_id（）+
''+oListItem.get_item（'PONumber'）+'''+
''+oListItem.get_项目（'ReqName'）+''+
' ' +
'';
}
requisioninfo+=''；
$（'.requisition'）.html（RequisitionInfo）；
}
//用复选框选择
$（'#master'）。在（'click'，函数（e）上{
如果（$（this）.is（':checked'，true））{
$（“.check”）.prop（'checked'，true）；
}否则{
$（“.check”）.prop（'checked'，false）；
}
});