在 jqgrid 中设计此表单的解决方案 [英] solution for Design this forms in jqgrid

问题描述

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

I Have problem in use jqGrid,Before discussing the question of explain tables.
i have 4 tables CostType,CurrencyUnit , Request,RequestCost .
CostType Table structure

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

和请求结构

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

和 CurrencyUnit 表结构:

and CurrencyUnit table stracture:

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

和 CostRequest 表结构

and CostRequest table stracture

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

我要在填充页面加载网格如下:

i want in fill page load grid As follows:

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

Afterwards user can enter request No in top textbox and click button search As follows: user can change or enter some Cost Amount for this request As follows: and click in save button to save in database. Notes: i'm starter in jqGrid i can fill first Grid other two-step i can not implemet. please help me . thanks all

推荐答案

如果不为您编写代码，您的问题有点难以回答.

It's a little difficult to answer on your question without writing the code for you.

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

The input field for "RequestNo" (having id="requestNo" for example) and the "Search" button could be simple controls in <fieldset> over the grid. click handler of the "Search" button can just call $("#grid").trigger("reloadGrid", [{page:1}]). Inside of grid definition you can use postData like

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);
        }
    }
    ...
});

如果 editingRowId<，您可以另外添加调用 $("#grid").jqGrid("saveRow", editingRowId); 的保存"按钮来保存最后的编辑行/code> 不是 undefined.

You can add additionally "Save" button which would call $("#grid").jqGrid("saveRow", editingRowId); to save the last editing row if editingRowId is not undefined.

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

It is important to add editable: true to all columns which you want to see in editing mode. If you want to have all editing columns in the grid you can use cmTemplate: {editable: true} jqGrid option. It changes the defaults for column definitions defined in colModel.

要在CurrencyUnit"列中有下拉菜单，您应该在列定义中包含其他属性:

To have dropdown in the "CurrencyUnit" column you should include additional properties in the column definition:

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

这篇关于在 jqgrid 中设计此表单的解决方案的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！