javascript – 使用jqgrid与angular ui bootstrap的popover
作者：互联网
我有一个使用jqGrid创建的表.我打算添加一个popover功能,这样当用户单击一个单元格/网格时,就会显示一个自定义弹出窗口.我计划使用角度ui bootstrap的popover.
我有我的网格,我也有我的按钮,可以显示一个弹出窗口.但是当我试图将两者结合起来时,它不起作用.我尝试使用我的一个colModel执行此操作：
formatter: function(cellvalue, options, rowObject){
return "<button class='btn btn-primary' popover-placement="top" ng-click='ctrl.handle()'>"+cellvalue+"</button>";
}
我的控制器包含角度弹出作为依赖项,但这不起作用.
这可能吗？
解决方法:
我应该从我不是角色开发者的话开始,我以前从未使用过popover.因此,从角度来看,我在下面发布的代码可能不够好.然而它可以工作,它可以满足您的需求.有了工作代码,你可以改进它.
The demo显示popover,单击自定义按钮,保持打开状态.此外,将使用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"]);
重要的是不要忘记包含popover所需的“ui.bootstrap”模块.
在第二部分中,使用带有$compile作为参数的myApp.directive,它用于编译网格两次：一次放置空的< table>之前在HTML页面上(在< 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");
});
}
};
});
我在演示中使用了free jqGrid 4.8,因此不需要为< table>生成和id.元件.如果你必须使用旧版本的jqGrid,那么你应该替换该行
$grid = angular.element("<table></table>");
喜欢的东西
$grid = angular.element("<table id='" + $.jgrid.jqID() + "'></table>");
选项autoResizing和autoresizeOnLoad特定于空闲的jqGrid,并根据列中数据的宽度设置列的宽度.这些选项在readme和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>";
}
我希望我评论了代码中最重要的部分.
标签：javascript,angularjs,angular-ui-bootstrap,jqgrid 来源： https://codeday.me/bug/20190923/1814337.html