jqgrid - 在 jqgrid 中设计此表单的解决方案

Question

我在使用jqGrid时遇到问题，在讨论解释表的问题之前。
我有 4 个表 CostType,CurrencyUnit , Request,RequestCost 。
CostType 表结构

CostId       CostName 
-------      ----------
  1           permit
  2           Warehouse receipt
  3           Warehousing

和请求结构

RequestId         RequestNo     WaybillNo
------------------------------------------
1                    100          120Ac30
2                    101           400CA852

和 CurrencyUnit 表结构：

UnitId    UnitName
------------------
1           Dollar
2           Pound
3           Rial

和 CostRequest 表结构

requestId   CostId  Amount    CurrencyUnitId     Remark
--------------------------------------------------------
1             2        200      3
1             1        400      1

我想在填充页面加载网格如下：

然后用户可以在顶部文本框中输入请求编号，然后单击按钮搜索如下： 用户可以更改或输入此请求的一些成本金额如下： 并单击保存按钮以保存到数据库中。注意：我是 jqGrid 的初学者，我可以先填充网格，其他两步我无法实现。请帮我 。谢谢大家

Answer 1

如果不为您编写代码，就很难回答您的问题。

“RequestNo”（例如，具有 id="requestNo"）和“搜索”按钮的输入字段可以是<fieldset>网格中的简单控件。click“搜索”按钮的处理程序可以调用$("#grid").trigger("reloadGrid", [{page:1}]). 在网格定义内部，您可以使用postData类似

var $grid = $("#grid"),
    editingRowId,
    myEditParam = {
        keys: true,
        oneditfunc: function (id) { editingRowId = id; },
        afterrestorefunc: function (id) { editingRowId = undefined; },
        aftersavefunc: function (id) { editingRowId = undefined; }
    }; 

$grid.jqGrid({
    ...
    postData: {
        // add requestNo parameter to the request
        requestNo: function () { return $("#requestNo").val(); }
    },
    beforeRequest: function () {
        // stop request to the server for empty requestNo
        return $("#requestNo").val() !== "" ? true : false;
    },
    onSelectRow: function (id) {
        if (id !== editingRowId) {
            if (typeof editingRowId !== "undefined") {
                // save previously editing row
                $(this).jqGrid("saveRow", editingRowId, myEditParam);
            }
            // start inline editing. The user should save the row by pressing ENTER
            $(this).jqGrid("editRow", id, myEditParam);
        }
    }
    ...
});

您可以另外添加“保存”按钮，如果不是，它将调用$("#grid").jqGrid("saveRow", editingRowId);以保存最后一个编辑行。editingRowIdundefined

添加editable: true到您希望在编辑模式下查看的所有列非常重要。如果您想在网格中拥有所有编辑列，您可以使用cmTemplate: {editable: true}jqGrid 选项。它更改了在 中定义的列定义的默认值colModel。

要在“CurrencyUnit”列中有下拉列表，您应该在列定义中包含其他属性：

edittype: "select", editoptions: { value: "Dollar:Dollar; Pound:Pound; Rial:Rial" }