静态创建Sharepoint列表项之后，就会想到动态生成父子列表。（二）

本文链接：https://blog.youkuaiyun.com/Ging1314/article/details/42968339

本文介绍如何使用JavaScript动态生成并更新SharePoint列表的父子列表项，包括EditChildItems函数用于编辑子列表项，CreateChildListEditForm函数用于创建编辑表单，以及涉及到的CAML查询和字段操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

来终结动态生成父子列表更新的列表项吧。
两次上图没上成功，现在附上一串动态生成列表项的代码吧。

function EditChildItems() {

    var context = new SP.ClientContext.get_current();
    var oWebsite = context.get_web();
    var oList = oWebsite.get_lists().getByTitle(editChildList);

var itemId = $('#itemId').val();
var foreignkey = editForeignKeyName;

    ////////////
    ////////////
    //ROW
    ////////////

$("#ParentChild tr.newTr").each(function () {

          var Id = $(this).children("td").children("input.ID").val();
          var oListItem = oList.getItemById(Id);

        /////////////
        /////////////
        // TD

          $(this).children("td").each(function () {

              var fieldName = $(this).children("input").attr("class");
              var value = $(this).children("input").val();

if (fieldName != "ID") {

                  oListItem.set_item(fieldName, value);
              }
          })

///////////////////

oListItem.set_item(foreignkey, itemId);
oListItem.update();

//context.load(oListItem);

          context.executeQueryAsync(
                Function.createDelegate(this, successHandler),
                Function.createDelegate(this, errorHandler)
            );

          function successHandler() {
              alert("Edit CItem Successful!");
          }
          function errorHandler() {
              alert("Edit CItem Failed!");
          }
    });

}

var editChildList;
var editForeignKeyName

function CreateChildListEditForm() {

$('#ParentChild').append('<tr id="thParentChildtr"></tr>');

    //获取子列表的列
    var clientContext = new SP.ClientContext();
    var targetList = clientContext.get_web().get_lists().getByTitle(editChildList);
    fieldCollection = targetList.get_fields();
    //clientContext.load(fieldCollection, 'Include(Title,hidden)');
    clientContext.load(fieldCollection);
    clientContext.executeQueryAsync(Function.createDelegate(this, Succeeded), Function.createDelegate(this, Failed));

    function Succeeded() {
        var message = "The following fields are available in the Announcements list:\n\n";
        var fields = '';
        var fieldEnumerator = fieldCollection.getEnumerator();

while (fieldEnumerator.moveNext()) {
fields += listEnumerator.get_current().get_title() + "; ";

            var oField = fieldEnumerator.get_current();
            var title = oField.get_title();
            var internalName = oField.get_internalName();

            //var myhidden = oField.get_hidden();
            var myfieldtype = oField.get_fieldTypeKind();
            var myfieldhidden = oField.get_hidden();
            var myreadonly = oField.get_readOnlyField();

}

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

    //var clientContext;
    //var oWebsite;
    //var oList;
    //var oListItem;
    var itemId = $('#itemId').val();
    //alert(projectId);

    var context = new SP.ClientContext.get_current();
    var list = context.get_web().get_lists().getByTitle(editChildList);
    var camlQuery = new SP.CamlQuery();
    var foreignkey = editForeignKeyName;
    camlQuery.set_viewXml('<View><Query><Where><Eq><FieldRef Name=\''+foreignkey+'\'/>' + '<Value Type=\'Text\'>' + itemId + '</Value></Eq>' + '</Where></Query></View>');
    var listItems = list.getItems(camlQuery);

context.load(listItems);

    context.executeQueryAsync(
   // Success callback
    function () {

///////////////////////////////////

        var fieldEnumerator = fieldCollection.getEnumerator();
        var ArrayHtml = new Array();
        //列名字的循环
        while (fieldEnumerator.moveNext()) {
            var i = 0;

            var oField = fieldEnumerator.get_current();
            var title = oField.get_title();
            var internalName = oField.get_internalName();

var listItemEnumerator = listItems.getEnumerator();

            if (internalName !== editForeignKeyName & myfieldtype == 2 & myfieldhidden !== true & myreadonly !== true | myfieldtype == 10|internalName == "ID") {
                thtml = '<th id="' + internalName + '">' + internalName + '</th>';
                $('#thParentChildtr').append(thtml);
                while (listItemEnumerator.moveNext()) {
                    var listItem = listItemEnumerator.get_current();
                    var ListId = listItem.get_fieldValues()["ID"];
                    var fieldValues = listItem.get_fieldValues()[internalName];
                    var thtml;
                    var html;
                    html = '<td><input class="' + internalName + '" type="text" value="' + fieldValues + '" /></td>';
                    $("#ParentChildtr").append(html);
                    ArrayHtml[i] = ArrayHtml[i] + html;
                    i++;

}

}//If

        }//while
        for (i in ArrayHtml) {
            var newTr = '<tr class="newTr">' + ArrayHtml[i] + '</tr>'
            $("#ParentChild").append(newTr);


        }
        if ($('#ParentChild input').attr("class") == "ID") {
            $("#ParentChild input.ID").attr("readOnly", "readOnly");
            $("#ParentChild input.ID").attr("style","width:20px");
        }
        },

// Failure callback
function (sender, args) {

});
}
这是更新父子列表的列表项，创建就不详述了

差不多就是这样，我再上个图