javascript - 使用网格的结果填充表单

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() 智能地从 <select> 中获取选定的值控制。