在以下jqGrid指令中看不到左寻呼机
鲁钱明
问题内容：
问题答案：
我是第一次为jqGrid工作。我想在我的应用程序中使用它的所有本机功能，例如编辑，删除，填充，排序和所有其他功能。
我遇到了这个项目，它似乎是jqGrid的基本实现。这是一个很好的起点。但是，我在左寻呼机中显示“添加”，“删除”，“搜索”按钮时遇到问题。
我尝试将寻呼机设置为true，将其设置为div-id。尝试设置导航网格选项。尝试将.navGrid函数绑定到指令中的pager元素。
但是，左寻呼机根本不会显示。我这里有一个相关的问题。
以下是除上述指令外的全部代码。
<!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,
};
});
这只是我现在所拥有的。我的控制台未显示任何错误，我想我几乎已经准备好了所有需要的库。除空白的左寻呼机外，网格显示正常。
我在配置对象中缺少某些内容吗？如何使“添加删除”按钮出现。
任何帮助表示赞赏。
问题答案：
我不知道angular-jqgrid，但是它的代码很简单，您可以直接将其插入代码中。我的旧答案中的代码执行的操作大致相同。我使用修改了它，colModel并只插入了一些其他的属性和选项，这些对您来说可能很有趣。
该演示使用了3行
$grid.jqGrid(newValue)
.jqGrid("navGrid")
.jqGrid("filterToolbar");
哪个呼叫navGrid和filterToolbar。您可以轻松扩展代码以调用更多选项。
我插入以下示例中使用的代码：
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" }
];
});
类似资料：
-
所以我试着用可视寻呼机在屏幕间切换。我试着不使用碎片来做这件事，但是我不能让它工作。我在第59行得到一个错误，它是mview pager . setadapter(mCustomPagerAdapter)；当我试图设置我的适配器时出现空指针异常。我在这里找到了一个例子。我想我在这个问题上有些力不从心，这是我第一次尝试使用可视寻呼机。 这是我的路由详细信息活动，我试图设置适配器 这是我的自定义页面适
-
我实现了水平和垂直视图寻呼机的工作水平（左右滑动侧方式）或垂直（上下滑动）只。 但我需要捕捉两个滑动输入，如果以任何一种方式滑动，视图寻呼机都应该工作。在单个方向上。 即:如果上下滑动，页面应该上下移动，如果左右滑动，页面也应该上下移动。 编辑：我可以覆盖查看寻呼机的任何方法以获得两个滑动输入。
-
我希望实现以下目标： 我能够使用以下库：https://github.com/Hongchae/CoverFlowPager 经过一些定制之后，我能够拥有这个 现在，我想调整页面，使其看起来像第一幅图像 感谢您的帮助，提前感谢
-
我正在尝试使用PagerAdapter显示来自可绘制视图寻呼机的图像。为此，我编写了以下代码-- //调用PagerAdapter 下面是我的适配器类-- 下面是我的对话框 xml-- 下面是 ViewPager Item xml-- //下面是解释当前如何显示空的ViewPager的屏幕截图-- 当我调试应用程序时，一切似乎都很好，但不知道为什么图像没有显示在ViewPager中。请帮忙..
-
我需要制作一个电子商务应用程序类型的屏幕，具有多个viewpager和recycler视图。 我实现了它，但我的1/2视图寻呼机在回收器视图中可见，一旦我旋转设备，我的第一个视图寻呼机也会消失。 我的活动： 我的视图寻呼机片段： 我的回收器视图的主适配器： 我的视图寻呼机适配器： 我的水平回收器视图适配器： 主要活动布局： 水平滚动布局： 查看寻呼机布局： 根据我的JSON数据，在recycler
-
Hy，我是android开发的新手，我正在尝试在我的自定义对话框片段（扩展了DialogFragment并包含四个按钮）和view Pager中的片段之间建立一个通信。 我的视图分页器适配器扩展了FragmentStatePagerAdapter并包含7个选项卡，但对于每个选项卡，我创建了相同的片段，该片段具有一个recyclerView，但用于列表的数据不同。这个想法是，如果我单击对话框片段中的