SharePoint-JQuery增删改查

飒小北

于 2019-04-18 17:03:47 发布

阅读量95

点赞数

分类专栏： JavaScript Sharepoint 文章标签： jquery sharepoint 前端

本文链接：https://blog.csdn.net/tian_tian_gong/article/details/89382987

版权

JavaScript 同时被 2 个专栏收录

37 篇文章 0 订阅

订阅专栏

Sharepoint

1 篇文章 0 订阅

订阅专栏

在这里插入图片描述

html:


<link rel="stylesheet" href="../SiteAssets/bootstrap/bootstrap.min.css" type="text/css">
<script src="../SiteAssets/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>

<script src="../SiteAssets/bootstrap/bootstrap.min.js" type="text/javascript"></script>

<script src="../SiteAssets/Scripts/jquery.SPServices-0.7.1a.min.js" type="text/javascript"></script>
<script src="../SiteAssets/TESTAPI/Js/my.js?v=1.9" type="text/javascript"></script>


<style>
    #layoutsTable td {
        padding-left: 10px !important;
    }

    .editItem,
    .delItem,
    .checkAttachment {
        color: #000999;
    }

    .delItem:hover {
        color: #0099ff;
        cursor: pointer;
    }

    .checkAttachment:hover {
        color: #0099ff;
        cursor: pointer;
    }

    .editItem:hover {
        color: #0099ff;
        cursor: pointer;
    }
</style>

<div id="preloader" style="display:none"></div>
<div class="form-container container" id="containerDiv">

    <div class="row">
        <div class="form-group col-lg-12">
            <div class="panel-group" id="accordionRequester">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordionRequester" href="#collapseRequester">
                                TEST
                            </a>
                        </h4>
                    </div>
                    <div id="collapseRequester" class="panel-collapse collapse in">
                        <div class="panel-body">
                            <div class="row">
                                <div class="form-group col-lg-6 controlPanel" id="userNameWrapper">
                                    <div class="input-group inputControl">
                                        <span class="input-group-addon">用户名</span>
                                        <input id="userName" placeholder="请输入登陆邮箱" type="text" class="form-control">
                                    </div>
                                </div>

                                <div class="form-group col-lg-6 controlPanel" id="userNameWrapper">
                                    <div class="input-group inputControl">
                                        <span class="input-group-addon">文件</span>
                                        <input type="file" id="file_input" multiple class="form-control">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="form-group col-lg-6 controlPanel" id="userNameWrapper">
                                    <div class="input-group inputControl">
                                        <span class="input-group-addon">age</span>
                                        <input id="age" type="text" class="form-control">
                                    </div>
                                </div>
                                <div class="form-group col-lg-6 controlPanel" id="userNameWrapper">
                                    <div class="input-group inputControl">
                                        <span class="input-group-addon">others</span>
                                        <input id="others" type="text" class="form-control">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-12">
                                    <button class="btn btn-primary" id="NewSaveItem" type="button">新建</button>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="form-group col-lg-12">
            <div class="panel-group" id="DATALISTpanel">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#DATALISTpanel" href="#DATALIST">
                                TESTAPI DATA LIST
                            </a>
                        </h4>
                    </div>
                    <div id="DATALIST" class="panel-collapse collapse in">
                        <div class="row">
                            <div class="col-lg-12">
                                <table class="table table-bordered">
                                    <thead>
                                        <tr>
                                            <th>序号</th>
                                            <th>Title</th>
                                            <th>username</th>
                                            <th>age</th>
                                            <th>others</th>
                                            <th>查看附件</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody id="dataTable">

                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>






    <!-- 附件详情模态框（Modal） -->
    <div class="modal fade" id="attachmentModal" tabindex="-1" role="dialog" aria-labelledby="attachmentModalLabel"
        aria-hidden="true" style="margin-top:300px;">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"
                        style="text-align:right">
                        &times;
                    </button>
                    <h4 class="modal-title" id="attachmentModalLabel">
                        附件详情
                    </h4>
                </div>
                <div class="modal-body">

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

    <!-- 编辑item模态框（Modal） -->
    <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel"
        aria-hidden="true" style="margin-top:300px;">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"
                        style="text-align:right">
                        &times;
                    </button>
                    <h4 class="modal-title" id="editModalLabel">
                        编辑
                    </h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="form-group col-lg-12 controlPanel" id="userNameWrapper">
                            <div class="input-group inputControl">
                                <span class="input-group-addon">用户名</span>
                                <input id="editUserName" placeholder="请输入登陆邮箱" type="text" class="form-control">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group col-lg-12 controlPanel" id="userNameWrapper">
                            <div class="input-group inputControl">
                                <span class="input-group-addon">age</span>
                                <input id="editAge" type="text" class="form-control">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group col-lg-12 controlPanel" id="userNameWrapper">
                            <div class="input-group inputControl">
                                <span class="input-group-addon">others</span>
                                <input id="editOthers" type="text" class="form-control">
                            </div>
                        </div>
                    </div>
                    <input hidden id="editId" type="text">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                    <button id="editBtn" type="button" class="btn btn-primary">
                        提交更改
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

</div>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>

js:

	
var Url = 站点地址;
var listName = 列表名

$(function () {
    formFunction();
    formMethodInit();
})
function formFunction() {
    getDataList();
}
function formMethodInit() {
    // 新建提交
    $("#NewSaveItem").click(function () {
        if (document.getElementById("file_input").files.length === 0 || $("#userName").val() == "") {
            alert("邮箱/文件必须填写/上传");
            return;
        }
        else {
            //  新建数据， 获得id start
            var username = $("#userName").val();
            var prefix = "i:0#.f|membership|";
            var siteUrl = _spPageContextInfo.siteAbsoluteUrl;
            var accountName = prefix + username;
            $.ajax({
                url: siteUrl + "/_api/web/siteusers(@v)?@v='" +
                    encodeURIComponent(accountName) + "'",
                method: "GET",
                headers: { "Accept": "application/json; odata=verbose" },
                success: function (data) {
                    var user_id = data.d.Id;
                    var adminName = new SP.FieldUserValue();
                    adminName.set_lookupId(user_id);//User Id in the site collection

                    JSRequest.EnsureSetup();
                    var clientContext = new SP.ClientContext(Url);
                    var expenseList = clientContext.get_web().get_lists().getByTitle(listName);
                    var expenseItem = expenseList.addItem(new SP.ListItemCreationInformation());
                    expenseItem.set_item("Title", "TEST" + (new Date()).getTime());
                    expenseItem.set_item("username", adminName);
                    expenseItem.set_item("age", $("#age").val());
                    expenseItem.set_item("others", $("#others").val());
                    expenseItem.update();
                    clientContext.load(expenseItem);
                    clientContext.executeQueryAsync(function () {
                        // 批量上传 start
                        var itemId = expenseItem.get_id();
                        var files = document.getElementById("file_input").files;
                        for (var i = 0; i < files.length; i++) {
                            var filename = document.getElementById("file_input").files[i].name;
                            var file = document.getElementById("file_input").files[i];
                            uploadFileSP(listName, itemId, filename, file);
                        }
                        alert("上传成功!");
                        $("#userName").val("");
                        $("#file_input").val("");
                        $("#age").val("");
                        $("#others").val("");
                        getDataList();
                        // 批量上传 end


                    }, function (e) {
                        alert("Service Technical Error!");
                        console.log(e);
                    });


                },
                error: function (data) {
                    alert("请输入正确的邮箱!");
                    console.log(JSON.stringify(data));
                }
            });
            //  新建数据，获得id end
        }
    });


    // 修改提交
    $("#editBtn").click(function () {
        var editId = $("#editId").val();
        // 获得user_id start
        var username = $("#editUserName").val();
        var prefix = "i:0#.f|membership|";
        var siteUrl = _spPageContextInfo.siteAbsoluteUrl;
        var accountName = prefix + username;
        $.ajax({
            url: siteUrl + "/_api/web/siteusers(@v)?@v='" +
                encodeURIComponent(accountName) + "'",
            method: "GET",
            headers: { "Accept": "application/json; odata=verbose" },
            success: function (data) {
                var user_id = data.d.Id;
                var adminName = new SP.FieldUserValue();
                adminName.set_lookupId(user_id);
                // UPDATE
                JSRequest.EnsureSetup();
                var clientContext = new SP.ClientContext(Url);
                var orderList = clientContext.get_web().get_lists().getByTitle(listName);
                var orderItem = orderList.getItemById(editId);

                orderItem.set_item("username", adminName);
                orderItem.set_item("age", $("#editAge").val());
                orderItem.set_item("others", $("#editOthers").val());
                orderItem.update();
                clientContext.load(orderItem);
                clientContext.executeQueryAsync(function () {
                    $("#editModal").modal("hide");
                    alert("更新成功!");
                    getDataList();
                }, function () {
                    console.log(e);
                    alert("Service Technical Error!");
                });


            },
            error: function (data) {
                alert("请输入正确的邮箱!");
                console.log(JSON.stringify(data));
            }
        });
        // 获得user_id end

    })

}

//  上传附件
function getFileBuffer(file) {
    var deferred = $.Deferred();
    var reader = new FileReader();
    reader.onload = function (e) {
        deferred.resolve(e.target.result);
    }
    reader.onerror = function (e) {
        deferred.reject(e.target.error);
    }
    reader.readAsArrayBuffer(file);
    return deferred.promise();
}
function uploadFileSP(listName, id, fileName, file) {
    var deferred = $.Deferred();
    getFileBuffer(file).then(
        function (buffer) {
            var bytes = new Uint8Array(buffer);
            var content = new SP.Base64EncodedByteArray();
            var queryUrl = Url + "/_api/lists/GetByTitle('" + listName + "')/items(" + id + ")/AttachmentFiles/add(FileName='" + file.name + "')";
            $.ajax({
                url: queryUrl,
                type: "POST",
                processData: false,
                contentType: "application/json;odata=verbose",
                data: buffer,
                async: false,
                headers: {
                    "accept": "application/json;odata=verbose",
                    "X-RequestDigest": $("#__REQUESTDIGEST").val(),
                    "content-length": buffer.byteLength
                }, success: function () {
                    console.log('Attachement Added Successfully');
                },
                error: function (error) {
                    console.log("Failure:" + error.status + "," + error.statusText);
                }
            });
        },
        function (err) {
            deferred.reject(err);
        });
    return deferred.promise();
}

//  渲染列表 
function getDataList() {
    $("#dataTable").html("");
    var requestUrl = Url + "/_api/web/lists/GetByTitle('" + listName + "')/items?$select=" +
        "ID," +
        "Title," +
        "age," +
        "others," +
        "username/Title" +
        "&$expand=username";
    $.ajax({
        url: requestUrl,
        method: "GET",
        headers: { "Accept": "application/json; odata=verbose" },
        success: function (data) {
            var ItemsList = $("#dataTable");
            var trHtml = "";
            for (var i = 0; i < data.d.results.length; i++) {
                trHtml += "<tr dataId='" +
                    data.d.results[i]["ID"] +
                    "'><td>" +
                    (i + 1) +
                    "</td><td>" +
                    data.d.results[i]["Title"] +
                    "</td><td>" +
                    data.d.results[i]["username"]["Title"] +
                    "</td><td>" +
                    data.d.results[i]["age"] +
                    "</td><td>" +
                    data.d.results[i]["others"] +
                    "</td><td class='checkAttachment'>查看附件</td><td><span class='editItem'>编辑</span> <span class='delItem'>删除</span> </td></tr>";
            }
            ItemsList.append(trHtml);


            // 编辑
            $(".editItem").on("click", function () {
                var editId = $(this).parent().parent().attr("dataId");
                var getItemUrl = Url + "/_api/web/lists/GetByTitle('" + listName + "')/items?$select=" +
                    "ID," +
                    "age," +
                    "username/EMail," +
                    "others" +
                    "&$expand=username&$filter=ID eq '" + editId + "'";
                $.ajax({
                    url: getItemUrl,
                    method: "GET",
                    headers: { "Accept": "application/json; odata=verbose" },
                    success: function (data) {
                        if (data.d.results.length > 0) {
                            $("#editModal").find("#editUserName").val(data.d.results[0]["username"]["EMail"]);
                            $("#editModal").find("#editAge").val(data.d.results[0]["age"]);
                            $("#editModal").find("#editOthers").val(data.d.results[0]["others"]);
                            $("#editModal").find("#editId").val(data.d.results[0]["ID"]);

                            $("#editModal").modal("show");
                        }
                    },
                    error: function (e) {
                        console.log(e);
                        alert("服务器连接失败!")
                    }
                });


            })

            // 删除
            $(".delItem").on("click", function () {
                var delId = $(this).parent().parent().attr("dataId");
                var del = confirm("确定要删除吗?");
                if (del) {
                    var clientContext = new SP.ClientContext(Url);
                    var expenseList = clientContext.get_web().get_lists().getByTitle(listName);
                    var camlQuery = new SP.CamlQuery();
                    camlQuery.set_viewXml('<View><Query><Where><Eq><FieldRef Name="ID" /><Value Type="Text">' + delId + '</Value></Eq></Where></Query></View>');
                    var collListItem = expenseList.getItems(camlQuery);
                    clientContext.load(collListItem);
                    clientContext.executeQueryAsync(function () {
                        var itemCount = collListItem.get_count();
                        for (var i = itemCount - 1; i >= 0; i--) {
                            var oListItem = collListItem.itemAt(i);
                            oListItem.deleteObject();
                        };
                        clientContext.executeQueryAsync(function () {
                            alert("删除成功!");
                            getDataList();
                        }, function () { alert("Service Technical Error!"); });
                    }, function () { alert("Service Technical Error!"); });
                }
            })
            // 查看附件
            $(".checkAttachment").on("click", function () {
                var itemId = $(this).parent().attr("dataId");
                $.ajax({
                    url: Url + "/_api/web/lists/getbytitle('" + listName + "')/items(" + itemId + ")/AttachmentFiles/",
                    method: "GET",
                    headers: { "Accept": "application/json; odata=verbose" },
                    success: function (data) {
                        // alert("一共有:"+data.d.results.length+"个附件");
                        var attachmentItems = data.d.results;
                        var attachmentDetailHtml = "";
                        var webUrl = "https://sites.ey.com/";
                        attachmentItems.forEach(function (obj, i) {
                            attachmentDetailHtml += "<p><a href='" +
                                webUrl + obj.ServerRelativeUrl +
                                "' target='_blank'>" +
                                obj.FileName +
                                "</a></p>";
                        })

                        $("#attachmentModal").find(".modal-body").html(attachmentDetailHtml);
                        $('#attachmentModal').modal('show')
                    }, error: function (error) {
                        console.log(error);
                    }
                })
            })
        },
        error: function (e) {
            console.log(e);
            alert("服务器连接失败!")
        }
    });
}

飒小北

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
SharePoint-JQuery增删改查

html:<link rel="stylesheet" href="../SiteAssets/bootstrap/bootstrap.min.css" type="text/css"><script src="../SiteAssets/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script...
复制链接

扫一扫