我如何分配值到jqGird的列？ [英] how do i assign value to columns in jqGird?
本文介绍了我如何分配值到jqGird的列？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用jqGrid与CodeIgniter 2.1.0。
让我骚扰的是如何为特定事件的特定列分配值
假设我在列值中输入qty和rate ..和当我失去焦点从速率字段.....净金额应该计算并显示在金额字段...
我需要什么做这里是分配计算值的金额字段......但我不知道如何我做它
我做了什么如下：
var selIRow = 1;
var rowid ='';
var iCol ='';
$（＃purchasedetailsgrid）。jqGrid（{
url：sitepath +'purchase / purchase_grid'，
datatype：'json'，
mtype：'POST'，
height：220，
width：500，
colNames：[，，Store Name，Item Name，Inner Pkg。，Outer Pkg。 数量，费率，金额]，
colModel：[
{name：'storeID_hidden_field'，index：'storeID_hidden_field'，hidden：true，editable：true，edittype：'text' ，editrules：{edithidden：true}}，
{name：'itemID_hidden_field'，index：'itemID_hidden_field'，hidden：true，editable：true，edittype：'text'
{name：'store_id'，index：'store_id'，width：150，search：false，editable：true，editrules：{number：false，maxlength：10}}，
{name： item_id'，index：'item_id'，width：150，search：false，editable：true，editrules：{number：false，maxlength：10}}，
{name：'inner_pkg'，index：'inner_pkg' ，width：150，search：false，editable：true，editrules：{number：true，maxlength：5}}，
{name：'outer_pkg'，index：'outer_pkg'，width：150，search：false ，editable：true，editrules：{number：true，maxlength：5}}，
{name：'qty'，index：'qty'，editable：true，width：85，search：false，editrules： number：true，maxlength：5}}，
{name：'rate'，index：'rate'，width：100，editable： ，
editoptions：{
dataInit：function（elem）{$（elem）.focus（function（）{this.select（）; }
dataEvents：[
{
type：'keydown'，
fn：function（e）{
var key = e.charCode || e.keyCode;
if（key == 9）// tab
{
$（'＃amount'）。val（）; //这里在val和价格字段
}
}
}
]
}
}，
{name：'amount'，index：'amount' ，width：100，editable：true，search：false，editrules：{number：true，maxlength：10}，
editoptions：{
dataInit：function（elem）{$（elem）.focus function（）{this.select（）;}）}，
dataEvents：[
{
type：'keydown'，
fn：function（e）{
var key = e.charCode || e.keyCode;
if（key == 13）// enter
{
var grid = $（'＃purchasedetailsgrid'）;
//保存当前行的编辑
grid.jqGrid（'saveRow'，selIRow，false，sitepath +'purchase / purchase_grid'）;
selIRow ++;
//如果在网格底部，创建新行
// if（selIRow ++ == grid.getDataIDs（）。length）{
grid.addRowData（selIRow，{}）;
//}
//输入网格中下一行的编辑行
grid.jqGrid（'editRow'，selIRow，false，sitepath +'purchase / purchase_grid'）;
}
}
}
]
}
}
]，
pager：'#purchasedetailstoolbar'，
rowNum：10，
rowList：[10,20,30]，
sortname：'inventory_id'，
sortorder：'desc'，
viewrecords：true，
rownumbers：true，
gridview：true，
multiselect：false，
autoresize：true，
autowidth：true，
editurl：sitepath +'purchase / purchase_grid' ，
toolbar：[true，top]，
gridComplete：function（）
{
var grid = jQuery（＃purchasedetailsgrid）;
var ids = grid.jqGrid（'getDataIDs'）;
if（ids ==''）
{
grid.addRowData（selIRow，{}）;
grid.jqGrid（'editRow'，selIRow，false，sitepath +'purchase / purchase_grid'）;
}
for（var i = 0; i< ids.length; i ++）
{
}
}，
：'Purchase List'，
}）;
jQuery（＃purchasedetailsgrid）。jqGrid（'navGrid'，'＃purchasedetailstoolbar'，{view：false，edit：false，add：false，del：false，search：false}
jQuery（＃purchasedetailsgrid）。jqGrid（'inlineNav'，'＃purchasedetailstoolbar'）;
jQuery（＃purchasedetailsgrid）。jqGrid（'filterToolbar'，{stringResult：false，searchOnEnter：false}，{autosearch：true}）;
var temp_purchase = $（＃purchasedetailsgrid_header）。html（）;
$（＃t_purchasedetailsgrid）。html（temp_purchase）;
$（＃refresh_purchasedetailsgrid）。attr（'title'，Reload Grid）;
现在任何人都可以建议我如何从一个列获取值，
提前Thnx
解决方案
您当前的代码有很多问题。例如，你写的是你需要的金额将基于qty和速率计算，但你在'rate'和'amount'列中定义了一些 dataEvents ，而不是'qty'和rate列。下一个问题，你直接在 gridComplete 里使用 editRow 方法。因此， inlineNav 工具栏中的按钮将保持在错误的状态。另一个问题是，你需要根据'qty'和'rate'重新计算'amount'，不仅在'qty'和'rate'的焦点丢失，而且还保存在输入。
为了更容易解决上述问题，我写了演示，您可以修改对应您的确切要求。您可以在下面找到演示的最重要的部分：
var editingRowId = undefined，
recomputeAmount = function {
var rate = $（＃+ editingRowId +_rate）。val（），
qty = $（＃+ editingRowId +_qty）。 $ b newAmount = parseFloat（rate）* parseFloat（qty）;
$（＃+ editingRowId +_amount）。val（isFinite（newAmount）？newAmount：0）;
}，
myEditParam = {
keys：true，
oneditfunc：function（id）{
editingRowId = id;
}，
afterrestorefunc：function（id）{
editingRowId = undefined;
}，
aftersavefunc：function（id）{
var $ this = $（this），
rate = $ this.jqGrid（getCell ），
qty = $ this.jqGrid（getCell，id，qty），
newAmount = parseFloat（rate）* parseFloat（qty）;
$ this.jqGrid（setCell，id，amount，newAmount）;
editingRowId = undefined;
}
}，
numInput = {
type：'keydown'，
fn：function（e）{
var key = e.which;
//只允许'0'< = key< ='9'或key ='。'，Enter，Tab，Esc
if（（key< 48 || key> 57 ）&&&&&& amp;&&&&& &&& key！== $ .ui.keyCode.ESCAPE）{
return false;
}
}
}，
recompute = {
type：'focusout'，
fn：function（e）{
recomputeAmount ）;
}
};
$（＃purchasedetailsgrid）。jqGrid（{
colModel：[
...
{name：'qty'，index：'qty'，editable：true， width：85，search：false，editrules：{number：true，maxlength：5}，
editoptions：{
dataInit：function（elem）{$（elem）.focus .select（）;}）}，
dataEvents：[numInput，recompute]
}
}，
{name：'rate'，index：'rate' 100，editable：true，search：false，editrules：{number：true，maxlength：10}，
editoptions：{
dataInit：function（elem）{$（elem）.focus {this.select（）;}）}，
dataEvents：[numInput，recompute]
}
}，
{name：'amount'，index：'amount' width：100，editable：true，search：false，editrules：{number：true，maxlength：10}}
]，
loadComplete：function（）{
var gridIdSelector ='＃' + $ .jgrid.jqID（this.id）;
if（this.rows.length> 1）{
//$(this).jqGrid('editRow'，this.rows [1] .id，myEditParam）;
$（this）.jqGrid（'setSelection'，this.rows [1] .id，true）;
setTimeout（function（）{
//我们应该在网格加载后模拟点击按钮，但
//带有cliked按钮的工具栏之后将创建inlineNav
$（gridIdSelector +_iledit）。click（）;
}，100）;
} else {
setTimeout（function（）{
//我们应该模拟点击按钮后不是网格加载，但
//在工具栏之后cliked按钮将由inlineNav
$（gridIdSelector +_iladd）创建click（）;
}，100）;
}
}
}）;
jQuery（＃purchasedetailsgrid）。jqGrid（'navGrid'，'＃purchasedetailstoolbar'，
{view：false，edit：false，add：false，del：false，search：false，refreshtitle： Reload Grid}）;
jQuery（＃purchasedetailsgrid）。jqGrid（'inlineNav'，'＃purchasedetailstoolbar'，
{edit：true，add：true，editParams：myEditParam，addParams：{addRowParams：myEditParam}}）;
如果需要，我可以评论部分代码不清楚。
i am using jqGrid with CodeIgniter 2.1.0 . The thing which is making me harassed is how to assign value to specific column on specific event
Suppose i am entering qty and rate in column value.....and when i loss focus from "rate" field.....the net amount should be calculated and displayed in amount field...
what i need to do here is to assign calculated value to amount field......but i am not getting any idea regarding how do i do it??
what i have done is given below :
var selIRow = 1;
var rowid='';
var iCol='';
$("#purchasedetailsgrid").jqGrid({
url: sitepath + 'purchase/purchase_grid',
datatype: 'json',
mtype: 'POST',
height:220,
width:500,
colNames:["","","Store Name","Item Name","Inner Pkg.","Outer Pkg.","Qty","Rate","Amount"],
colModel:[
{name: 'storeID_hidden_field', index:'storeID_hidden_field',hidden: true, editable: true,edittype: 'text',editrules: {edithidden:true}},
{name: 'itemID_hidden_field', index:'itemID_hidden_field',hidden: true, editable: true,edittype: 'text',editrules: {edithidden:true}},
{name:'store_id', index:'store_id',width:150,search:false,editable:true,editrules:{number:false,maxlength:10}},
{name:'item_id', index:'item_id',width:150,search:false,editable:true,editrules:{number:false,maxlength:10}},
{name:'inner_pkg', index:'inner_pkg',width:150,search:false,editable:true,editrules:{number:true,maxlength:5}},
{name:'outer_pkg', index:'outer_pkg',width:150,search:false,editable:true,editrules:{number:true,maxlength:5}},
{name:'qty', index:'qty',editable:true,width:85,search:false,editrules:{number:true,maxlength:5}},
{name:'rate', index:'rate',width:100,editable:true,search:false,editrules:{number:true,maxlength:10},
editoptions: {
dataInit: function (elem) { $(elem).focus(function () { this.select(); }) },
dataEvents: [
{
type: 'keydown',
fn: function (e) {
var key = e.charCode || e.keyCode;
if (key == 9)//tab
{
$('#amount').val();//here in val() i need to write the value of qty and rate field
}
}
}
]
}
},
{name:'amount', index:'amount',width:100,editable:true,search:false,editrules:{number:true,maxlength:10},
editoptions: {
dataInit: function (elem) { $(elem).focus(function () { this.select(); }) },
dataEvents: [
{
type: 'keydown',
fn: function (e) {
var key = e.charCode || e.keyCode;
if (key == 13)//enter
{
var grid = $('#purchasedetailsgrid');
//Save editing for current row
grid.jqGrid('saveRow', selIRow, false, sitepath + 'purchase/purchase_grid');
selIRow++;
//If at bottom of grid, create new row
//if (selIRow++ == grid.getDataIDs().length) {
grid.addRowData(selIRow, {});
//}
//Enter edit row for next row in grid
grid.jqGrid('editRow', selIRow, false, sitepath + 'purchase/purchase_grid');
}
}
}
]
}
}
],
pager: '#purchasedetailstoolbar',
rowNum:10,
rowList:[10,20,30],
sortname: 'inventory_id',
sortorder: 'desc',
viewrecords: true,
rownumbers: true,
gridview: true,
multiselect: false,
autoresize:true,
autowidth: true,
editurl: sitepath + 'purchase/purchase_grid',
toolbar: [true,"top"],
gridComplete: function ()
{
var grid = jQuery("#purchasedetailsgrid");
var ids = grid.jqGrid('getDataIDs');
if(ids == '')
{
grid.addRowData(selIRow, {});
grid.jqGrid('editRow', selIRow, false, sitepath + 'purchase/purchase_grid');
}
for (var i = 0; i < ids.length; i++)
{
}
},
caption: 'Purchase List',
});
jQuery("#purchasedetailsgrid").jqGrid('navGrid','#purchasedetailstoolbar',{view:false,edit:false,add:false,del:false,search: false});
jQuery("#purchasedetailsgrid").jqGrid('inlineNav','#purchasedetailstoolbar');
jQuery("#purchasedetailsgrid").jqGrid('filterToolbar',{stringResult:false,searchOnEnter : false},{autosearch: true});
var temp_purchase = $("#purchasedetailsgrid_header").html();
$("#t_purchasedetailsgrid").html(temp_purchase);
$("#refresh_purchasedetailsgrid").attr('title',"Reload Grid");
Now can anyone suggest me how will i get value from one column and assign it another?
Any suggestions will be appreciated.
Thnx in advance
解决方案
You current code have many problems. For example you wrote that you need that amount will be calculated based on qty and rate, but you defined some dataEvents in 'rate' and 'amount' columns instead of 'qty' and 'rate' columns. The next problem that you use editRow method directly inside of gridComplete. So the buttons from the inlineNav toolbar will stay in the wrong status. One more problem is that you need to recompute the 'amount' based on 'qty' and 'rate' not only on the loss of focus from 'qty' and 'rate', but also on saving the values on Enter.
To make solving of above problems easier I wrote the demo which you can modify corresponds your exact requirements. The most important part of the demo you can find below:
var editingRowId = undefined,
recomputeAmount = function () {
var rate = $("#" + editingRowId + "_rate").val(),
qty = $("#" + editingRowId + "_qty").val(),
newAmount = parseFloat(rate) * parseFloat(qty);
$("#" + editingRowId + "_amount").val(isFinite(newAmount) ? newAmount : 0);
},
myEditParam = {
keys: true,
oneditfunc: function (id) {
editingRowId = id;
},
afterrestorefunc: function (id) {
editingRowId = undefined;
},
aftersavefunc: function (id) {
var $this = $(this),
rate = $this.jqGrid("getCell", id, "rate"),
qty = $this.jqGrid("getCell", id, "qty"),
newAmount = parseFloat(rate) * parseFloat(qty);
$this.jqGrid("setCell", id, "amount", newAmount);
editingRowId = undefined;
}
},
numInput = {
type: 'keydown',
fn: function (e) {
var key = e.which;
// allow only '0' <= key <= '9' or key = '.', Enter, Tab, Esc
if ((key < 48 || key > 57) && key !== $.ui.keyCode.PERIOD &&
key !== $.ui.keyCode.TAB && key !== $.ui.keyCode.ENTER && key !== $.ui.keyCode.ESCAPE) {
return false;
}
}
},
recompute = {
type: 'focusout',
fn: function (e) {
recomputeAmount();
}
};
$("#purchasedetailsgrid").jqGrid({
colModel: [
...
{name:'qty', index:'qty',editable:true,width:85,search:false,editrules:{number:true,maxlength:5},
editoptions: {
dataInit: function (elem) { $(elem).focus(function () { this.select(); }) },
dataEvents: [ numInput, recompute ]
}
},
{name:'rate', index:'rate',width:100,editable:true,search:false,editrules:{number:true,maxlength:10},
editoptions: {
dataInit: function (elem) { $(elem).focus(function () { this.select(); }) },
dataEvents: [ numInput, recompute ]
}
},
{name:'amount', index:'amount',width:100,editable:true,search:false,editrules:{number:true,maxlength:10}}
],
loadComplete: function () {
var gridIdSelector = '#' + $.jgrid.jqID(this.id);
if (this.rows.length > 1) {
//$(this).jqGrid('editRow', this.rows[1].id, myEditParam);
$(this).jqGrid('setSelection', this.rows[1].id, true);
setTimeout(function() {
// we should simulate click of the button not after the grid is loaded, but
// after the toolbar with the cliked button will be created by inlineNav
$(gridIdSelector + "_iledit").click();
}, 100);
} else {
setTimeout(function() {
// we should simulate click of the button not after the grid is loaded, but
// after the toolbar with the cliked button will be created by inlineNav
$(gridIdSelector + "_iladd").click();
}, 100);
}
}
});
jQuery("#purchasedetailsgrid").jqGrid('navGrid','#purchasedetailstoolbar',
{view:false,edit:false,add:false,del:false,search: false, refreshtitle: "Reload Grid"});
jQuery("#purchasedetailsgrid").jqGrid('inlineNav','#purchasedetailstoolbar',
{edit: true, add: true, editParams: myEditParam, addParams: {addRowParams: myEditParam}});
If it's needed I can comment unclear parts of the code.
这篇关于我如何分配值到jqGird的列？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
