Usando jqgrid con popover desde ui angular bootstrap

Tengo una tabla que creé usando jqGrid. Estoy planeando agregar una funcionalidad de popover, de modo que cuando un usuario haga clic en una celda / grilla, 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 traté de combinar ambos, no funciona. Intenté hacer esto con uno de mis colModel:

formatter: function(cellvalue, options, rowObject){ return ""; } 

Tengo mi controlador que incluye pop-over angular como dependencia, pero esto no funciona. es posible?

Debería comenzar con las palabras que no soy desarrollador angular y 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 código de trabajo puede mejorarlo probablemente.

La demostración de Popover aparece 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 enlazado usando ng-click :

enter image description here

Utiliza el siguiente marcado HTML

    

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 olvide incluir el módulo "ui.bootstrap" requerido para popover .

En la segunda parte, uno usa myApp.directive con $compile como parámetro, que se usa para comstackr la grilla dos veces: una antes de colocar una

vacía en la página HTML (en ... ) 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("
"); 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"); }); } }; });

Utilicé jqGrid 4.8 gratis en la demostración, por lo que no es necesario generar e id para el elemento

. Si tiene que usar una versión anterior de jqGrid, debe reemplazar la línea

 $grid = angular.element("
");

a algo así como

 $grid = angular.element("
");

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 archivo Léame y en la wiki .

En la última parte del código utilizo myApp.controller para inicializar $scope.config y $scope.data con los 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 ""; }}, { name: "invdate", width: 125, align: "center", sorttype: "date", formatter: "date", formatoptions: { newformat: "dMY" }, 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 ve como

 formatter: function (cellvalue, options, rowObject) { return ""; } 

Espero haber comentado las partes más importantes del código.