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
:
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.