用网格的结果填充表单

Question

我想帮助以正确的方式填充一个表单与编辑的结果。

我使用flexigrid，并有代码，从一行获取细节，并将它们保存在变量中。

我卡住的地方是，我也有一个表单，我想显示这些详细信息进行编辑。结果在var 'columns'中。无论如何，我也想不出有什么办法。

一旦结果在表单中，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>

目的是用editbox() var 'columns'中的数据填充表单。

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>控件中获取所选值。