javascript - Usando jqgrid con popover de angular ui bootstrap
angularjs angular-ui-bootstrap (1)
Tengo una tabla que creé usando jqGrid. Estoy planeando agregar una funcionalidad de popover, para que cuando un usuario haga clic en una celda / cuadrícula, se muestre un popover personalizado. Y estoy planeando usar el popover de bootstrap angular ui.
Tengo mi cuadrícula y también tengo mi botón que puede mostrar una ventana emergente. pero cuando intenté combinar ambos, no funciona. Intenté hacer esto con uno de mis colModel:
formatter: function(cellvalue, options, rowObject){
return "<button class=''btn btn-primary'' popover-placement="top" ng-click=''ctrl.handle()''>"+cellvalue+"</button>";
}
Tengo mi controlador que incluye una ventana emergente angular como dependencia, pero esto no funciona. es posible?
Debería comenzar con las palabras que no soy desarrollador angular y que nunca antes había usado popover. Entonces, el código que publico a continuación podría no ser lo suficientemente bueno desde el punto de vista angular. Sin embargo, funciona y hace lo que necesita. Tener un código de trabajo puede mejorarlo probablemente.
La demostración se
muestra al hacer clic en el botón personalizado, que permanece abierto.
Además, se mostrará un mensaje de
alert
desde la función de JavaScript enlazada usando
ng-click
:
Utiliza el siguiente marcado HTML
<body ng-app="myApp" ng-controller="MyController">
<ng-jq-grid config="config" data="data"></ng-jq-grid>
</body>
y el siguiente código JavaScript que contiene tres partes. En el primero haz lo estándar
var myApp = angular.module("myApp", ["ui.bootstrap"]);
es importante, no olvides incluir el módulo
"ui.bootstrap"
requerido para
popover
.
En la segunda parte, use
myApp.directive
con
$compile
como parámetro, que se usa para compilar la cuadrícula dos veces: una antes de colocar un
<table>
vacío en la página HTML (en
<ng-jq-grid>...</ng-jq-grid>
) y una vez más dentro de
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");
});
}
};
});
Usé jqGrid 4.8 gratis
en la demostración, por lo que no es necesario generar e identificar el elemento
<table>
.
Si tiene que usar una versión anterior de jqGrid, entonces debe reemplazar la línea
$grid = angular.element("<table></table>");
a algo como
$grid = angular.element("<table id=''" + $.jgrid.jqID() + "''></table>");
Las opciones
autoResizing
y
autoresizeOnLoad
son específicas para jqGrid libre y siguen la configuración del ancho de las columnas en función del ancho de los datos en la columna.
Las opciones se describen en el
readme
y en la
wiki
.
En la última parte del código, uso
myApp.controller
para inicializar
$scope.config
y
$scope.data
con datos iniciales.
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 }
];
});
El formateador personalizado se parece a
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>";
}
Espero haber comentado las partes más importantes del código.