使用网格结果填充表单

Question

我需要帮助以正确的方式使用编辑结果填充表单。

我正在使用 flexigrid 并拥有从行中获取详细信息并将其保存在变量中的代码。

我陷入困境的一点是，我还有一个表单，我希望显示这些详细信息以供编辑。结果位于 var 'columns' 中。对于我的一生，我找不到办法做到这一点。

一旦结果出现在表单中，jQuery 就会将这些结果传递给数据库进行处理。

我有所有代码，但不确定要发布哪一部分以引起您的注意。如果有人能够根据我愿意在此处展示的代码（如果可能的话）向我展示如何执行此操作，我将不胜感激。

这用于从网格收集数据：

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() 会智能地从 <选择> 控件。