个人中心
gpt4 book ai didi

javascript - 指定自定义搜索参数时，jqGrid 自定义 editfunc 不起作用

转载 作者：行者123 更新时间：2023-12-03 05:27:54 24 4
gpt4 key购买 nike

此处使用的 jqGrid 版本:@license Guriddo jqGrid JS - v5.2.0 - 2016-11-27 版权所有(c) 2008，托尼·托莫夫，tony@trirand.com

下面的第一 block 代码是 jqGrid 的完整自包含实现。事实上，它主要取自 jqGrid 网站上的示例之一。我在其中添加了一个片段，即带有剪辑标记的注释行之间的部分。

添加的片段添加了自定义 editfunc。它工作得很好(在这个例子中，它当然或多或少是一个 stub ，只做一个警报)。此外，搜索可以使用其所有默认参数进行。对于两者，选择一行并单击相应的“编辑”或“搜索”图标。

<!DOCTYPE html>

<html lang="en">
<head>
    <!-- The jQuery library is a prerequisite for all jqSuite products -->
    <script type="text/ecmascript" src="./lib/jquery/jquery.min.js"></script>
    <!-- This is the Javascript file of jqGrid -->
    <script type="text/ecmascript" src="./lib/jqGrid-js-free/js/jquery.jqGrid.js"></script>
    <!-- This is the localization file of the grid controlling messages, labels, etc.-->
    <!-- We support more than 40 localizations -->
    <script type="text/ecmascript" src="./lib/jqGrid-js-free/js/i18n/grid.locale-en.js"></script>
    <!-- A link to a jQuery UI ThemeRoller theme, more than 22 built-in and many more custom -->
    <link rel="stylesheet" type="text/css" media="screen" href="./lib/jquery-ui/jquery-ui.css" />
    <!-- The link to the CSS that the grid needs -->
    <link rel="stylesheet" type="text/css" media="screen" href="./lib/jqGrid-js-free/css/ui.jqgrid.css" />
    <meta charset="utf-8" />
    <title>jqGrid without PHP - Loading Data - JSON Live</title>
</head>
<body>

    <table id="jqGrid"></table>
    <div id="jqGridPager"></div>

    <script type="text/javascript">

        $(document).ready(function () {
            $("#jqGrid").jqGrid({
                colModel: [
                    {
                        label: 'Title',
                        name: 'Title',
                        width: 150,
                        formatter: formatTitle
                    },
                    {
                        label: 'Link',
                        name: 'Link',
                        width: 80,
                        formatter: formatLink
                    },
                    {
                        label: 'View Count',
                        name: 'ViewCount',
                        width: 35,
                        sorttype:'integer',
                        formatter: 'number',
                        align: 'right'
                    },
                    {
                        label: 'Answer Count',
                        name: 'AnswerCount',
                        width: 25
                    }
                ],

                viewrecords: true, // show the current page, data rang and total records on the toolbar
                width: 780,
                height: 200,
                rowNum: 15,
                datatype: 'local',
                pager: "#jqGridPager",
                caption: "Load live data from stackoverflow"
            });

            fetchGridData();

            function fetchGridData() {

                var gridArrayData = [];
                // show loading message
                $("#jqGrid")[0].grid.beginReq();
                $.ajax({
                    url: "http://api.stackexchange.com/2.2/questions?order=desc&sort=activity&tagged=jqgrid&site=stackoverflow",
                    success: function (result) {
                        for (var i = 0; i < result.items.length; i++) {
                            var item = result.items[i];
                            gridArrayData.push({
                                Title: item.title,
                                Link: item.link,
                                CreationDate: item.creation_date,
                                ViewCount: item.view_count,
                                AnswerCount: item.answer_count
                            });
                        }
                        // set the new data
                        $("#jqGrid").jqGrid('setGridParam', { data: gridArrayData});
                        // hide the show message
                        $("#jqGrid")[0].grid.endReq();
                        // refresh the grid
                        $("#jqGrid").trigger('reloadGrid');
                    }
                });
            }

            function formatTitle(cellValue, options, rowObject) {
                return cellValue.substring(0, 50) + "...";
            };

            function formatLink(cellValue, options, rowObject) {
                return "<a href='" + cellValue + "'>" + cellValue.substring(0, 25) + "..." + "</a>";
            };

            /*---- 8< ------*/
            // editfunc here works (an alert is popped up), although the format of the function parameters is not according to spec:
            // searchfunc also works (it is the default)

            $('#jqGrid').jqGrid( 'navGrid', '#jqGridPager',{
                add:false, del:false, view:false,
                editfunc: function(){alert('EDIT');}
            });
            /*---- >8 ------*/

        });

    </script>


</body>
</html>

现在获取相同的文件，删除剪断线之间的小片段，并将其替换为以下片段，这看起来更像是我需要实现的东西:

    /*---- 8< ------*/
    // editfunc does NOT work as desired here (no alert)
    // search function works, WITH the parameters as specified here
    // from the file jquery.jqGrid.js (): navGrid : function parameters: (elem, p, pEdit, pAdd, pDel, pSearch, pView)
    // (=jqGrid-free @license Guriddo jqGrid JS - v5.2.0 - 2016-11-27  Copyright(c) 2008, Tony Tomov, tony@trirand.com)

    $('#jqGrid').jqGrid( 'navGrid', '#jqGridPager',
        { add:false, del:false, view:false },           // p
        { editfunc: function(r){alert('EDIT');} },      // pEdit    (does NOT work)
        { },                                            // pAdd
        { },                                            // pDel
        { multipleSearch: true, closeAfterSearch:true, closeOnEscape:true, searchOnEnter:true, showQuery:true },    // pSearch (works with these options)
        { }                                             // pView
    );
    /*---- >8 ------*/

在这里，唉，editfunc 根本不起作用，我得到了默认的编辑功能。现在，搜索可以根据需要使用自定义指定参数进行工作。

简而言之:我似乎无法同时使用自定义的 editfunc 和具有自定义参数的搜索!

我看不出第二个片段有什么问题。顺便说一句。还可以引用 jqGrid wiki 上的一些示例。

任何让两者协同工作的提示将不胜感激。

最佳答案

问题很简单:您将 editfunc 放置在最后一个代码段中的错误位置。 editfunc 应指定为 navGrid 第二个参数的属性(与 add:false、del:false、view:false 一起) 。您在代码的第一部分中正确使用了 editfunc，但将其放置在代码的第二部分中的错误位置。您可以通过使用来修复代码

$('#jqGrid').jqGrid( 'navGrid', '#jqGridPager',
    { add:false, del:false, view:false, editfunc: function(r){alert('EDIT');} },  // p
    { },      // pEdit
    { },                                            // pAdd
    { },                                            // pDel
    { multipleSearch: true, closeAfterSearch:true, closeOnEscape:true,
        searchOnEnter:true, showQuery:true },       // pSearch (works with these options)
    { }                                             // pView
);

顺便说一句，您将商业产品Guriddo jqGrid JS的代码放在jqGrid-js-free目录中，这听起来很奇怪。 Guriddo jqGrid JS 不能免费使用。您可以查看当前价格here 。我开始开发free jqGrid jqGrid的fork，可以完全免费使用，正因为如此。免费的jqGrid实现了许多新功能，这对您会有帮助。演示https://jsfiddle.net/OlegKi/odvxefra/3/是对代码的一个小修改，显示

enter image description here

我另外使用了

url: "https://api.stackexchange.com/2.2/questions",
// add sending of custom parameters to the URL
postData: {
    order: "desc",
    sort: "activity",
    tagged: "jqgrid",
    site: "stackoverflow"
},
datatype: "json",
// below prmNames remove sending all standard jqGrid paranmeters
prmNames: {
    page: null,
    rows: null,
    sort: null,
    order: null,
    search: null,
    nd: null,
    id: "question_id"
},
jsonReader: {
    root: "items",
    repeatitems: false,
    id: "question_id"
},
loadonce: true,
forceClientSorting: true,
sortname: "creation_date",
sortorder: "desc"

数据将从同一 URL“http://api.stackexchange.com/2.2/questions?order=desc&sort=activity&tagged=jqgrid&site=stackoverflow ”加载，按 creation_date 属性按降序顺序在本地排序，并显示在网格中。通过在 additionalProperties 中添加属性，可以使用自定义格式化程序中的其他属性。例如，您可以添加 additionalProperties: ["owner", "is_answered", "score", "last_activity_date"] 以在本地保存属性并有权访问自定义属性等内部的属性格式化程序。

关于javascript - 指定自定义搜索参数时，jqGrid 自定义 editfunc 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41080215/

24 4 0
文章推荐： python-sphinx - 在 reStructuredText 中格式化链接中的文本
文章推荐： PHP Zend Youtube API 上传 - 此操作错误需要开发人员 key
文章推荐： android-studio - 无法在离线模式下为Android Studio设置Gradle
文章推荐： javascript - 如何让按键触发链接
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com