1

我希望以正确的方式获得帮助，以使用编辑结果填充表单。

我正在使用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' 的数据填充表单。

4

1 回答 1

2

我没有跟上 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>控件中获取选定的值。

于 2011-07-27T11:08:21.100 回答