Question

我正在使用colModel属性中使用formatter格式化colum客户的jqgrid。

function jqGridSettings_UserList(data) {
var colHeader = ['UserId', 'First Name', 'Last Name', 'Role', 'Email', 'Username', ' Password', 'Status', 'Actions'];
jQuery("#jqgrid").jqGrid({
    data: data,
    datatype: "local",
    height: 'auto',
    gridview: true,
    colNames: colHeader,
    colModel: [
                { name: 'UserId', index: 'UserId', sortable: true, hidden: true },
                { name: 'FirstName', index: 'FirstName', editable: true },
                { name: 'LastName', index: 'LastName', editable: true },
                { name: 'Role', index: 'Role', align: "left", editable: true },
                { name: 'EmailAddress', index: 'EmailAddress', align: "right", editable: true },
                { name: 'UserName', index: 'UserName', align: "left", editable: true },
                { name: 'AcctPassword', index: 'AcctPassword', sortable: false, editable: true },
                { name: 'GeneralStatus', index: 'GeneralStatus', sortable: false, editable: true },
                { name: 'act', index: 'act', sortable: false, align: "center",

                    formatter: function (cellvalue, options, rowObject) {

                        var Delete = "<button ng-click='jqGridUserListManipulation(\"" + options.rowId + "\")'  class='btn btn-sm btn-primary' > <span class='fa fa-trash-o'></span></button>";
                        var Edit = "<button style='margin-left:5px;' class='btn btn-sm btn-primary'><span class='fa fa-pencil'></span></button>";


                        //                                return "<input style='width:60px;' type='button' value='Edit' " +
                        //                                    "onclick=\"javascript:alert('Testing');\" />" +
                        //                                    "<input style='width:60px;' type='button' value='Delete' " +
                        //                                    "onclick=\"jqGridUserListManipulation(" + options.rowId + ");\" />";

                        return Delete + Edit;
                    }
                }

                ],
    rowNum: 10,
    rowList: [10, 20, 30],
    pager: '#pjqgrid',
    sortname: 'UserId',
    toolbarfilter: true,
    viewrecords: true,
    sortorder: "asc",
    gridComplete: function () {
        var ids = jQuery("#jqgrid").jqGrid('getDataIDs');
        //            for (var i = 0; i < ids.length; i++) {
        //                var column = ids[i];
        //                var rowId = $("#jqgrid").getRowData(column);
        //                var Userid = rowId['UserId'];

        //                var Delete = "<button ng-click=\"jqGridUserListManipulation('" + column + "')\" class='btn btn-sm btn-primary' > <span class='fa fa-trash-o'></span></button>";
        //                var Edit = "<button style='margin-left:5px;' class='btn btn-sm btn-primary'><span class='fa fa-pencil'></span></button>";

        //                jQuery("#jqgrid").jqGrid('setRowData', column, {act: Delete + Edit });
        //            }
    },
    editurl: "/Settings/Settings/Gridmanipulation",
    caption: "User List",
    multiselect: true,
    autowidth: false,
    grouping: true

});

//    jQuery("#jqgrid").jqGrid('navGrid', "#pjqgrid", {
//        edit: false,
//        add: false,
//        del: true
//    });

jQuery("#jqgrid").jqGrid('inlineNav', "#pjqgrid");
/* Add tooltips */
$('.navtable .ui-pg-button').tooltip({
    container: 'body'
});

jQuery("#m1").click(function () {
    var s;
    s = jQuery("#jqgrid").jqGrid('getGridParam', 'selarrrow');
    alert(s);
});
jQuery("#m1s").click(function () {
    jQuery("#jqgrid").jqGrid('setSelection', "13");
});

// remove classes
$(".ui-jqgrid").removeClass("ui-widget ui-widget-content");
$(".ui-jqgrid-view").children().removeClass("ui-widget-header ui-state-default");
$(".ui-jqgrid-labels, .ui-search-toolbar").children().removeClass("ui-state-default ui-th-column ui-th-ltr");
$(".ui-jqgrid-pager").removeClass("ui-state-default");
$(".ui-jqgrid").removeClass("ui-widget-content");

// add classes
$(".ui-jqgrid-htable").addClass("table table-bordered table-hover");
$(".ui-jqgrid-btable").addClass("table table-bordered table-striped");


$(".ui-pg-div").removeClass().addClass("btn btn-sm btn-primary");
$(".ui-icon.ui-icon-plus").removeClass().addClass("fa fa-plus");
$(".ui-icon.ui-icon-pencil").removeClass().addClass("fa fa-pencil");
$(".ui-icon.ui-icon-trash").removeClass().addClass("fa fa-trash-o");
$(".ui-icon.ui-icon-search").removeClass().addClass("fa fa-search");
$(".ui-icon.ui-icon-refresh").removeClass().addClass("fa fa-refresh");
$(".ui-icon.ui-icon-disk").removeClass().addClass("fa fa-save").parent(".btn-primary").removeClass("btn-primary").addClass("btn-success");
$(".ui-icon.ui-icon-cancel").removeClass().addClass("fa fa-times").parent(".btn-primary").removeClass("btn-primary").addClass("btn-danger");

$(".ui-icon.ui-icon-seek-prev").wrap("<div class='btn btn-sm btn-default'></div>");
$(".ui-icon.ui-icon-seek-prev").removeClass().addClass("fa fa-backward");

$(".ui-icon.ui-icon-seek-first").wrap("<div class='btn btn-sm btn-default'></div>");
$(".ui-icon.ui-icon-seek-first").removeClass().addClass("fa fa-fast-backward");

$(".ui-icon.ui-icon-seek-next").wrap("<div class='btn btn-sm btn-default'></div>");
$(".ui-icon.ui-icon-seek-next").removeClass().addClass("fa fa-forward");

$(".ui-icon.ui-icon-seek-end").wrap("<div class='btn btn-sm btn-default'></div>");
$(".ui-icon.ui-icon-seek-end").removeClass().addClass("fa fa-fast-forward");

// resize
$(window).on('resize.jqGrid', function () {
    $("#jqgrid").jqGrid('setGridWidth', $("#JqGrid_Container").width());
})

}

我的控制器是

testapp.controller('SettingsController', function ($scope, $http, $location, $window) {

$http.post('/Settings/Settings/GetUserList'}).success(function (data) {
    jqGridSettings_UserList(data);

});

$scope.jqGridUserListManipulation = function (RowId) {
    alert(RowId);
};

}）;

我无法触发添加到“行为”列的删除按钮的ng-click.Anyone请帮助我。

Answer 1

向您分配css命令的元素添加ng-click类。

<button class="clickMe" ng-click="yourFunction()"></button>

加载jsgrid后重新编译它以正确地重新分配ng-click

 $("#jsGrid").jsGrid();
    $compile($('.clickMe'))($scope);

单击jqgrid格式化程序中的元素不起作用

1 个答案: