在以下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屋！
查看全文
