jqgrid columnchooser width

时间:2012-09-21 15:57:16

标签: javascript jqgrid width

我有一个很棒的jqgrid和一个columnchooser。 但是当我用columnchooser删除所有列时,我的JQGrid表消失了。 (宽度:0) 那么是否有可能具有最小宽度和最大宽度?
提前致谢。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<link href="../../Scripts/plugins/ui.multiselect.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery-ui-1.8.23.min.js" type="text/javascript"></script>
<script src="../../Scripts/plugins/ui.multiselect.js" type="text/javascript"></script>
<script src="../../Scripts/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="../../Scripts/src/i18n/grid.locale-nl.js" type="text/javascript"></script>
<link href="../../Scripts/css/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
<link href="../../Content/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />

<table id="list"></table>
<div id="pager"></div>

<script type="text/javascript">
jQuery(document).ready(function () {
    jQuery("#list").jqGrid({
        url: '/Home/GridData/',
        datatype: 'json',
        mtype: 'GET',
        autowidth: true,
        colNames: ['Budgetsleutel', 'Beleidsdomein', 'beleidsitem'],
        colModel: [
      { name: 'budetsleutel', index: 'budetsleutel', width: 40, align: 'left', sortable: true, resizable: true, search: true },
      { name: 'beleiddsdomein', index: 'beleidsdomein', width: 40, align: 'left', sortable: true, resizable: true, search: true },
      { name: 'beleidsitem', index: 'beleidsitem', width: 200, align: 'left', sortable: true, resizable: true, search: true}],
        pager: '#pager',
        pgbuttons: true,
        rowNum: 10,
        rowList: [],
        sortname: 'Id',
        sortorder: "desc",
        gridview: true,
        viewrecords: true,
        height: 100,
        caption: "Toolbar Searching"
    });
    jQuery("#list").jqGrid('navGrid', '#pager');
    jQuery("#list").jqGrid('navButtonAdd', '#pager', {
        caption: "Columns",
        buttonicon: "ui-icon-calculator",
        title: "choose columns",
        jqModel:true,
        onClickButton: function () {
            jQuery("#list").jqGrid('columnChooser');
        }
    });
});

1 个答案:

答案 0 :(得分:1)

我在jqgrid的wiki页面找到了我的问题的解决方案 见下面的代码:

        onClickButton: function () {
            jQuery("#list").jqGrid('columnChooser', {
                done: function (perm) {
                    if (perm) {
                        this.jqGrid("remapColumns", perm, true);
                        this.jqGrid("setGridWidth", $("#gridwrapper").width());
                    } 
                }
            });
        }