如何在jqgrid中实现内联编辑
我在jqgrid中启动，我希望在jqgrid中实现内联编辑我有这个网格
$(function () {
var grid = $('#list');
grid.jqGrid({
url: 'jQGridHandler.ashx',
postData: { ActionPage: 'ClearanceCost', Action: 'Fill' },
ajaxGridOptions: { cache: false },
loadonce: true,
datatype: 'json',
height: 490,
colNames: ['REQUEST_ID','WAYBILL_NO', 'COST_ID', 'COST_NAME','COST_AMOUNT', 'CURRENCY_ID ', 'CURRENCY_NAME','REMARK'],
colModel: [
{ name: 'REQUEST_ID', width: 100, sortable: true,hidden:true },
{ name: 'WAYBILL_NO', width: 100, sortable: true, hidden: true },
{ name: 'COST_ID', width: 200, sortable: true, hidden: true },
{ name: 'COST_NAME', width: 200, sortable: true },
{ name: 'COST_AMOUNT', width: 100, sortable: true },
{ name: 'CURRENCY_ID', width: 100, sortable: true, hidden: true },
{ name: 'CURRENCY_NAME', width: 200, sortable: true },
{ name: 'REMARK', width: 200, sortable: true }
],
gridview: true,
rowNum: 20,
rowList: [20, 40, 60],
pager: '#pager',
sortname: 'REQUEST_ID',
viewrecords: true,
sortorder: 'ASC',
rownumbers: true,
editurl: 'jQGridHandler.ashx',
onSelectRow: function (id) {
if (id && id !== lastsel) {
jQuery('#list').jqGrid('restoreRow', lastsel);
jQuery('#list').jqGrid('editRow', id, true);
lastsel = id;
}
}
});
grid.jqGrid('navGrid', '#pager', { add: true, edit: true, del: true }, {}, {}, {},
{ multipleSearch: true, overlay: false, width: 460 });
我首先在jqgrid中填写所有costType并且我想要用户在Amount Cell中输入金额并在currency_unit单元格中选择货币单位，当用户点击该行时，此行中的行更改可编辑，但我希望当页面加载所有行时是可编辑的。 谢谢大家。
我改变代码但我无法在数据库中获取数据行我编写此代码
$(function () {
var lastSel;
var grid = $('#list');
calculateTotal = function () {
var totalAmount = grid.jqGrid('getCol', 'COST_AMOUNT', false, 'd');
var totalTax = grid.jqGrid('getCol', 'COST_NAME', false, 'd');
alert(totalAmount.length);
for (var i = 0; i <= totalAmount.length - 1; i++) {
alert(totalTax[i] + "=" + totalAmount[i]);
}
};
grid.jqGrid({
url: 'jQGridHandler.ashx',
postData: { ActionPage: 'ClearanceCost', Action: 'Fill' },
ajaxGridOptions: { cache: false },
loadonce: true,
direction: "rtl",
datatype: 'json',
height: 490,
colNames: ['REQUEST_ID','WAYBILL_NO', 'COST_ID', 'COST_NAME','COST_AMOUNT', 'CURRENCY_ID ', 'CURRENCY_NAME','REMARK'],
colModel: [
{ name: 'REQUEST_ID', width: 100, sortable: true, hidden: true },
{ name: 'WAYBILL_NO', width: 100, sortable: true, hidden: true },
{ name: 'COST_ID', width: 200, sortable: true, hidden: true },
{ name: 'COST_NAME', width: 200, sortable: true },
{ name: 'COST_AMOUNT', width: 100, sortable: true, editable: true },
{ name: 'CURRENCY_ID', width: 100, sortable: true, hidden: true },
{ name: 'CURRENCY_NAME', width: 200, sortable: true, editable: true },
{ name: 'REMARK', width: 200, sortable: true, editable: true }
],
gridview: true,
rowNum: 30,
rowList: [30, 60, 90],
pager: '#pager',
sortname: 'REQUEST_ID',
viewrecords: true,
sortorder: 'ASC',
caption: 'درخواست ها......',
rownumbers: true,
loadComplete: function () {
var $this = $(this), rows = this.rows, l = rows.length, i, row;
for (i = 0; i < l; i++) {
row = rows[i];
if ($.inArray('jqgrow', row.className.split(' ')) >= 0) {
$this.jqGrid('editRow', row.id, true);
}
}
}
});
grid.jqGrid('navGrid', '#pager', { add: true, edit: true, del: true }, {}, {}, {},
{ multipleSearch: true, overlay: false, width: 460 });
$("#btnsave").click(function () {
calculateTotal();
});
});
但是这段代码没有用，先生，谢谢你的帮助。
EDIT02：我创建了这个
使用此代码。我想当用户点击保存按钮时，所有行的所有数据都发送到服务器但不能正常工作
$(document).ready(function () {
var mydata = [
{ COST_NAME: "A", COST_AMOUNT: "", CURRENCY_NAME: "" },
{ COST_NAME: "b", COST_AMOUNT: "", CURRENCY_NAME: "" },
{ COST_NAME: "c", COST_AMOUNT: "", CURRENCY_NAME: "" },
{ COST_NAME: "d", COST_AMOUNT: "", CURRENCY_NAME: "" },
{ COST_NAME: "e", COST_AMOUNT: "", CURRENCY_NAME: "" },
{ COST_NAME: "f", COST_AMOUNT: "", CURRENCY_NAME: "" },
{ COST_NAME: "g", COST_AMOUNT: "", CURRENCY_NAME: "" }
];
var lastSel;
var grid = $('#list');
calculateTotal = function () {
var totalAmount = grid.jqGrid('getCol', 'COST_AMOUNT', false, 'd');
var totalTax = grid.jqGrid('getCol', 'COST_NAME', false, 'd');
alert(totalAmount.length);
for (var i = 0; i <= totalAmount.length - 1; i++) {
alert(totalTax[i] + "=" + totalAmount[i]);
}
};
grid.jqGrid({
postData: { ActionPage: 'ClearanceCost', Action: 'Fill' },
ajaxGridOptions: { cache: false },
loadonce: true,
datatype: "local",
data: mydata,
mtype: 'POST',
height: 'auto',
colNames: [ 'COST_NAME', 'COST_AMOUNT', 'CURRENCY_NAME'],
colModel: [
{ name: 'COST_NAME', width: 200, sortable: true },
{ name: 'COST_AMOUNT', width: 100, sortable: true, editable: true },
{ name: 'CURRENCY_NAME', width: 200, sortable: true, editable: true }
],
gridview: true,
rowNum: 30,
rowList: [30, 60, 90],
pager: '#pager',
viewrecords: true,
sortorder: 'ASC',
rownumbers: true,
loadComplete: function () {
var $this = $(this), rows = this.rows, l = rows.length, i, row;
for (i = 0; i < l; i++) {
row = rows[i];
if ($.inArray('jqgrow', row.className.split(' ')) >= 0) {
$this.jqGrid('editRow', row.id, true);
}
}
}
});
grid.jqGrid('navGrid', '#pager', { add: true, edit: true, del: true }, {}, {}, {},
{ multipleSearch: true, overlay: false, width: 460 });
$("#btnsave").click(function () {
calculateTotal();
});
});
和身体
<table id="list"></table>
<input type="button" value="Save" id="btnsave"/>
感谢所有
NEW EDIT：我为此问题编写此代码
grid.jqGrid({
url: 'jQGridHandler.ashx',
postData: { ActionPage: 'ClearanceCost', Action: 'Fill' },
ajaxGridOptions: { cache: false },
loadonce: true,
direction: "rtl",
pgtext: "صفحه {0} از {1}",
datatype: 'json',
height: 490,
colNames: ['شماره درخواست', 'شماره بارنامه', 'شماره هزینه', 'نام هزینه', 'مبلغ', 'کد واحدهزینه ', 'توضیحات'],
colModel: [
{ name: 'REQUEST_ID', width: 100, sortable: true, hidden: true },
{ name: 'WAYBILL_NO', width: 100, sortable: true, hidden: true },
{ name: 'COST_ID', width: 200, sortable: true, hidden: true },
{ name: 'COST_NAME', width: 200, sortable: true },
{ name: 'COST_AMOUNT', width: 100, sortable: true, editable: true },
{ name: 'CURRENCY_ID', width: 100, sortable: true, editable: true, edittype: 'select', editoptions: {
url: "JQGridHandler.ashx?ActionPage=CurrencyUnit&Action=FillDrop",
dataInit: function (data) {
var response = jQuery.parseJSON(data.responseText);
var s = '<select>';
s += '<option value="0">انتخاب کنید</option>';
if (response && response.length) {
for (var i = 0, l = response.length; i < l; i++) {
var ri = response[i];
s += '<option value="' + ri.CURRENCY_ID + '">' + ri.CURRENCY_NAME + '</option>';
}
}
return s + "</select>";
}
}
},
{ name: 'REMARK', width: 200, sortable: true, editable: true }
],
gridview: true,
rowNum: 30,
rowList: [30, 60, 90],
pager: '#pager',
sortname: 'REQUEST_ID',
viewrecords: true,
sortorder: 'ASC',
caption: 'درخواست ها......',
rownumbers: true,
loadComplete: function () {
var strOption = "";
$.ajax({
url: 'JQGridHandler.ashx',
contentType: 'application/json; charset=utf-8',
data: { ActionPage: 'CurrencyUnit', Action: 'FillDrop' },
success: function (data) {
var rows = data.rows;
strOption = '<option value=0>انتخاب کنید</option>';
if (data.rows.length > 0) {
for (var i = 0, l = rows.length; i < l; i++) {
var ri = rows[i];
strOption += '<option value="' + ri.cell[0] + '">' + ri.cell[1] + '</option>';
}
}
},
dataType: 'json'
});
var $this = $(this);
rows = this.rows;
var l = rows.length, i, row;
for (i = 0; i < l; i++) {
row = rows[i];
// var $t = grid.jqGrid('getCell', row.id, 'CURRENCY_ID');
// var $id = $($t).attr("id");
// $("#" + $id).val(strOption);
// console.log(row.id);
var selRowId = grid.jqGrid('getGridParam', row.id);
console.log(selRowId);
console.log(grid.jqGrid('getCell', row.id, 'CURRENCY_ID'));
if ($.inArray('jqgrow', row.className.split(' ')) >= 0) {
$this.jqGrid('editRow', row.id, true);
}
}
},
editurl: "jQGridHandler.ashx"
});
grid.jqGrid('navGrid', '#pager', { add: true, edit: true, del: true }, {}, {}, {},
{ multipleSearch: true, overlay: false, width: 460 });
第一个问题：这段代码是真的吗？而我现在无法填写下拉列表。请帮帮我，先生。感谢
1 个答案:
答案 0 :(得分：2)
您可以枚举网格中的所有行，并在editRow内调用loadComplete（有关代码示例，请参阅here）。您应该了解该方法的一些缺点：
- 在循环中以内联编辑模式设置网格线可以在行数较多的情况下缓慢工作。所以你应该在案例中仔细选择
rowNum。性能降低的原因很简单：页面上每个元素的每次更改都遵循重新计算页面上所有其他元素的位置或至少reflow。editRow方法更改行中的一个单元格，然后更改另一个单元格，依此类推。在所有行的循环中应用editRow遵循在每次单元格修改之后对整个页面进行回流。如果是大型网格，您将有大量的回流。 - 如果您需要阅读编辑行中的信息，则需要执行一些操作，因为
getRowData和getCol在这种情况下不起作用。在the answer中，您可以找到相应的解决方案。如果您能够获得上次保存的数据，则可以使用getLocalRow方法。
更新：可编辑行之间的键盘导航实际上是另一个问题。然而，您可以在网格上绑定keydown事件，并在需要时将焦点更改为另一个单元格。例如，the next demo显示 Up 和 Down 箭头键如何与标准 Tab 和 Shift +一起使用标签键：
$('#list').keydown(function (e) {
var $td = $(e.target).closest("td"),
$tr = $td.closest("tr.jqgrow"),
ci, ri, rows = this.rows;
if ($td.length === 0 || $tr.length === 0) {
return;
}
ci = $.jgrid.getCellIndex($td[0]);
ri = $tr[0].rowIndex;
if (e.keyCode === $.ui.keyCode.UP) { // 38
if (ri > 0) {
$(rows[ri-1].cells[ci]).find("input,select").focus();
}
}
if (e.keyCode === $.ui.keyCode.DOWN) { // 40
if (ri + 1 < rows.length) {
$(rows[ri+1].cells[ci]).find("input,select").focus();
}
}
});
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？