Usando jqgrid com popover de bootstrap angular ui

Eu tenho uma tabela que criei usando jqGrid. Estou planejando adicionar uma funcionalidade popover para que, quando um usuário clicar em uma célula / grade, um popover personalizado seja exibido. E estou planejando usar o popover do bootstrap angular da interface do usuário.

Eu tenho minha grade e também tenho meu botão que pode exibir um pop over. mas quando tentei combinar as duas coisas, não funciona. Eu tentei fazer isso com um dos meus colModel:

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

Eu tenho meu controlador que inclui pop-over angular como dependência, mas isso não funciona. Isso é possível?

Eu deveria começar com as palavras que eu não sou desenvolvedor angular e eu nunca usei popover antes. Então o código que eu postei abaixo pode não ser bom o suficiente do ponto de vista angular. No entanto, funciona e faz o que você precisa. Tendo código de trabalho , você pode melhorar isso provavelmente.

O popover de exibição de demonstração ao clicar no botão personalizado, que permanece aberto. Além disso, a mensagem de alert será exibida a partir da function JavaScript vinculada usando ng-click :

insira a descrição da imagem aqui

Ele usa a seguinte marcação HTML

    

e o seguinte código JavaScript, que contém três partes. Na primeira, faça o padrão

 var myApp = angular.module("myApp", ["ui.bootstrap"]); 

é importante não se esqueça de include o módulo "ui.bootstrap" necessário para o popover .

Na segunda parte, use myApp.directive com $compile como parâmetro, que é usado para compilar a grade duas vezes: uma vez antes de colocar uma

vazia na página HTML (em ... ) e mais uma vez dentro do 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"); }); } }; });

Eu usei o jqGrid 4.8 grátis na demo, então não é necessário gerar e id para o elemento

. Se você tem que usar uma versão antiga do jqGrid, então você deve replace a linha

 $grid = angular.element("
");

para algo como

 $grid = angular.element("
");

As opções autoResizing e autoresizeOnLoad são específicas para o jqGrid livre e seguem a configuração da largura das colunas com base na largura dos dados na coluna. As opções são descritas no readme e no wiki .

Na última parte do código, utilizo myApp.controller para inicializar $scope.config e $scope.data com dados iniciais.

 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 } ]; }); 

O formatador personalizado parece

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

Espero ter comentado as partes mais importantes do código.