jqGrid 的排序/过滤问题

2024-04-29

我正在使用jqGrid 4.5.3。版本我已经升级到免费 jqGrid 版本 4.13.6。升级后我面临以下问题

排序不适用于所有列
我想根据我设置的内容显示列大小autoResizable: true and autoresizeOnLoad: true，仍然没有根据内容设置列宽

下面是我的jqGrid代码写在document.Ready功能

jQuery("#jqgrid").jqGrid({
            url: '@Url.Action("GetClassList", "Class")',
            datatype: 'json',
            height: 'auto',
            colNames: ['ClassID','CourseID', '@objLocalizer["Class_Title_GridCol"]','@objLocalizer["ViewCourseDetails"]','@objLocalizer["ViewClassSchedule"]', '@objLocalizer["Class_AssignUser"]','@objLocalizer["ClassCreatedBy"]','@objLocalizer["ClassCreatedDate"]'],
            colModel: [

                 {
                     name: 'Class.ClassID',
                     index: 'Class.ClassID',
                     sortable: true,
                     hidden: true
                 },
                 {
                     name: 'Class.CourseID',
                     index: 'Class.CourseID',
                     sortable: true,
                     hidden: true
                 },
                 {
                     name: 'ClassLang.Title',
                     index: 'ClassLang.Title',
                     sortable: true,
                     formatter: addLink,

                 },
                 {
                     name: 'CourseDetails',
                     index: 'CourseDetails',
                     sortable: false,
                     align: 'center',
                     title: false,
                     formatter:AddCourseDetailsLink
                 },
                 {
                     name: 'ClassSchedule',
                     index: 'ClassSchedule',
                     sortable: false,
                     align: 'center',
                     title: false,
                     formatter:AddViewClassScheduleLink
                 },
                 {
                     name: 'AssignUser',
                     index: 'AssignUser',
                     sortable: false,
                     align: 'center',
                     title: false,
                     formatter: AddAssignUserLink
                 },
                 {
                     name: 'UserName',
                     index: 'UserName',
                     align: 'center',
                     sortable: true
                 },
                 {
                     name: 'Class.WhenCreated',
                     index: 'Class.WhenCreated',
                     align: 'center',
                     formatter:'date',
                     sortable: true
                 }],

            rowNum: 10,
            rowList: [10, 20, 30],
            pager: '#pjqgrid',
            sortname: "Title",
            sortorder: "desc",
            toolbarfilter: true,
            viewrecords: true,
            multiSort: true,
            sortable: true,
            loadonce: true,
            ignoreCase: true,
            gridComplete: function () {

                $("#progbar").css('width', '100%')
                $("#progess").hide();
                $("#grid").css("visibility", 'visible');

            },
            editurl: " ",
            caption: "",
            multiselect: false,
            autowidth: true,

        });

我还添加了以下功能来根据可用选项卡扩展网格

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

HTML 标记

<div class="well well-sm well-light" id="content">
    <div id='divResult'>
        @{
            await Html.RenderPartialAsync("~/ViewsBackend/Class/_ClassTab.cshtml");
        }
    </div>

    <section id="widget-grid" class="">
        <div class="row">
            <article class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <div id="grid">
                    <table id="jqgrid"></table>
                    <div id="pjqgrid"></div>
                    <br>
                </div>
                <br>
            </article>
        </div>
    </section>
</div>

编辑1：- 自定义格式化程序

function addLink(cellvalue, options, rowObject) {

            return "<a href='#' style='height:25px;width:120px;' type='button'  onclick=CallActionMethod(" + "'" + rowObject.Class.ClassID + "'" + ")>" + rowObject.ClassLang.Title + "</a>";

    }

    function AddAssignUserLink(cellvalue, options, rowObject){

            return "<button class='btn btn-xs btn-default' data-placement='center' title='@objLocalizer["Class_AssignUser"]' onclick='AssignUser(" + rowObject.Class.ClassID + ")'\"><i class='fa fa-users fa-lg' aria-hidden='true'></i></a>";
    }

    function AddCourseDetailsLink(cellvalue, options, rowObject){

            return "<button class='btn btn-xs btn-default' data-placement='center' title='@objLocalizer["ViewCourseDetails"]' onclick='CourseDetails(" + rowObject.Class.CourseID + ")'\"><i class='fa fa-file fa-lg' aria-hidden='true'></i></a>";

    }

    function AddViewClassScheduleLink(cellvalue, options, rowObject){

            return "<button class='btn btn-xs btn-default' data-placement='center' title='@objLocalizer["ViewClassSchedule"]' onclick='ViewClassSchedule(" + rowObject.Class.ClassID + ")'\"><i class='fa fa-calendar fa-lg' aria-hidden='true'></i></a>";

    }

这些方法是从自定义格式化程序调用的

 function CallActionMethod(cellvalue) {
        $.ajax({

            type: "POST",
            url: '@Url.Action("SetClassDetailsClassID", "Class")',
            data: { cellvalue: cellvalue },
            success: function (data) {
                document.location.href = "@Url.Action("ClassDetails", "Class")";
            }
        });
    }

    function ViewClassSchedule(ClassID){

        $.ajax({

            type: "POST",
            url: '@Url.Action("SetClassDetailsClassID", "Class")',
            data: { cellvalue: ClassID },
            success: function (data) {
                document.location.href = "@Url.Action("ClassSchedule", "Class")";
            }
        });
    }

    function AssignUser(ClassID) {

        $.ajax({
            type: "POST",
            url: '@Url.Action("AssignUser", "Class")',
            data: { classid: ClassID },
            success: function (data) {

                jQuery(".modal-content").html('');
                jQuery(".modal-content").html(data);
                jQuery("#AssignUserModal").modal('show');

            }
        });
    }

    function CourseDetails(CourseID)
    {

        $.ajax({

            type: "POST",
            url: '@Url.Action("setcourseid", "Course")',
            data: { cellvalue: CourseID },
            success: function (data) {

                document.location.href = "@Url.Action("CourseDetails", "Course")";
            }
        });

    }

jqGrid 更新版本的屏幕截图

Any help on this appreciated !

您可以将代码修复为以下内容

$(window).on("resize", maximizeGrid);
$grid.on("jqGridAfterLoadComplete", function () {
    var colModel = $(this).jqGrid("getGridParam", "colModel"), i, cm;

    // reset widthOrg to the new values after autoResizeAllColumns
    for (i = 0; i < colModel.length; i++) {
        cm = colModel[i];
        cm.widthOrg = cm.width;
    }
    maximizeGrid();
});

$grid.jqGrid({
    datatype: "json",
    url: "/echo/json/",
    mtype: "POST",
    postData: {
        json: JSON.stringify(serverResponse)
    },
    colModel: [
        {
            name: 'ClassID',
            key: true,
            jsonmap: 'Class.ClassID',
            hidden: true
        },
        {
            name: 'Title',
            formatter: addLink,
            jsonmap: 'ClassLang.Title'
        },
        {
            name: 'CourseDetails',
            sortable: false,
            align: 'center',
            formatter:AddCourseDetailsLink,
            title: false
        },
        {
            name: 'ClassSchedule',
            sortable: false,
            align: 'center',
            formatter:AddViewClassScheduleLink,
            title: false
        },
        {
            name: 'AssignUser',
            sortable: false,
            align: 'center',
            formatter: AddAssignUserLink,
            title: false
        },
        {
            name: 'UserName',
            align: 'center'
        },
        {
            name: 'WhenCreated',
            jsonmap: 'Class.WhenCreated',
            align: 'center',
            formatter:'date'
        }
    ],
    iconSet: "fontAwesome",
    rowNum: 10,
    rowList: [10, 20, 30],
    pager: true,
    sortname: "Title",
    sortorder: "desc",
    viewrecords: true,
    multiSort: true,
    sortable: true,
    loadonce: true,
    additionalProperties: ['Class', 'ClassLang'],
    autoencode: true,
    cmTemplate: {
        autoResizable: true
    },
    autoresizeOnLoad: true,
    autowidth: true,
    autoResizing: {
        //resetWidthOrg: true,
        compact: true
    }
});

查看演示https://jsfiddle.net/OlegKi/b15pmdcg/4/ https://jsfiddle.net/OlegKi/b15pmdcg/4/。您可以阅读更多详情更多详情widthOrg in 问题 https://github.com/free-jqgrid/jqGrid/issues/289。同样的问题解释了新的resetWidthOrg: true的财产autoResizing.

我建议您考虑使用自定义按钮formatter: "actions" (see 维基文章 https://github.com/free-jqgrid/jqGrid/wiki/Enhancement-of-formatter:%22actions%22详情）

{
    name: "act", label: "Details", template: "actions", width: 70,
    formatoptions: { editbutton: false, delbutton: false }
}

和选项

actionsNavOptions: {
    courseDetailsicon: "fa-file",
    courseDetailstitle: "show course details",
    classScheduleicon: "fa-calendar",
    classScheduletitle: "class schedule",
    assignUsericon: "fa-users",
    assignUsertitle: "Assign user to class",
    custom: [
        { action: "courseDetails", position: "first",
            onClick: function (options) {
                alert("Course Details, rowid=" + options.rowid);
            } },
        { action: "classSchedule", position: "first",
            onClick: function (options) {
                alert("Class Schedule, rowid=" + options.rowid);
            } },
        { action: "assignUser",
            onClick: function (options) {
                alert("Assign User, rowid=" + options.rowid);
            } }
    ]
}

人们可以在另一个演示中看到结果https://jsfiddle.net/OlegKi/rmsz529L/3/ https://jsfiddle.net/OlegKi/rmsz529L/3/

顺便说一句，您可以使用 Bootstrap CSS 而不是 jQuery UI CSS 来使用相同的演示。您只需要添加guiStyle: "bootstrap"jqGrid的选项：

https://jsfiddle.net/OlegKi/b15pmdcg/8/ https://jsfiddle.net/OlegKi/b15pmdcg/8/

https://jsfiddle.net/OlegKi/rmsz529L/2/ https://jsfiddle.net/OlegKi/rmsz529L/2/

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

jQuery

JQGRID

freejqgrid

jqGrid 的排序/过滤问题的相关文章

Meteor：应用程序无法在 0.9.1.1 版本上运行

出现类似错误 Error TypeError undefined is not a function evaluating Template create anonymous function iron dynamic template j
使用 Angular 下载具有动态 src 的脚本

Angular 提供了通过动态名称动态加载模板的方法ng include 该部分中的内联 JS 和 CSS 可以正常加载但没有一个好的方法来下载带有动态 url 的脚本我们需要下载脚本相对于调用它们的 html 部分的路径即我们有一
Javascript正则表达式用于字母字符和空格？ [关闭]

这个问题不太可能对任何未来的访客有帮助它只与一个较小的地理区域一个特定的时间点或一个非常狭窄的情况相关通常不适用于全世界的互联网受众为了帮助使这个问题更广泛地适用访问帮助中心 help reopen questions 我需要一个
文件上传控件 OnChange 事件 JQuery

我正在尝试使用 AJAX JQUERY 和 Net HTTPHandler 构建页面来上传文件如下所示http dotnet dzone com news async file upload jquery and http dotnet
从未用 @flow 标记的导入文件中获取类型定义

TL DR我怎么告诉flow从未声明的导入模块导入类型定义 flow 加长版流接缝能够从不使用流语法的文件中派生类型请参阅示例示例文件 flow js if Math random lt 0 5 var y hello else va
如何以编程方式处理 JqGrid 事件？

我正在使用JqG rid 的 ASP NET 包装器 http www trirand net demoaspnet aspx 我想以编程方式连接一些网格的处理程序events http www trirand com jqgridwiki
跟踪用户何时点击浏览器上的后退按钮

是否可以检测用户何时单击浏览器的后退按钮我有一个 Ajax 应用程序如果我可以检测到用户何时单击后退按钮我可以显示适当的数据任何使用 PHP JavaScript 的解决方案都是优选的任何语言的解决方案都可以只需要我可以翻译成
动态地将工具提示文本设置为 div 元素

我正在尝试动态地将工具提示文本设置为容器 div 并对我刚刚添加到有序列表的每个 div 元素 elem Alias Status 使用 jQuery function addNewElement elem var li li li li
表单计算器脚本基本价格未加载 OnLoad

我的表单中有一个计算器来计算我的下拉选项选择 function select calculate on change calc input type checkbox calculate on click calc function cal
Firefox 书签探索未超过 Javascript 的第一级

我已经编写了一些代码来探索我的 Firefox 书签但我只获得了第一级书签即我没有获得文件夹中的链接 e g 搜索引擎雅虎网站谷歌网站在此示例中我只能访问 Search engines 和 google com 不能访问 yah
为 illustrator 导出脚本以保存为 web jpg

任何人都可以帮我为 illustrator CC2017 编写一个脚本将文件以 JPG 格式导出到网络旧版然后保存文件并关闭我有 700 个文件每个文件有 2 个画板单击文件 gt 导出 gt 另存为 Web 旧版然后右键文
Javascript转换时区问题

我在转换当前时区的日期时间时遇到问题我从服务器收到此日期字符串格式为 2015 10 09T08 00 00 这是中部时间但是当我使用 GMT 5 中的 new Date strDate 转换此日期时间时它返回给我的信息如下这是不
Jquery 验证不能正确验证数字？

我在使用 jquery 非侵入式验证验证数字时遇到问题我使用的版本是 ASP NET MVC 3 jQuery 1 9 1 jQuery 用户界面 1 10 1 JQuery 验证 1 11 0 我试图验证的输入是
Safari 支持 JavaScript window.onerror 吗？

我有一个附加到 window onerror 的函数 window onerror function errorMsg url line window alert asdf 这在 firefox chrome 和 IE 中工作正常但在 s
如何更改此 jquery 插件的时区/时间戳？

我正在使用这个名为 timeago 的插件在这里找到 timeago yarp com 它工作得很好只是它在似乎不同的时区运行我住在美国东部费城时区当我将准确的 EST 时间放入 timeago 插件时比如 2011 05 28
如何仅在最后一个
处给出透明六边形角度？

我必须制作这样的菜单替代文本 http shup com Shup 330421 1104422739 My Desktop png http shup com Shup 330421 1104422739 My Desktop png
为什么 jquery 没有检测到单选按钮未被选中的情况？ [复制]

这个问题在这里已经有答案了可能的重复 JQuery radioButton change 在取消选择期间不会触发 https stackoverflow com questions 5176803 jquery radiobutton c
使用 Ajax 请求作为源数据的 Jquery 自动完成搜索

我想做的事我想使用 jquery 自动完成函数创建一个输入文本字段该函数从跨域curl 请求获取源数据结果应该与此示例完全相同 CSS 在这里并不重要 http abload de img jquerydblf5 png http a
在 ASP.NET Core MVC 中访问从视图到控制器的隐藏值

我需要帮助使用 jQuery 从 ASP NET Core razor 视图页面传递隐藏控件值 jQuery 用于获取动态控件选定的值 section scripts
使用

jqGrid 的排序/过滤问题

jqGrid 的排序/过滤问题 的相关文章

jqGrid 的排序/过滤问题的相关文章