无法在以下 jqGrid 指令中看到左侧寻呼机 [英] Unable to see the left pager in the following jqGrid directive
本文介绍了无法在以下 jqGrid 指令中看到左侧寻呼机的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是第一次为 jqGrid 工作.我想在我的应用程序中使用它的所有原生功能，例如编辑、删除、添加、排序和所有其他功能.
I am working for the jqGrid for the first time at all.I wanted to use it in my application with all its native features, like editing, deleting,a dding, sorting and all others.
我遇到了这个 项目，它似乎是 jqGrid 的一个基本实现.这是一个很好的起点.但是，我无法在左侧寻呼机中显示添加"、删除"、搜索"按钮.
I came across this project, which seems to be a basic implementation of jqGrid. It was a good starting point. However, I am having trouble displaying the Add, Delete, Search buttons in Left pager.
我尝试将寻呼机设置为 true，将其设置为 div-id.尝试设置导航网格选项.尝试将 .navGrid 函数绑定到指令中的 pager 元素.
I have tried setting the pager to true, setting it to an div-id. Tried setting nav grid options. Tried binding the .navGrid function to the pager element in directive.
但是左边的寻呼机根本不会出现.我有一个相关的问题这里.
But the left pager won't show up at all. I have a related issue here.
下面是我除了上面的指令之外的完整代码.
below is the entire code I have apart from the above directive.
<!Doctype html>
<html ng-app="poc">
<head>
<link rel="stylesheet" href="jquery-ui.css" />
<link rel="stylesheet" href="ui.jqgrid.min.css" />
<!--<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css">-->
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="jquery.jqgrid.min.js"></script>
<script type="text/javascript" src="angular-jqgrid.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body ng-controller="ctrl">
<jq-grid dataset="myData" options="myGridOptions"></jq-grid>
<div id="pager"></div>
</body>
</html>
angular.module("poc", ['angular-jqgrid']);
angular.module("poc").controller('ctrl', function ($scope) {
$scope.myData = [{ "OrderID": "10248", "CustomerID": "WILMK", "OrderDate": "1996-07-04 00:00:00", "Freight": "32.3800", "ShipName": "Vins et alcools Chevalier" }, { "OrderID": "10249", "CustomerID": "TRADH", "OrderDate": "1996-07-05 00:00:00", "Freight": "11.6100", "ShipName": null }, { "OrderID": "10250", "CustomerID": "HANAR", "OrderDate": "1996-07-08 00:00:00", "Freight": "65.8300", "ShipName": "Hanari Carnes" }, { "OrderID": "10251", "CustomerID": "VICTE", "OrderDate": "1996-07-08 00:00:00", "Freight": "41.3400", "ShipName": "Victuailles en stock" }, { "OrderID": "10252", "CustomerID": "SUPRD", "OrderDate": "1996-07-09 00:00:00", "Freight": "51.3000", "ShipName": null }, { "OrderID": "10253", "CustomerID": "HANAR", "OrderDate": "1996-07-10 00:00:00", "Freight": "58.1700", "ShipName": "Hanari Carnes" }, { "OrderID": "10254", "CustomerID": "CHOPS", "OrderDate": "1996-07-11 00:00:00", "Freight": "22.9800", "ShipName": "Chop-suey Chinese" }, { "OrderID": "10255", "CustomerID": "RICSU", "OrderDate": "1996-07-12 00:00:00", "Freight": "148.3300", "ShipName": "Richter Supermarkt" }, { "OrderID": "10256", "CustomerID": "WELLI", "OrderDate": "1996-07-15 00:00:00", "Freight": "13.9700", "ShipName": "Wellington Importadora" }, { "OrderID": "10257", "CustomerID": "HILAA", "OrderDate": "1996-07-16 00:00:00", "Freight": "81.9100", "ShipName": null }, { "OrderID": "10258", "CustomerID": "ERNSH", "OrderDate": "1996-07-17 00:00:00", "Freight": "140.5100", "ShipName": "Ernst Handel" }, { "OrderID": "10259", "CustomerID": "CENTC", "OrderDate": "1996-07-18 00:00:00", "Freight": "3.2500", "ShipName": "Centro comercial Moctezuma" }, { "OrderID": "10260", "CustomerID": "OLDWO", "OrderDate": "1996-07-19 00:00:00", "Freight": "55.0900", "ShipName": null }, { "OrderID": "10261", "CustomerID": "QUEDE", "OrderDate": "1996-07-19 00:00:00", "Freight": "3.0500", "ShipName": null }, { "OrderID": "10262", "CustomerID": "RATTC", "OrderDate": "1996-07-22 00:00:00", "Freight": "48.2900", "ShipName": "Rattlesnake Canyon Grocery" }, { "OrderID": "10263", "CustomerID": "ERNSH", "OrderDate": "1996-07-23 00:00:00", "Freight": "146.0600", "ShipName": "Ernst Handel" }, { "OrderID": "10264", "CustomerID": "FOLKO", "OrderDate": "1996-07-24 00:00:00", "Freight": "3.6700", "ShipName": null }, { "OrderID": "10265", "CustomerID": "BLONP", "OrderDate": "1996-07-25 00:00:00", "Freight": "55.2800", "ShipName": null }, { "OrderID": "10266", "CustomerID": "WARTH", "OrderDate": "1996-07-26 00:00:00", "Freight": "25.7300", "ShipName": "Wartian Herkku" }, { "OrderID": "10267", "CustomerID": "FRANK", "OrderDate": "1996-07-29 00:00:00", "Freight": "208.5800", "ShipName": "Frankenversand" }];
$scope.myGridOptions = {
colNames: ["OrderID", "Customer ID", "Order Date", "Freight", "Ship Name",],
colModel:[
{ label: 'OrderID', name: 'OrderID', key: true, width: 75 },
{ label: 'Customer ID', name: 'CustomerID', width: 50 },
{ label: 'Order Date', name: 'OrderDate', width: 150 },
{ label: 'Freight', name: 'Freight', width: 150 },
{ label:'Ship Name', name: 'ShipName', width: 150 }
],
cmTemplate: { autoResizable: true, editable: true },
hoverrows: true,
rowNum: 20,
autoResizing: { compact: true },
rowList: [5, 10, 20, "10000:All"],
viewrecords: true,
sortable: true,
pager: true,
pgbuttons : true,
pagerRightWidth: 150,
sortname: "OrderID",
sortorder: "desc",
formEditing: {
width: 310,
closeOnEscape: true,
closeAfterEdit: true,
savekey: [true, 13]
},
formViewing: {
labelswidth: "80%"
},
navOptions: {
view: true,
},
singleSelectClickMode: "selectonly", // optional setting
ondblClickRow: function (rowid) {
$(this).jqGrid("editGridRow", rowid);
},
caption: "Angular Implementation of jqGrid",
width: 1280,
height: 450,
};
});
这就是我现在所拥有的.我的控制台没有显示任何错误，我想我几乎已经准备好了所有需要的库.除了空白的左侧寻呼机之外，网格显示正常.
This is simply all I have for now. My console shows no error, and I think I pretty much have all needed libraries in place. The grid displays fine except for the blank left pager.
我在配置对象中遗漏了什么吗?如何让添加删除按钮出现.
Am I missing something in configuration object. How can I make the Add Delete button to appear.
感谢任何帮助.
推荐答案
我不知道 angular-jqgrid，但它的代码很简单，你可以直接插入到你的代码中.我的旧答案中的代码大致相同.我使用您的 colModel 对其进行了修改，并仅插入了一些您可能感兴趣的其他属性和选项.
I don't know angular-jqgrid, but it's code is simple and you can insert it in your code directly. The code from my old answer, does mostly the same. I modified it using your colModel and inserted just some additional properties and options, which can be interesting for you.
演示使用了 3 行
$grid.jqGrid(newValue)
.jqGrid("navGrid")
.jqGrid("filterToolbar");
调用 navGrid 和 filterToolbar.您可以轻松扩展代码以调用更多选项.
which call navGrid and filterToolbar. You can easy extend the code to call more options.
我插入了我在下面的演示中使用的代码:
I insert the code, which I used in the demo below:
var initDatepicker = function (elem) {
var self = this;
$(elem).datepicker({
minDate: new Date(1995, 1 - 1, 1),
defaultDate: new Date(1996, 6, 15),
onSelect: function () {
setTimeout(function () {
self.triggerToolbar();
}, 0);
},
dateFormat: "dd-M-yy",
autoSize: true,
changeYear: true,
changeMonth: true,
showButtonPanel: true,
showWeek: true
});
};
var myApp = angular.module("myApp", []);
myApp.directive("ngJqGrid", function ($compile) {
return {
restrict: "E",
scope: {
config: "=",
data: "="
},
link: function (scope, element, attrs) {
var $grid;
scope.$watch("config", function (newValue) {
element.children().empty();
$grid = angular.element("<table></table>");
element.append($compile($grid)(scope));
element.append($grid);
angular.extend(newValue, {
loadComplete: function () {
$compile(this)(scope);
},
autoencode: true,
iconSet: "fontAwesome"
});
$grid.jqGrid(newValue)
.jqGrid("navGrid")
.jqGrid("filterToolbar");
});
scope.$watch("data", function (newValue, oldValue) {
var p = $grid.jqGrid("getGridParam");
p.data = newValue;
$grid.jqGrid("destroyFilterToolbar");
$grid.trigger("reloadGrid");
$grid.jqGrid("filterToolbar");
});
}
};
});
myApp.controller("MyController", function ($scope) {
$scope.config = {
colModel:[
{ label: 'OrderID', name: 'OrderID', key: true, width: 75, sorttype: "integer" },
{ label: 'Customer ID', name: 'CustomerID', width: 90, stype: "select",
searchoptions: {
clearSearch: true,
sopt: ["eq", "ne"],
generateValue: true,
noFilterText: "Any"
}},
{ label: 'Order Date', name: 'OrderDate', width: 125,
autoResizing: { minColWidth: 90 },
align: "center", sorttype: "date",
formatter: "date", formatoptions: { newformat: "d-M-Y" },
editoptions: { dataInit: initDatepicker },
searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"], dataInit: initDatepicker } },
{ label: 'Freight', name: 'Freight', template: "number", width: 70,
autoResizing: { minColWidth: 65 },},
{ label: 'Ship Name', name: 'ShipName', width: 180,
createColumnIndex: true,
searchoptions: {
dataInit: function (elem, options) {
$(elem).autocomplete({
source: $(this).jqGrid("getUniqueValueFromColumnIndex", "ShipName"),
delay: 0,
minLength: 0
});
},
sopt: [ "cn", "eq", "bw", "ew", "bn", "nc", "en" ],
clearSearch: true
}}
],
cmTemplate: { autoResizable: true, editable: true },
hoverrows: true,
rowNum: 20,
pagerRightWidth: 105,
autoResizing: { compact: true },
rowList: [5, 10, 20, "10000:All"],
viewrecords: true,
sortable: true,
pager: true,
sortname: "OrderID",
sortorder: "desc",
formEditing: {
width: 310,
closeOnEscape: true,
closeAfterEdit: true,
savekey: [true, 13]
},
formViewing: {
labelswidth: "80%"
},
navOptions: {
view: true,
},
singleSelectClickMode: "selectonly", // optional setting
ondblClickRow: function (rowid) {
$(this).jqGrid("editGridRow", rowid);
},
caption: "Angular Implementation of jqGrid"//,
//width: 1280,
//height: 450
};
$scope.data = [
{ "OrderID": "10248", "CustomerID": "WILMK", "OrderDate": "1996-07-04 00:00:00", "Freight": "32.3800", "ShipName": "Vins et alcools Chevalier" },
{ "OrderID": "10249", "CustomerID": "TRADH", "OrderDate": "1996-07-05 00:00:00", "Freight": "11.6100", "ShipName": null },
{ "OrderID": "10250", "CustomerID": "HANAR", "OrderDate": "1996-07-08 00:00:00", "Freight": "65.8300", "ShipName": "Hanari Carnes" },
{ "OrderID": "10251", "CustomerID": "VICTE", "OrderDate": "1996-07-08 00:00:00", "Freight": "41.3400", "ShipName": "Victuailles en stock" },
{ "OrderID": "10252", "CustomerID": "SUPRD", "OrderDate": "1996-07-09 00:00:00", "Freight": "51.3000", "ShipName": null },
{ "OrderID": "10253", "CustomerID": "HANAR", "OrderDate": "1996-07-10 00:00:00", "Freight": "58.1700", "ShipName": "Hanari Carnes" },
{ "OrderID": "10254", "CustomerID": "CHOPS", "OrderDate": "1996-07-11 00:00:00", "Freight": "22.9800", "ShipName": "Chop-suey Chinese" },
{ "OrderID": "10255", "CustomerID": "RICSU", "OrderDate": "1996-07-12 00:00:00", "Freight": "148.3300", "ShipName": "Richter Supermarkt" },
{ "OrderID": "10256", "CustomerID": "WELLI", "OrderDate": "1996-07-15 00:00:00", "Freight": "13.9700", "ShipName": "Wellington Importadora" },
{ "OrderID": "10257", "CustomerID": "HILAA", "OrderDate": "1996-07-16 00:00:00", "Freight": "81.9100", "ShipName": null },
{ "OrderID": "10258", "CustomerID": "ERNSH", "OrderDate": "1996-07-17 00:00:00", "Freight": "140.5100", "ShipName": "Ernst Handel" },
{ "OrderID": "10259", "CustomerID": "CENTC", "OrderDate": "1996-07-18 00:00:00", "Freight": "3.2500", "ShipName": "Centro comercial Moctezuma" },
{ "OrderID": "10260", "CustomerID": "OLDWO", "OrderDate": "1996-07-19 00:00:00", "Freight": "55.0900", "ShipName": null },
{ "OrderID": "10261", "CustomerID": "QUEDE", "OrderDate": "1996-07-19 00:00:00", "Freight": "3.0500", "ShipName": null },
{ "OrderID": "10262", "CustomerID": "RATTC", "OrderDate": "1996-07-22 00:00:00", "Freight": "48.2900", "ShipName": "Rattlesnake Canyon Grocery" },
{ "OrderID": "10263", "CustomerID": "ERNSH", "OrderDate": "1996-07-23 00:00:00", "Freight": "146.0600", "ShipName": "Ernst Handel" },
{ "OrderID": "10264", "CustomerID": "FOLKO", "OrderDate": "1996-07-24 00:00:00", "Freight": "3.6700", "ShipName": null },
{ "OrderID": "10265", "CustomerID": "BLONP", "OrderDate": "1996-07-25 00:00:00", "Freight": "55.2800", "ShipName": null },
{ "OrderID": "10266", "CustomerID": "WARTH", "OrderDate": "1996-07-26 00:00:00", "Freight": "25.7300", "ShipName": "Wartian Herkku" },
{ "OrderID": "10267", "CustomerID": "FRANK", "OrderDate": "1996-07-29 00:00:00", "Freight": "208.5800", "ShipName": "Frankenversand" }
];
});
这篇关于无法在以下 jqGrid 指令中看到左侧寻呼机的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
