将 jqgrid 与 Angular ui 引导程序中的弹出窗口一起使用-前端问题

Using jqgrid with popover from angular ui bootstrap(将 jqgrid 与 Angular ui 引导程序中的弹出窗口一起使用)

本文介绍了将 jqgrid 与 Angular ui 引导程序中的弹出窗口一起使用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个使用 jqGrid 创建的表.我打算添加一个弹出框功能，这样当用户点击一个单元格/网格时，就会显示一个自定义弹出框.我打算使用 angular ui bootstrap 中的，所以不需要生成<table> 元素的 id.如果您必须使用旧版本的 jqGrid，那么您应该替换该行

$grid = angular.element("<table></table>");

类似

$grid = angular.element("<table id='" + $.jgrid.jqID() + "'></table>");

autoResizing 和 autoresizeOnLoad 选项是针对 free jqGrid 的，它会根据列中数据的宽度来设置列的宽度.这些选项在 readme 和 wiki.

在代码的最后一部分，我使用 myApp.controller 用初始数据初始化 $scope.config 和 $scope.data.

myApp.controller("MyController", function ($scope) {$scope.config = {myClick:函数(rowid){alert("测试按钮被点击rowid=" + rowid);},colNames: ["Client", "", "Date", "Closed", "Shipped via", "Amount", "Tax", "Total", "Notes"],col型号:[{名称:名称"，对齐:中心"，宽度:65，编辑规则:{必需:真}，搜索选项:{ sopt:[tcn"，tnc"，teq"，tne"，tbw"，tbn"，tew"，ten"]}}，{ 名称:myLink"，对齐:中心"，格式化程序:函数(单元格值，选项，rowObject){return "

自定义格式化程序看起来像

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

我希望我注释了代码中最重要的部分.

I have a table that I created using jqGrid. I am planning to add a popover functionality, so that when a user click on a cell / grid, then a custom popover is displayed. And I am planning to use the popover from angular ui bootstrap.



I have my grid, and I also have my button that can display a pop over. but when I tried to combine both, it doesn't work. I tried to do this with one of my colModel:
formatter: function(cellvalue, options, rowObject){
                return "<button class='btn btn-primary' popover-placement="top" ng-click='ctrl.handle()'>"+cellvalue+"</button>";
       }
I have my controller that include angular pop-over as the dependency, but this doesn't work. 
Is this possible?
 解决方案 
I should start with the words that I'm not angular developer and I have never used popover before. So the code which I post below could be not good enough from the angular point of view. Nevertheless it works and it do what you need. Having working code you can improve it probably.

The demo display popover on click on the custom button, which stay opened. Additionally alert message will be displayed from the JavaScript function bound using ng-click:



It uses the following HTML markup
<body ng-app="myApp" ng-controller="MyController">
    <ng-jq-grid config="config" data="data"></ng-jq-grid>
</body>
and the following JavaScript code which contains from three parts. In the first one do the standard thing
var myApp = angular.module("myApp", ["ui.bootstrap"]);
it's important just don't forget to include "ui.bootstrap" module required for popover.

In the second part one use myApp.directive with $compile as parameter, which are used for compiling the grid twice: once before placing an empty <table> on the HTML page (in <ng-jq-grid>...</ng-jq-grid>) and once more inside of 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");
            });
        }
    };
});
I used free jqGrid 4.8 in the demo, so one don't need to generate and id for the <table> element. If you have to use an old version of jqGrid then you should replace the line 
$grid = angular.element("<table></table>");
to something like
$grid = angular.element("<table id='" + $.jgrid.jqID() + "'></table>");
The options autoResizing and autoresizeOnLoad are specific for free jqGrid and follows setting of the width of the columns based on the width of the data in the column. The options are described in the readme and in the wiki.

In the last part of the code I use myApp.controller to initialize $scope.config and $scope.data with initial data.
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 }
    ];
});
The custom formatter looks like
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>";
}
I hope that I commented the most important parts of the code.

                        这篇关于将 jqgrid 与 Angular ui 引导程序中的弹出窗口一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！