免费 jqGrid - 行不进入编辑
Free jqGrid - Row not entering edit
我正在为一个小项目使用免费的 jqGrid 4.13.0，我似乎无法通过操作按钮和 inlineNav 编辑按钮使行进入编辑模式。
行是通过 "add" 按钮添加的，但它们没有进入编辑模式。尝试使用任何按钮进入编辑模式也不起作用。
难道是 中的 css/js 个文件在 html 中输入的顺序？我缺少一个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}，它指定 default colModel 的属性值。您应该跳过 colModel 中的属性指定并覆盖其他列中的属性。例如，您应该继续在 phone 列中指定 width: 90。
colModel 的属性似乎有误。您没有包含来自服务器（来自 url: "/LicentaREST/rest/customers/getCustomersGrid"）的任何测试数据 return，但您似乎混淆了 name、index 和 [=25] 的含义=] 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" 并跳过 inlineNav 中的 '#customersPager' 参数。您可以从页面的 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 已经包含 grid.locale-en.js. 中 en-US 的所有设置
- 建议在页面中包含 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' }}
- 您在
ondblClickRow 中使用的变量 customersOrdersGrid 似乎未定义。我建议您将 "use strict"; 作为 $(function() {...}); 函数的第一条语句包含在内，以更容易地找到此类错误。
- 您没有发布任何关于总行数的信息，这些信息可能会在服务器上 returned。如果总行数不够大，我建议您立即使用
loadonce: true 选项和 return 所有数据 。例如小于 1000 或小于 10000。The demo can be used to test the performance of local paging, sorting and filtering of the grid with 4000 rows, 13 columns and 20 rows per page. Another demo 甚至使用 40000 行，如果您使用 Chrome、Firefox 或 Edge 等现代网络浏览器，它也可以非常快速地工作。您应该考虑将数据发送到服务器的时间以及操作的所有开销。 loadonce: true 的使用简化了服务器代码和客户端代码，并在大多数情况下提高了网格的责任。确切的选择仍然取决于网格中的总行数。这对非常多的行来说不是很好。
我正在为一个小项目使用免费的 jqGrid 4.13.0，我似乎无法通过操作按钮和 inlineNav 编辑按钮使行进入编辑模式。
行是通过 "add" 按钮添加的，但它们没有进入编辑模式。尝试使用任何按钮进入编辑模式也不起作用。
难道是 中的 css/js 个文件在 html 中输入的顺序？我缺少一个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}，它指定 defaultcolModel的属性值。您应该跳过colModel中的属性指定并覆盖其他列中的属性。例如，您应该继续在phone列中指定width: 90。 colModel的属性似乎有误。您没有包含来自服务器（来自url: "/LicentaREST/rest/customers/getCustomersGrid"）的任何测试数据 return，但您似乎混淆了name、index和 [=25] 的含义=]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"并跳过inlineNav中的'#customersPager'参数。您可以从页面的 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已经包含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' }} - 您在
ondblClickRow中使用的变量customersOrdersGrid似乎未定义。我建议您将"use strict";作为$(function() {...});函数的第一条语句包含在内，以更容易地找到此类错误。 - 您没有发布任何关于总行数的信息，这些信息可能会在服务器上 returned。如果总行数不够大，我建议您立即使用
loadonce: true选项和 return 所有数据 。例如小于 1000 或小于 10000。The demo can be used to test the performance of local paging, sorting and filtering of the grid with 4000 rows, 13 columns and 20 rows per page. Another demo 甚至使用 40000 行，如果您使用 Chrome、Firefox 或 Edge 等现代网络浏览器，它也可以非常快速地工作。您应该考虑将数据发送到服务器的时间以及操作的所有开销。loadonce: true的使用简化了服务器代码和客户端代码，并在大多数情况下提高了网格的责任。确切的选择仍然取决于网格中的总行数。这对非常多的行来说不是很好。
en-US 的所有设置