你如何修改从一个AJAX调用返回的数据之前,在jqGrid的呈现?数据、AJAX、jqGrid

2023-09-10 21:29:30 作者:毀命愛人i

背景

我已经学会了一些不完整的工作由另一家开发商,涉及显示搜索结果。他的方法是使用内联JavaScript和jQuery如下呈现结果的HTML表格。

I've picked up some incomplete work from another developer that involves displaying the results of a search. His approach was to render the results in an HTML table using inline Javascript and jQuery as follows.

我试图完成扫尾工作,但我会preFER少写code和使用jqGrid的,因为它包括排序功能,并获得了code整洁。获取jqGrid的显示结果是很容易,但得到的单选按钮中的空白栏是比我想象的要难。

I'm trying to finish off the work but I would prefer to write less code and use the jqGrid because it includes sorting functionality, and to get the code tidier. Getting the jqGrid to display the results is easy, but getting the radio buttons in a blank column is harder than I thought it would be.

jqGrid的在应用程序的版本是3.7.2。网格需要有在左边选择让事情变得与应用程序的其余部分保持一致单选按钮。

The version of jqGrid in the application is 3.7.2. The grid needs to have radio buttons on the left for selection to keep things consistent with the rest of the application.

如果我坚持

似乎有没有成为一个方式,在jqGrid的未绑定列。也就是说,每一列似乎需要的基础数据中的一个领域。如果没有空场,则行数据和列标题变得不对准。

There doesn't seem to be a way to have an unbound column in jqGrid. That is, each column seems to need a field in the underlying data. If you do not have a dummy field, then the row data and column headers become misaligned.

我遇到一个例如(见行编辑 - >自定义编辑)返回的JSON与数据的虚拟字段,然后修改网格数据要插入的按钮。

I've come across an example (See Row Editing -> Custom Edit) that returns JSON with a dummy field in the data, and then modifies the grid data to insert buttons.

我的preference是不要在有伪数据,因为它的觉得脏的:)我想我的JSON只包括它需要重新present的数据搜索结果。所以我在想,这将是最好添加虚拟场在脚本code,而不是为了保持在服务器端的code干净。

My preference is to not have the dummy data in there, because it feels dirty :) I would like my JSON to only include the data it needs to represent the results of the search. So I was thinking that it would be better to add the dummy field in the script code instead in order to keep the code on the server side clean.

我试图修改从AJAX调用返回前,jqGrid的呈现它的数据。我试着挂钩到 loadComplete 事件,但是当我修改它似乎是它已经呈现后的数据。

I'm trying to modify the data returned from the AJAX call before jqGrid renders it. I've tried hooking into the loadComplete event but when I modify the data it appears to be after it has already rendered.

我也试着挂钩到成功活动的 ajaxGridOptions 字段选项​​但似乎完全忽略该事件,并jqGrid的不呈现数据。

I've also tried hooking into the success event on the ajaxGridOptions field of options but that seems to totally override the event and jqGrid doesn't render the data.

我要如何从Web服务调用返回的数据前,jqGrid的呈现呢?

推荐答案

在我的previous答案的解决方案,打破了排序,所以我想出了另一种解决方案。

The solution in my previous answer broke sorting so I came up with another solution.

由于jqGrid的不提供钩方便修改数据,有必要降回级并钩到jQuery的。我更换了 $。阿贾克斯()办法用我自己的。首先,它会检查是否是由jqGrid的启动操作,如果是这样,它垫数据,调用原始jqGrid的成功处理程序,然后添加单选按钮到网格。排序仍然有效,该数据类型仍然是JSON,而且没有手动调用 addJSONData ,我仍然能够达到什么样的,我需要从previous解决方案。从本质上讲,这使得jQuery的小黑客可以让我获得通过,不作任何jqGrid的黑客远远混乱。

Because jqGrid doesn't provide the hooks to conveniently modify the data, it was necessary to drop back a level and hook into jQuery. I replaced the $.ajax() method with my own. Firstly it checks whether the operation is one being initiated by jqGrid and if so, it pads the data, calls the original jqGrid success handler, and then adds the radio buttons to the grid. Sorting still works, the datatype is still json, and there are no manual calls to addJSONData and I am still able to achieve what I needed from the previous solution. Essentially, making this small jQuery hack allows me to get by without making any jqGrid hacks which is far messier.

// Set up $.ajax() hook for modifying the data before jqGrid receives it
if (!this._ajaxOverridden) {
    var oldAjax = $.ajax;
    $.ajax = function (options) {
        // Check whether this call is from jqGrid to our web service
        if (options.url == config.eventSearchUrl && options.success) {
            // Wrap the success event handler with our own handler that pads the data and creates the radio buttons
            var oldSuccess = options.success;
            options.success = function () {
                thisEventSearchDialog._padData(arguments[0]);
                oldSuccess.apply(this, arguments);
                thisEventSearchDialog._createRadioButtons();
            }
        }
        oldAjax(options);
    };
    this._ajaxOverridden = true;
}