Question

我试图在两个单独的DIV标签上查看和编辑数据。我已经实现了单击甚至在视图页面中的编辑按钮的单击事件上显示编辑表单。现在我想要的是，如果我点击编辑按钮，我想获取特定项目值并在表单中填充它。即，应检查复选框值，填写输入字段并选择单选按钮。这是我到目前为止的方式，

HTML：

<div class="panelList" id="panelList" hidden>
<form action="#" name="">
    <label class="uno">Panel Category:</label> 
    <span class="spec1">
    <input type="checkbox" value="1" name="panel2[]">&nbspRegular&nbsp&nbsp
    <input type="checkbox" value="2" name="panel2[]">&nbspReduced fee</input>&nbsp&nbsp
    <input type="checkbox" value="3" name="panel2[]">&nbspLimited Assistance Referral</input>&nbsp&nbsp
    <input type="checkbox" value="4" name="panel2[]">&nbspCourt Programs</input>
    </span>
    </br>
    <label class="uno">Group Panel:</label>
    <span class="spec2">
        <input type='text' list='listid2' id='gpanel2'>
        <datalist id='listid2' ></datalist>
    </span></br>
    <label class="uno">Panel Title :</label>
    <span class="spec3">
        <input type="text" name=""></br>
    </span>
    <label class="uno">Free Panel :</label>
    <span class="spec4">
      <input type="radio" name="free2" value="yes" checked>Yes
      <input type="radio" name="free2" value="no">No
    </span> 
    </br>
    <div id="fees2">
        <label class="uno">Fees $ :</label>
        <span class="spec5">
        <input type="text" id="fees3" name="fees3" disabled="disabled" >
        </span>
    </div>
    </br></br></br>
    <div class="col-md-offset-3">
    <input type="submit" class="btn btn-primary" value="Update" ></input>&nbsp&nbsp
    <input type="reset" class="btn btn-danger" id="cancel2" value="Cancel" onclick="cancelFunction();">
    </div>
</form>
</div>
<div class="addMember" id="addMember" ng-show="panel.isSelected(2)">
</div>

JS：

 function editFunction(value)
  {
    $("#panelList").show();
    $("#addMember").hide();
    $.getJSON("active.json"),function(result)
    {
        //console.log("hi");
        var categoryArray = result;

        for (var i = 0; i < categoryArray.length; i++) 
        {
            if (categoryArray[i].id == value) 
            {
                return(categoryArray[i]);

            }
        }
    }
    return true;
}

$.getJSON("active.json", function(result) 
{
    var panel_arr = ["", "Regular", "Reduced Fee", "Limited Assurance","Court Programs"];
    var ul_block = $("<ul/>");
    $.each(result, function(i, data) 
    {
        var panels = data.panel.split(",");
        var uli_block = $("<ul/>");
            $.each(panels, function(j, jdata)
            {
                var ulii_block = $("<ul/>");
                $(ulii_block).append($("<li/>").html(data.ptitle+'&nbsp&nbsp<a href="#epanel" id='+data.id+' class="btn btn-default active" role="button" onclick="editFunction(id);">Edit</a>'+'&nbsp&nbsp<a href="#" class="btn btn-default active" role="button">Delete</a>'));

                $(uli_block).append($("<li/>").html('<span class="Collapsable">'+panel_arr[panels[j]]+'</span>')).append(ulii_block);
            });
        $(ul_block).append($("<li/>").html('<span class="Collapsable">'+data.gpanel+'</span>').append(uli_block));
    });
    $("#addMember").append(ul_block);
    $(".Collapsable").click(function () {
      $(this).parent().children().toggle();
      $(this).toggle();
    });
    $(".Collapsable").each(function(){
      $(this).parent().children().toggle();
      $(this).toggle();
    });


});

JSON：

[  
{  
  "id":"1",
  "gpanel":"sfd",
  "ptitle":"sdffd",
  "panel":"1,4",
  "free":"yes",
  "fees":"0.00"
 },
 {  
  "id":"2",
  "gpanel":"sdfd",
  "ptitle":"sdfds",
  "panel":"4",
  "free":"yes",
  "fees":"0.00"
 },
 {  
  "id":"3",
  "gpanel":"sdf",
  "ptitle":"sdf",
  "panel":"4",
  "free":"yes",
  "fees":"0.00"
 },
 {  
  "id":"4",
  "gpanel":"sfd",
  "ptitle":"fes",
  "panel":"1",
  "free":"yes",
  "fees":"0.00"
 },
 {  
  "id":"5",
  "gpanel":"bbbfff",
  "ptitle":"hgffg",
  "panel":"1,2",
  "free":"yes",
  "fees":"0.00"
 }
 ]

Answer 1

要使其工作，您不应将 id 传递给 editFunction ，因为在单击按钮时该变量将超出范围。

此外，当用户单击编辑按钮时，再次从服务器请求数据似乎有些过分。相反，您可以将相应的对象传递给 editFunction 。

注意：如果稍后你有改变该对象的功能，你将保持状态，当用户再次编辑该数据时，之前的更改仍将存在。

为了传递一个对象，重写一些生成HTML内容的代码会更实际：不使用jQuery方法来创建这些元素，而是依赖html方法。然后，您可以轻松地将单击处理程序附加到可以访问数据对象的编辑按钮。

这是一个显示更改的代码段。当然，我没有你的CSS，所以这看起来很难看，但它确实有效：

＆＃13;

function editFunction(data) { // Pass all related data as argument
    $("#panelList").show();
    $("#addMember").hide();
    // Set form elements
    $('.spec1 input').prop('checked', false); 
    data.panel.split(",").forEach(function (jdata) {
        $('.spec1 input[value=' + jdata + ']').prop('checked', true); 
    });
    $('.spec2 input').val(data.gpanel);
    $('.spec3 input').val(data.ptitle);
    $('.spec4 input[value=' + data.free + ']').prop('checked', true);
    $('.spec5 input').val(data.fees);
    return false;
}

function processResult (result) {
    var panel_arr = ["", "Regular", "Reduced Fee", "Limited Assurance",
                     "Court Programs"];
    var ul_block = $("<ul/>");
    $.each(result, function(i, data) 
    {
        var panels = data.panel.split(",");
        var uli_block = $("<ul/>");
        $.each(panels, function(j, jdata)
        {
            var ulii_block = $("<ul/>");
            // Use jQuery methods for generating the content
            $edit = $('<a/>').attr('href', 'javascript:;')
                             .addClass('btn btn-default active')
                             .attr('role', 'button').text('Edit')
                             .css('margin-left', 5);
            $del = $('<a/>').addClass('btn btn-default active')
                             .attr('role', 'button').text('Delete')
                             .css('margin-left', 5);
            $(ulii_block).append(
                $("<li/>").text(data.ptitle).append($edit, $del));
            $(uli_block).append($("<li/>").append(
                    $('<span>').addClass("Collapsable").text(panel_arr[panels[j]])
            )).append(ulii_block);
            // ...so you can attach a click handler that passes an object as argument
            $edit.click(editFunction.bind(null, data));
        });
        $(ul_block).append($("<li/>").append(
             $('<span>').addClass("Collapsable").text(data.gpanel)
        ).append(uli_block));
    });
    $("#addMember").append(ul_block);
    $(".Collapsable").click(function () {
      $(this).parent().children().toggle();
      $(this).toggle();
    });
    $(".Collapsable").each(function(){
      $(this).parent().children().toggle();
      $(this).toggle();
    });
}

// This snippet does not do a request, so uncomment this:
//$.getJSON("active.json", processResult);

// Dummy data (exclude this when doing the real request)
processResult([  
{  
  "id":"1",
  "gpanel":"sfd",
  "ptitle":"sdffd",
  "panel":"1,4",
  "free":"yes",
  "fees":"0.00"
 },
 {  
  "id":"2",
  "gpanel":"sdfd",
  "ptitle":"sdfds",
  "panel":"4",
  "free":"yes",
  "fees":"0.00"
 },
 {  
  "id":"3",
  "gpanel":"sdf",
  "ptitle":"sdf",
  "panel":"4",
  "free":"yes",
  "fees":"0.00"
 },
 {  
  "id":"4",
  "gpanel":"sfd",
  "ptitle":"fes",
  "panel":"1",
  "free":"yes",
  "fees":"0.00"
 },
 {  
  "id":"5",
  "gpanel":"bbbfff",
  "ptitle":"hgffg",
  "panel":"1,2",
  "free":"no",
  "fees":"1.00"
 }
 ]);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panelList" id="panelList" hidden>
<form action="#" name="">
    <label class="uno">Panel Category:</label> 
    <span class="spec1">
    <input type="checkbox" value="1" name="panel2[]">&nbspRegular&nbsp&nbsp
    <input type="checkbox" value="2" name="panel2[]">&nbspReduced fee</input>&nbsp&nbsp
    <input type="checkbox" value="3" name="panel2[]">&nbspLimited Assistance Referral</input>&nbsp&nbsp
    <input type="checkbox" value="4" name="panel2[]">&nbspCourt Programs</input>
    </span>
    </br>
    <label class="uno">Group Panel:</label>
    <span class="spec2">
        <input type='text' list='listid2' id='gpanel2'>
        <datalist id='listid2' ></datalist>
    </span></br>
    <label class="uno">Panel Title :</label>
    <span class="spec3">
        <input type="text" name=""></br>
    </span>
    <label class="uno">Free Panel :</label>
    <span class="spec4">
      <input type="radio" name="free2" value="yes" checked>Yes
      <input type="radio" name="free2" value="no">No
    </span> 
    </br>
    <div id="fees2">
        <label class="uno">Fees $ :</label>
        <span class="spec5">
        <input type="text" id="fees3" name="fees3" disabled="disabled" >
        </span>
    </div>
    </br></br></br>
    <div class="col-md-offset-3">
    <input type="submit" class="btn btn-primary" value="Update" ></input>&nbsp&nbsp
    <input type="reset" class="btn btn-danger" id="cancel2" value="Cancel" onclick="cancelFunction();">
    </div>
</form>
</div>
<div class="addMember" id="addMember" ng-show="panel.isSelected(2)">
</div>

＆＃13;

现在，您可以在用户单击“更新”按钮时编写用于将信息更新回到对象的代码。

如何使用ID在Click事件上从JSON文件获取值并显示表单中的值

1 个答案: