使用網格結果填充表單

Question

我希望能夠以正確的方式幫助您填充表單並顯示編輯結果。

我使用的是flexigrid，它具有從一行中獲取細節並將其保存在變量中的代碼。

我卡住的一點是，我也有一個表單，我希望這些細節顯示爲編輯。結果在var'列'中。對於我的生活，我看不到一個辦法。

一旦結果出現在表單中，jQuery就會將這些結果傳遞給db進行處理。

我有所有的代碼，但不知道什麼張貼您的注意。如果有人能告訴我如何根據我願意在這裏展示的代碼儘可能地做到這一點，我將不勝感激。

這是用來從電網收集數據：

function editbox(com, grid) { 
    if (com == 'Edit') { 
     if ($('.trSelected').length > 0) { 
      var items = $('.trSelected'); 
      var itemlist = ''; 
      for (i = 0; i < items.length; i++) { 
       itemlist += items[i].id.substr(3); 
      } 
      var id = $("tr.trSelected td:nth-child(1) div").text(); 
      var location = $("tr.trSelected td:nth-child(2) div").text(); 
      var customer = $("tr.trSelected td:nth-child(3) div").text(); 
      var address = ($("tr.trSelected td:nth-child(4) select :selected").text() == "Select an Address") ? "" : $("tr.trSelected td:nth-child(4) select :selected").text(); 
      var service = ($("tr.trSelected td:nth-child(5) select :selected").text() == "Select a Service") ? "" : $("tr.trSelected td:nth-child(5) select :selected").text(); 
      var department = $("tr.trSelected td:nth-child(6) div").text(); 
      var status = $("tr.trSelected td:nth-child(7) div").text(); 
      var custref = $("tr.trSelected td:nth-child(8) div").text(); 
      var size = $("tr.trSelected td:nth-child(9) div").text(); 
      var authorisation = $("tr.trSelected td:nth-child(10) div").text(); 
      var intakedate = $("tr.trSelected td:nth-child(11) div").text(); 
      var destroydate = $("tr.trSelected td:nth-child(12) div").text(); 
      var columns = "id=" + id + 
          "&location=" + location + 
          "&customer =" + customer + 
          "&address=" + address + 
          "&service=" + service + 
          "&department=" + department + 
          "&status=" + status + 
          "&custref=" + custref + 
          "&size=" + size + 
          "&authorisation=" + authorisation + 
          "&intake_date=" + intakedate + 
          "&destroy_date=" + destroydate; 

      console.log(columns); 
      $("#boxeditform").dialog('open'); 
      //console.log(department+" "+custref+" "+address); 
     } else { 
      jAlert('you must select a row'); 
     } 
    } 
} 

HTML用於捕獲數據：

<form id="EB_edit" name="EB_edit" action="" method="post" class="webform"> 

    <label for="EB_status">Status:</label> 
    <select name="EB_status"> 
    <option SELECTED VALUE="">Select a Status</option> 
    <option value="In">In</option> 
    <option value="Out">Out</option> 
    <option value="Destroyed">Destroyed</option> 
    <option value="Permanent">Permanent</option> 
    </select><br /><br /> 
    <input id="EB_id" name="EB_id" type="hidden" value="" /> 
    <label for="EB_custref">Box Reference #:</label> 
    <input id="EB_custref" name="EB_custref" type="text" class="text ui-widget-content ui-corner-all inputbox EB_custref" value="" /> 
    <label for="EB_address">Address:</label> 
    <input id="EB_address" name="EB_address" type="text" class="text ui-widget-content ui-corner-all inputbox EB_address" value="" /> 
    <label for="EB_service">Service:</label> 
    <input id="EB_service" name="EB_service" type="text" class="text ui-widget-content ui-corner-all inputbox EB_service" value="" /> 
    <label for="EB_dept">Department:</label> 
    <input id="EB_dept" name="EB_dept" type="text" class="text ui-widget-content ui-corner-all inputbox EB_dept" value="" /> 
    <div id="f2"></div><br /> 
    <button id="EB_submit" class="submit">Submit</button> 
</form> 

目的是填充從編輯框（）VAR '列' 的數據形式。

Answer 1

我對Flexigrid的速度並不是很滿意，但有一個更好的方法！

與其設置所有這些變量，爲什麼不創建映射並使用它來填充表單？

嘗試這樣：

function editbox(com, grid) { 
    if (com == 'Edit') { 
    if ($('.trSelected').length > 0) { 

     var mapGridToForm = //Name   Child index Form id 
          [ ['id',    1,  'EB_id'  ], 
           ['location',  2,  '???'   ], 
           ['customer',  3,  '???'   ], 
           ['address',   4,  'EB_address', 'select'], 
           ['service',   5,  'EB_service', 'select'], 
           ['department',  6,  'EB_dept'  ], 
           ['status',   7,  'EB_status' ], 
           ['custref',   8,  'EB_custref' ], 
           ['size',   9,  '???'   ], 
           ['authorisation', 10,  '???'   ], 
           ['intakedate',  11,  '???'   ], 
           ['destroydate', 12,  '???'   ] 
          ]; 
     var baseNode  = $('tr.trSelected'); 

     $("#boxeditform").dialog('open'); 

     //--- Populate the form. 
     for (J = mapGridToForm.length - 1; J >= 0; --J) { 
     var row  = mapGridToForm[J]; 

     if (row.length > 3) { //--- It's a select control. 

      // NOTE: Normally, we use the `value` attribute for selects. 
      var gridVal = baseNode.find ('td:nth-child(' + row[1] + ') select:selected').text(); 

      //--- Blank the value if it's unselected 
      if (/^Select a/i.test (gridVal)) 
       gridVal = ""; 
      $('#' + row[2]).val (gridVal); 
     } 
     else { 
      //--- Get the value from the grid and set the form control with it. 
      var gridVal = baseNode.find ('td:nth-child(' + row[1] + ') div').text(); 
      $('#' + row[2]).val (gridVal); 
     } 
     } 
    } else { 
     jAlert('you must select a row'); 
    } 
    } 
} 

注意val()智能從<select>控制獲取選定的值。