使用的jqGrid与角UI引导酥料饼 [英] Using jqgrid with popover from angular ui bootstrap
问题描述
我有我使用的jqGrid创建的表。我打算添加酥料饼的功能，因此当用户点击一个单元格/格，则显示一个定制酥料饼。而且我计划使用来自角UI引导的酥料饼。
I have a table that I created using jqGrid. I am planning to add a popover functionality, so that when a user click on a cell / grid, then a custom popover is displayed. And I am planning to use the popover from angular ui bootstrap.
我有我的网格，我也有我的按钮，可以显示弹出了。但是当我试图把两者结合起来，这是行不通的。我试着用我的colModel之一，要做到这一点：
I have my grid, and I also have my button that can display a pop over. but when I tried to combine both, it doesn't work. I tried to do this with one of my colModel:
formatter: function(cellvalue, options, rowObject){
return "<button class='btn btn-primary' popover-placement="top" ng-click='ctrl.handle()'>"+cellvalue+"</button>";
}
我有我的控制器，包括角弹出了作为依赖，但这并不工作。
这可能吗？
I have my controller that include angular pop-over as the dependency, but this doesn't work. Is this possible?
推荐答案
我要开始我不是开发商的角度的话，我从来没有使用过酥料饼。因此，code，我下面张贴可能是不够好但从角点。尽管如此，它的工作原理，它做你的需要。拥有的工作的code你也许可以改善它。
I should start with the words that I'm not angular developer and I have never used popover before. So the code which I post below could be not good enough from the angular point of view. Nevertheless it works and it do what you need. Having working code you can improve it probably.
的演示显示酥料饼上点击自定义按钮，打开保持。此外警报将使用绑定的JavaScript函数显示的消息 NG-点击：
The demo display popover on click on the custom button, which stay opened. Additionally alert message will be displayed from the JavaScript function bound using ng-click:
它使用以下HTML标记
It uses the following HTML markup
<body ng-app="myApp" ng-controller="MyController">
<ng-jq-grid config="config" data="data"></ng-jq-grid>
</body>
和下面的JavaScript code从三个部分包含的内容。在第一个做标准事
and the following JavaScript code which contains from three parts. In the first one do the standard thing
var myApp = angular.module("myApp", ["ui.bootstrap"]);
只是不要忘了包括ui.bootstrap为酥料饼需要的模块是很重要的。
it's important just don't forget to include "ui.bootstrap" module required for popover.
在第二部分一用 myApp.directive 与 $编译作为参数，该参数用于编译格两次：一次将一个空的前＆LT;表＆gt; HTML页面（在＆LT上，NG-JQ-格＆GT; ...＆LT; / NG-JQ-格＆GT; ），并再一次放在 loadComplete ：
In the second part one use myApp.directive with $compile as parameter, which are used for compiling the grid twice: once before placing an empty <table> on the HTML page (in <ng-jq-grid>...</ng-jq-grid>) and once more inside of 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 在演示中，因此一个不需要生成和ID为＆LT;表＆gt; 元素。如果你必须使用一个旧版本的jqGrid，那么你应该更换行
I used free jqGrid 4.8 in the demo, so one don't need to generate and id for the <table> element. If you have to use an old version of jqGrid then you should replace the line
$grid = angular.element("<table></table>");
要像
$grid = angular.element("<table id='" + $.jgrid.jqID() + "'></table>");
选项自动调整和 autoresizeOnLoad 特定于免费的jqGrid并遵循列的宽度设置的基础上列中的数据的宽度。该选项在自述并在的维基。
The options autoResizing and autoresizeOnLoad are specific for free jqGrid and follows setting of the width of the columns based on the width of the data in the column. The options are described in the readme and in the wiki.
在code我用 myApp.controller 初始化 $ scope.config 的最后一部分和 $ scope.data 初始数据。
In the last part of the code I use myApp.controller to initialize $scope.config and $scope.data with initial 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 }
];
});
自定义格式看起来像
The custom formatter looks like
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>";
}
我希望我评论了code的最重要的部分。
I hope that I commented the most important parts of the code.
这篇关于使用的jqGrid与角UI引导酥料饼的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
