我有一个使用 jqGrid 创建的表。我打算添加一个弹出框功能，这样当用户点击一个单元格/网格时，就会显示一个自定义弹出框。我打算使用angular ui bootstrap 中的popover。
我有我的网格，我也有我的按钮，可以显示一个弹出窗口。但是当我试图将两者结合起来时，它不起作用。我试图用我的一个 colModel 做到这一点：
formatter: function(cellvalue, options, rowObject){
return "<button class='btn btn-primary' popover-placement="top" ng-click='ctrl.handle()'>"+cellvalue+"</button>";
}
我的控制器包含 angular pop-over 作为依赖项，但这不起作用。这可能吗？
我应该先说我不是 Angular 开发人员，而且我以前从未使用过 popover。所以从角度来看，我在下面发布的代码可能不够好。尽管如此，它仍然有效，并且可以满足您的需求。拥有工作代码，您可能可以改进它。
单击自定义按钮时演示显示弹出窗口，该按钮保持打开状态。此外，alert使用ng-click以下命令绑定的 JavaScript 函数会显示消息：
它使用以下 HTML 标记
<body ng-app="myApp" ng-controller="MyController">
<ng-jq-grid config="config" data="data"></ng-jq-grid>
</body>
以及以下包含三个部分的 JavaScript 代码。在第一个做标准的事情
var myApp = angular.module("myApp", ["ui.bootstrap"]);
只是不要忘了把它列入重要的"ui.bootstrap"所需modulepopover。
在第二部分中，使用myApp.directivewith$compile作为参数，用于两次编译网格：一次在<table>HTML 页面上放置空之前（in <ng-jq-grid>...</ng-jq-grid>），另一次在 内部loadComplete：
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, {
autoencode: true,
iconSet: "fontAwesome",
cmTemplate: { autoResizable: true },
autoResizing: { compact: true },
autoresizeOnLoad: true,
loadComplete: function () {
$compile(this)(scope);
}
});
angular.element($grid)
.jqGrid(newValue)
.jqGrid("navGrid")
.jqGrid("filterToolbar");
});
scope.$watch("data", function (newValue, oldValue) {
$grid.jqGrid("clearGridData");
$grid.jqGrid("setGridParam", {data: newValue});
$grid.trigger("reloadGrid");
});
}
};
});
我在演示中使用了免费的 jqGrid 4.8，所以不需要为<table>元素生成和 id 。如果您必须使用旧版本的 jqGrid 那么您应该替换该行
$grid = angular.element("<table></table>");
像
$grid = angular.element("<table id='" + $.jgrid.jqID() + "'></table>");
选项autoResizing和autoresizeOnLoad特定于免费 jqGrid 并遵循基于列中数据宽度的列宽度设置。自述文件和wiki中描述了这些选项。
在代码的最后一部分中，我用于myApp.controller初始化$scope.config并$scope.data使用初始数据。
myApp.controller("MyController", function ($scope) {
$scope.config = {
myClick: function (rowid) {
alert("Test buton is clicked on rowid=" + rowid);
},
colNames: ["Client", "", "Date", "Closed", "Shipped via", "Amount", "Tax", "Total", "Notes"],
colModel: [
{ name: "name", align: "center", width: 65, editrules: {required: true},
searchoptions: { sopt: ["tcn", "tnc", "teq", "tne", "tbw", "tbn", "tew", "ten"] }},
{ name: "myLink", align: "center",
formatter: function (cellvalue, options, rowObject) {
return "<button class='btn btn-primary' popover-placement='top' popover='" +
rowObject.note + "' ng-click='config.myClick(" + options.rowId + ")'>Test</button>";
}},
{ name: "invdate", width: 125, align: "center", sorttype: "date",
formatter: "date", formatoptions: { newformat: "d-M-Y" },
editoptions: { dataInit: initDateEdit },
searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"], dataInit: initDateSearch } },
{ name: "closed", width: 70, template: "booleanCheckboxFa" },
{ name: "ship_via", width: 105, align: "center", formatter: "select",
edittype: "select", editoptions: { value: "FE:FedEx;TN:TNT;IN:Intim", defaultValue: "IN" },
stype: "select", searchoptions: { sopt: ["eq", "ne"], value: ":Any;FE:FedEx;TN:TNT;IN:IN" } },
{ name: "amount", width: 75, template: "number" },
{ name: "tax", width: 52, template: "number", hidden: true },
{ name: "total", width: 60, template: "number" },
{ name: "note", width: 60, sortable: false, edittype: "textarea" }
]
};
$scope.data = [
{ id: "11", invdate: "2007-10-01", name: "test", note: "note", amount: 0, tax: 0, closed: true, ship_via: "TN", total: 0 },
{ id: "21", invdate: "2007-10-02", name: "test2", note: "note2", amount: 351.75, tax: 23.45, closed: false, ship_via: "FE", total: 375.2 },
{ id: "31", invdate: "2007-09-01", name: "test3", note: "note3", amount: 400, tax: 30, closed: false, ship_via: "FE", total: 430 },
{ id: "41", invdate: "2007-10-04", name: "test4", note: "note4", amount: 200, tax: 10, closed: true, ship_via: "TN", total: 210 },
{ id: "51", invdate: "2007-10-31", name: "test5", note: "note5", amount: 300, tax: 20, closed: false, ship_via: "FE", total: 320 },
{ id: "61", invdate: "2007-09-06", name: "test6", note: "note6", amount: 400, tax: 30, closed: false, ship_via: "FE", total: 430 },
{ id: "71", invdate: "2007-10-04", name: "test7", note: "note7", amount: 200, tax: 10, closed: true, ship_via: "TN", total: 210 },
{ id: "81", invdate: "2007-10-03", name: "test8", note: "note8", amount: 300, tax: 20, closed: false, ship_via: "FE", total: 320 },
{ id: "91", invdate: "2007-09-01", name: "test9", note: "note9", amount: 400, tax: 30, closed: false, ship_via: "TN", total: 430 },
{ id: "101", invdate: "2007-09-08", name: "test10", note: "note10", amount: 500, tax: 30, closed: true, ship_via: "TN", total: 530 },
{ id: "111", invdate: "2007-09-08", name: "test10", note: "note11", amount: 500, tax: 30, closed: false, ship_via: "FE", total: 530 },
{ id: "121", invdate: "2007-09-10", name: "test12", note: "note12", amount: 500, tax: 30, closed: false, ship_via: "FE", total: 530 }
];
});
自定义格式化程序看起来像
formatter: function (cellvalue, options, rowObject) {
return "<button class='btn btn-primary' popover-placement='top' popover='" +
rowObject.note + "' ng-click='config.myClick(" +
options.rowId + ")'>Test</button>";
}
我希望我评论了代码中最重要的部分。