Question

您好，我目前正在JQuery UI标签中使用JQGrid。我的问题是，当我调用渲染JQGrid时，它会禁用（带斜条纹的灰色）。

<script type="text/javascript">
    $(document).ready(function () {
        $("#divTimePeriod").tabs();

        jQuery("#listTimePeriod").jqGrid({
            url: '/TimePeriod/GetTimePeriods',
            datatype: 'json',
            mtype: 'GET',
            colNames: ['', 'TimePeriodKey'],
            colModel: [
          { name: 'Actions', index: 'Actions', width: 60, sortable: false },
          { name: 'TimePeriodKey', index: 'TimePeriodKey', width: 55 },
        ],
            jsonReader: {
                repeatitems: false,
                root: "result"
            },
            pager: '#pagerTimePeriod',
            viewrecords: true,
            gridComplete: function () {

            }

        });
    });
</script>

<h3>Time Period Service</h3>
<div id="divTimePeriod">
    <ul>
        <li><a href="#TimePeriod">Time Period</a></li>
        <li><a href="#DayType">Day Type</a></li>
        <li><a href="#Interval">Interval Group</a></li>
        <li><a href="#Calendar">Calendar</a></li>
    </ul>

    <div id="TimePeriod">
       <span>Name: </span> <select><option></option><option>Default</option><option>All</option><option>Summer Off/On Peak</option></select>
        <table id="listTimePeriod" width="100%"></table> 
        <div id="pagerTimePeriod"></div>
    </div>
    <div id="DayType">
        <% Html.RenderPartial("~/Views/DayType/Contents.ascx"); %>
    </div>
    <div id="Interval">
        <% Html.RenderPartial("~/Views/IntervalGroup/Contents.ascx"); %>
    </div>
    <div id="Calendar">
        Calendar
    </div>
</div>

网格呈现正确，但标签仍为灰色。

由于

Answer 1

在创建jqGrid之前，您需要等到选项卡初始化。

例如，您可以将初始化代码放在选项卡的show event中，以便在选项卡准备好之前不会执行它：

$("#divTimePeriod").tabs({
   show: function(event, ui) { 
     if (ui.index == 0){ // First tab is shown...
        // Initialize your jqGrid here
     }
   }
});

JQGrid加载禁用（灰显）JQuery UI选项卡

1 个答案: