个人中心
gpt4 book ai didi

javascript - 使用 jqgrid 和 Angular ui Bootstrap 中的弹出窗口

转载 作者：行者123 更新时间：2023-11-28 00:25:44 27 4
gpt4 key购买 nike

我有一个使用 jqGrid 创建的表。我计划添加弹出窗口功能，以便当用户单击单元格/网格时，会显示自定义弹出窗口。我打算使用popover来自 Angular ui Bootstrap。

我有我的网格，我还有我的可以显示弹出窗口的按钮。但当我尝试将两者结合起来时，它不起作用。我尝试用我的 colModel 之一来执行此操作:

formatter: function(cellvalue, options, rowObject){
                return "<button class='btn btn-primary' popover-placement="top" ng-click='ctrl.handle()'>"+cellvalue+"</button>";
       }

我的 Controller 包含 Angular 弹出作为依赖项，但这不起作用。这可能吗？

最佳答案

我应该首先说我不是 Angular 开发人员，而且我以前从未使用过弹出窗口。因此，从 Angular Angular 来看，我在下面发布的代码可能不够好。尽管如此，它仍然有效，并且可以满足您的需要。拥有有效代码，您可能可以改进它。

The demo单击自定义按钮时显示弹出窗口，该按钮保持打开状态。另外alert消息将从使用 ng-click 绑定(bind)的 JavaScript 函数显示:

enter image description here

它使用以下 HTML 标记

<body ng-app="myApp" ng-controller="MyController">
    <ng-jq-grid config="config" data="data"></ng-jq-grid>
</body>

和下面的 JavaScript 代码包含三个部分。在第一个中做标准的事情

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

这很重要，只是不要忘记包含 "ui.bootstrap" popover 所需的模块.

在第二部分中，使用 myApp.directive与 $compile作为参数，用于编译网格两次:一次在放置空 <table> 之前在 HTML 页面上(在 <ng-jq-grid>...</ng-jq-grid> 中)，并再次在 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");
            });
        }
    };
});

我用了free jqGrid 4.8在演示中，因此不需要为<table>生成和id元素。如果您必须使用旧版本的 jqGrid 那么您应该替换该行 

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

类似于

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

选项autoResizing和autoresizeOnLoad特定于免费 jqGrid，并根据列中数据的宽度设置列的宽度。 readme 中描述了这些选项。并在 wiki .

在代码的最后一部分我使用 myApp.controller初始化$scope.config和$scope.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 }
    ];
});

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

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>";
}

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

关于javascript - 使用 jqgrid 和 Angular ui Bootstrap 中的弹出窗口，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29505360/

27 4 0
文章推荐： html - 自定义复选框未在 Google Chrome 中显示
文章推荐： c++ - 对齐和字长
文章推荐： html - EaselJS 在鼠标悬停时更改颜色
文章推荐： c++ - sqlite3 - 保持打开处理程序 VS，在需要时打开数据库
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com