jquery - jqGrid动态解析网格寻呼机ID？

Question

我有 3 个简单的问题。

1. 我有一些代码可以告诉我页面中是否存在 jqGrid 对象:

   //Check if there is a jqGrid on the page and if present, reloads its data ;)
   var jqGrid = $('div.ui-jqgrid-bdiv table');
   if (jqGrid.length) {
       //time to reload
       $(jqGrid).trigger('reloadGrid');
   }
   

   我想找到寻呼机 ID 元素(如果有)。有什么办法可以做到这一点吗？

2. 假设我的 jqGrid 表中有一个自定义类:

   <table id="myGrid" runat="server" class="customclass"></table>
   <div id="myGrid_pager" runat="server"></div>
   

   如何动态检查 jqGrid 中是否存在自定义类？

编辑:

在 Oleg 的帮助下，我已经能够编写一个 reconfigPermissions() 函数来显示/隐藏默认的“添加”、“编辑”和“删除”按钮。这是函数:

function reconfigPermissions(gridID) {
    var enableRegistry = CanModifyRegistry();
    var ops = ['#add_' + gridID, '#edit_' + gridID, '#del_' + gridID];
    $.each(ops, function (ix, value) {
        var $td = $(value);
        if (enableRegistry === true) {
            $td.show();
        } else {
            $td.hide();
        }
    });
}

当用户在页面其他位置定义的组合框中选择另一个日期范围时，将调用此函数。 问题如下:如果最初加载网格时，用户有权使用默认时间段(在组合框中选择)，则一切正常。您可以切换组合中的日期范围，并且按钮可以正确显示和消失。 不幸的是，如果用户对最初选择的默认时间段没有权限(因此第一次创建网格时有 {add: false, edit: false, del: false})，甚至切换到一个时间段，其中用户有权限根本不添加按钮。

这是绑定(bind)到组合框change事件处理程序的代码

$.ajax({
    url: GetBaseWSUrl() + 'MyWebService.asmx/ChangeCurrentPeriod',
    type: "post",
    dataType: "json",
    async: false,
    data: JSON.stringify({ periodID: $(this).val() }),
    contentType: "application/json; charset=utf-8",
    success: function (data) {
        //Check if there is a jqGrid on the page and if present, reloads its data
        var jqGrids = $('div.ui-jqgrid-bdiv table');
        jqGrids.each(function (ix, jqGrid) {
            var gridID = $.jgrid.jqID(jqGrid.id)
            reconfigPermissions(gridID);
            jqGrid.trigger('reloadGrid');
        });
    }
});

有什么建议吗？

Answer 1

您可以通过多种方式找到页面上存在的jqGrid。例如，您可以使用 $('table.ui-jqgrid-btable')而不是$('div.ui-jqgrid-bdiv table') 。此外，您不应该忘记，它通常可以作为页面上的一个 jqGrid。我建议您编写代码，以便即使您当前每页仅使用一个 jqGrid，它也可以与页面的许多 jqGrid 一起使用。

如果您以任何方式发现 table jqGrid 的元素，您可以使用 jqGrids[0] 获取第一个找到的网格的 DOM 元素。 jqGrid 使用 DOM 的一些扩展器。它添加了额外的属性 grid和p 。在每个 jqGrid 方法中，都会通过验证grid来检查网格是否已初始化。属性(property)存在。 p属性为您提供所有 jqGrid 参数，包括 p.pager 。您最多可以在网格上创建两个寻呼机:一个位于网格的顶部边缘，另一个位于底部(有关详细信息，请参阅 this)。所以你需要的代码可能看起来像

var jqGrids = $('table.ui-jqgrid-btable');
if (jqGrid.length > 0) {
    jqGrid.each(function(i) {
        if (this.grid) {
            // one more test for the jqGrid
            // jqGrid[i] is a jqGrid
            if (this.p.toppager) {
                // this.id + '_toppager' is the id of the top pager
            }
            if (this.p.pager) {
                // this.p.pager is the id of the bottom pager
            }
        }
    });
}

测试是否table元素有一些customclass您可以使用类 jQuery.hasClass .

更新:在评论中，您问我如何动态隐藏或显示导航栏中的按钮。我准备了the demo这证明了这一点:

如果检查位于网格上方的按钮，导航栏中的相应按钮将被隐藏。取消选中将显示相应的按钮。

代码只需调用 $('#add_list').hide()或$('#add_list').show()隐藏/显示“添加”按钮。在示例中 id="add_list"的最后一部分是 <table> 的 id用于创建网格的元素。其他标准按钮的 ID 以以下前缀开头: 'edit_' , 'view_' , 'del_' , 'search_' , 'refresh_' 。如果网格的 id 具有特殊字符，则更常见的代码如下所示:

var grid = $("#list"),
    gid = $.jgrid.jqID(grid[0].id);

$('#cbAdd').change(function () {
    var $td = $('#add_' + gid);
    if ($(this).is(':checked')) {
        $td.hide();
    } else {
        $td.show();
    }
});

查找 navButtonAdd 添加的自定义导航器按钮我用title属性:

$('#cbChooseColumns').change(function () {
    var $td = $(grid[0].p.pager + '_left ' + 'td[title="choose columns"]');
    if ($(this).is(':checked')) {
        $td.hide();
    } else {
        $td.show();
    }
});