在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屋!