免费jqGrid - 行未进入编辑
问题描述:
我正在使用免费的jqGrid 4.13.0为一个小项目,我似乎无法使行从动作按钮和inlineNav
编辑按钮进入编辑模式。免费jqGrid - 行未进入编辑
行通过“添加”按钮添加,但他们不进入编辑模式。尝试通过使用任何按钮进入编辑模式也不起作用。
难道是他们在HTML中输入的CSS/JS文件的顺序?我错过了一个js文件?
我目前有2个网格几乎相同,都没有工作。
<link rel="stylesheet" type="text/css" href="jqueryUI/jquery-ui.css"></link>
<link rel="stylesheet" type="text/css" href="jqueryUI/jquery-ui.min.css"></link>
<link rel="stylesheet" type="text/css" href="jqueryUI/jquery-ui.theme.css"></link>
<link rel="stylesheet" type="text/css" media="screen" href="jqueryGrid/css/ui.jqgrid.css"></link>
<link rel='stylesheet' href='css/bootstrap.css'></link>
<link rel="stylesheet" type="text/css" href="css/cascade.css" />
<script src="jquery/jquery-1.12.1.min.js" type="text/javascript"></script>
<script src="jqueryUI/jquery-ui.min.js" type="text/javascript"></script>
<script src="jqueryGrid/js/i18n/grid.locale-en.js" type="text/javascript"> </script>
<script src="jqueryGrid/js/jquery.jqgrid.min.js" type="text/javascript"> </script>
<script src="customerGrid.js" type="text/javascript" ></script>
<script src="customerOrderGrid.js" type="text/javascript" ></script>
//// customerGrid.js
文件:
$(function() {
var grid = $("#customersGrid");
grid.jqGrid({
url: "/LicentaREST/rest/customers/getCustomersGrid",
mtype: "POST",
datatype: "json",
ajaxGridOptions: {contentType: 'application/json; charset=utf-8'},
serializeGridData: function (postData) {
if (postData.searchField === undefined) postData.searchField = null;
if (postData.searchString === undefined) postData.searchString = null;
if (postData.searchOper === undefined) postData.searchOper = null;
return JSON.stringify(postData);
}
},
colModel: [
{name: 'ID', index: 'id', width: 55, hidden: true},
{name: 'Name', index: 'name', width: 80, align: 'right', search: false},
{name: 'Phone', index: 'phone', width: 90},
{name: 'Address', index: 'address', width: 80, align: 'right', search: false},
{name: 'Client Since', index: 'clientSince', width: 80, align: 'right', search: false},
{name: 'Total Orders', index: 'totalOrders', width: 80, align: 'right', search: false},
{name: 'Total Ammount Orders', index: 'totalAmmountOrders', width: 80, align: 'right', search: false},
{name: 'Canceled Orders', index: 'canceledOrders', width: 80, align: 'right', search: false},
{name: 'Black Listed Status', index: 'blackListed', width: 80, align: 'right', search: false},
],
ondblClickRow: function (rowid) {
$.ajax({
type: "POST",
url: "/LicentaREST/rest/getCustomerOrders",
data: JSON.stringify(rowid),
success: function (response) {
if (response.errorCode == 0) {
customersOrdersGrid.jqGrid('clearGridData').jqGrid('setGridParam', 'data', response.data);
}
else {
}
},
error: function (jqXHR, textStatus, errorThrown) {
console.log(textStatus, errorThrown);
}
});
},
pager: "#customersPager",
rowNum: 15,
rowList: [15,50, 100, 250,500],
rownumbers: true,
sortname: 'id',
sortorder: 'desc',
viewrecords: true,
caption: 'Customers',
height: "330",
autowidth: true
});
grid.jqGrid('inlineNav', '#customersPager',
{
add: true,
edit: false,
save: false,
cancel: false,
addicon: 'ui-icon-plus',
addtext: 'Add',
addedrow: 'last'
});
});
答
第一。目前是4.13.2。它包含4.13.0版本中存在的一些小错误修复。所有修复与你的问题没有关系。
我看到你的代码存在以下问题:
- 的主要问题是缺少
editable: true
财产应该是由用户编辑的网格的列。 - 我建议您删除不需要的隐藏的
id
列,并使用jqGrid的cmTemplate: { editable: true }
选项在网格的所有列中设置editable: true
属性。如果您在jqGrid的大多数列中使用其他一些属性,例如width: 80, align: 'right', search: false
那么最好将cmTemplate
:cmTemplate: { editable: true, autoResizable: true, width: 80, align: 'right', search: false}
中的值移动到,默认值为colModel
的属性值。您应该跳过指定colModel
中的属性并覆盖其他列中的属性。例如,您应该在phone
列中继续指定width: 90
。 -
colModel
的属性似乎是错误的。您不包含从服务器返回的任何测试数据(来自url: "/LicentaREST/rest/customers/getCustomersGrid"
),但您似乎混合了name
,index
和label
属性colModel
的含义。name
就像是该列的ID。它不能有空格。像name: 'Black Listed Status'
这样的值是完全错误的。你的意思可能是label: 'Black Listed Status'
。您用于index
属性的值应该可能是name
属性的值。如果真的需要,严格建议避免指定任何index
属性。因此,name: 'Black Listed Status', index: 'blackListed'
例如应该像jqGrid的所有其他列一样更改为label: 'Black Listed Status', name: 'blackListed'
。 - 建议使用
pager: true
而不是pager: "#customersPager"
,并跳过'#customersPager'
参数inlineNav
。您可以从页面的HTML标记中删除不需要的<div id="customersPager"></div>
,并简化代码。 - 我建议考虑删除
height: "330"
(更正为height: 330
)以使用默认height: "auto"
。rowNum
值将定义案例中网格的高度。默认设置height: "auto"
不是所有情况下的最佳选择,但最多。 - 您应该查看您在页面上包含的CSS和JS文件。包括
jquery-ui.css
,jquery-ui.min.css
和jquery-ui.theme.css
是错误的。仅包括jquery-ui.min.css
就足够了。您可以包含ui.jqgrid.min.css
而不是包含ui.jqgrid.css
。您应该删除grid.locale-en.js
,因为文件jquery.jqgrid.min.js
已经包含en-US
的所有设置,从grid.locale-en.js
。 - 建议在页面中包含Font Awesome 4.x CSS并添加
iconSet: "fontAwesome"
选项。它改善了网格中显示的图标的外观。您应该从inlineNav
的呼叫中删除addicon: 'ui-icon-plus'
选项。这是使用默认jQuery UI图标时的默认值,如果您使用Font Awesome图标,该值将会出错。inlineNav
的呼叫可以缩减为grid.jqGrid('inlineNav', {edit: false, save: false, cancel: false, addtext: 'Add', addParams: { position: 'last' }}
- 变量
customersOrdersGrid
,您在ondblClickRow
中使用的变量似乎未定义。我建议您将"use strict";
作为$(function() {...});
函数的第一个语句,以便找到更容易发生的此类错误。 - 您不会发布有关可能在服务器上返回的总行数的任何信息。如果行数不够大,我建议您使用
loadonce: true
选项并一次返回所有数据。例如小于1000或小于10000. The demo可用于测试本地的性能每页4000行,13列和20行的网格的分页,排序和过滤。 Another demo甚至可以使用40000行,如果您使用Chrome,Firefox或Edge等现代网络浏览器,它的工作速度也非常快。您应该考虑将数据发送到服务器的时间以及操作的所有开销。使用loadonce: true
简化了服务器代码和客户端代码,并在大多数情况下提高了电网的责任。确切的选择仍然取决于网格中的总行数。这对于很多行是不好的。
奥列格,一如既往,你一直是一个救生员。它蕴含了我浪费了多少时间,因为我忘记了“可编辑:真实”。此外,我会确保实施您所建议的所有更改。非常感谢您的帮助! – IvanSt
@IvanSt:不客气! – Oleg