Usando jqgrid con popover desde ui angular bootstrap

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 :

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 "Test"; }}, { 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 "Test"; } 

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