将 jqgrid 与来自 angular ui bootstrap 的弹出窗口一起使用
Using jqgrid with popover from angular ui bootstrap
我有一个 table 是我使用 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 弹出窗口作为依赖项，但这不起作用。
这可能吗？
我应该先说我不是 angular 开发人员并且我以前从未使用过弹出窗口。因此，从 angular 的角度来看，我在下面 post 的代码可能不够好。尽管如此，它仍然有效并且可以满足您的需求。有了 有效的 代码，您可能可以改进它。
The demo 在自定义按钮上单击时显示弹出窗口，该按钮保持打开状态。此外，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"]);
重要的是不要忘记包含 popover 所需的 "ui.bootstrap" 模块。
在第二部分中，使用 myApp.directive 和 $compile 作为参数，用于两次编译网格：一次是在 [=64= 上放置一个空的 <table> ] 页面（在 <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 and in the 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>";
}
我希望我注释了代码中最重要的部分。
我有一个 table 是我使用 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 弹出窗口作为依赖项，但这不起作用。 这可能吗？
我应该先说我不是 angular 开发人员并且我以前从未使用过弹出窗口。因此，从 angular 的角度来看，我在下面 post 的代码可能不够好。尽管如此，它仍然有效并且可以满足您的需求。有了 有效的 代码，您可能可以改进它。
The demo 在自定义按钮上单击时显示弹出窗口，该按钮保持打开状态。此外，alert 消息将从使用 ng-click:
它使用以下 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" 模块。
在第二部分中，使用 myApp.directive 和 $compile 作为参数，用于两次编译网格：一次是在 [=64= 上放置一个空的 <table> ] 页面（在 <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 and in the 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>";
}
我希望我注释了代码中最重要的部分。