我正在为一个小项目使用Free jqGrid 4.13.0，我似乎无法使行从操作按钮和inlineNav编辑按钮进入编辑模式。
这些行通过“添加”按钮添加，但是它们不进入编辑模式。尝试通过使用任何按钮进入编辑模式都不起作用。
难道是在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'
});
});
最佳答案
首先，我严格建议使用发布的最新免费jqGrid版本。当前是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中指定属性的步骤，并覆盖其他列中的属性。例如，您应该继续在width: 90列中指定phone。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.css，还可以包含ui.jqgrid.min.css。您应该删除grid.locale-en.js，因为文件jquery.jqgrid.min.js已经包含en-US中grid.locale-en.js的所有设置。
建议在页面上包含Font Awesome 4.x CSS并添加iconSet: "fontAwesome"选项。它改善了网格中显示的图标的外观。您应该从addicon: 'ui-icon-plus'的调用中删除inlineNav选项。如果使用默认的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的使用简化了服务器代码和客户端代码，并在大多数情况下提高了网格的责任感。确切的选择仍然取决于网格中的总行数。对于大量的行来说，这将是不好的。
关于javascript - 免费jqGrid-行未输入编辑，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36943634/