在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的初学者，我可以先填充Grid，而其他两个步骤则无法实现. 请帮我 .谢谢大家

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 like

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不是undefined，您还可以添加保存"按钮，该按钮将调用$("#grid").jqGrid("saveRow", editingRowId);保存最后的编辑行.

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屋！