javascript - 内联编辑后如何将数据发送到服务器？

标签 javascript jquery jqgrid free-jqgrid

我正在使用 jQgrid Free ( release 4.15.2 )，我需要添加内联编辑行的功能，这根本不是问题，因为它非常容易设置。这是我正在使用的代码:

$.jgrid = $.jgrid || {};
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;

$(function () {
    "use strict";

    var $grid = $("#list"),
        pagerSelector = "#pager",
        customAddButton = function (options) {
            $grid.jqGrid('navButtonAdd', pagerSelector, options);
            $grid.jqGrid('navButtonAdd', '#' + $grid[0].id + "_toppager", options);
        };

    $.fn.fmatter.customActionsFormatter = function (cellValue, options, rowData) {
        return '<a href="#" title="Delete selected row"><span class="fa fa-fw fa-trash-o delete_row" data-id="' + rowData.Id + '"></span></a>';
    };

    $grid.jqGrid({
        url: '/ajax/plans_to_forms/get_all',
        datatype: "json",
        colNames: ["", "Id", "Form #", "Form", "Plan", "Class", "Drug"],
        colModel: [
            {name: "act", formatter: "customActionsFormatter", width: 20, search: false},
            {name: "Id", jsonmap: "Id", key: true, hidden: true},
            {name: "FormId", align: 'center', fixed: true, frozen: true, resizable: false, width: 100},
            {name: "FormName", width: 300},
            {name: "PlanName", width: 300},
            {name: "DrugGroupName", width: 300},
            {name: "DrugName", width: 300}
        ],
        cmTemplate: {autoResizable: true, editable: true},
        iconSet: "fontAwesome",
        rowNum: 25,
        guiStyle: "bootstrap",
        autoResizing: {compact: true},
        rowList: [25, 50, 100, "10000:All"],
        viewrecords: true,
        autoencode: true,
        sortable: true,
        pager: pagerSelector,
        toppager: true,
        cloneToTop: true,
        hoverrows: true,
        multiselect: true,
        multiPageSelection: true,
        rownumbers: true,
        sortname: "Id",
        sortorder: "desc",
        loadonce: true,
        autowidth: true,
        autoresizeOnLoad: true,
        forceClientSorting: true,
        shrinkToFit: true,
        navOptions: {
            edit: false,
            add: false,
            del: false,
            search: false
        },
        inlineEditing: {keys: true, defaultFocusField: "DrugGroupName", focusField: "DrugGroupName"},
        onSelectRow: function (rowid, status, e) {
            var $self = $(this), savedRow = $self.jqGrid("getGridParam", "savedRow");

            if (savedRow.length > 0 && savedRow[0].id !== rowid) {
                $self.jqGrid("restoreRow", savedRow[0].id);
            }

            $self.jqGrid("editRow", rowid, {focusField: e.target});
        }
    }).jqGrid('navGrid', pagerSelector, {
        search: false,
        edit: false,
        add: false,
        del: false,
        refresh: true,
        cloneToTop: true
    }).jqGrid("filterToolbar", {
        stringResult: true, searchOnEnter: false, defaultSearch: 'cn'
    }).jqGrid("gridResize").jqGrid('setFrozenColumns');

    customAddButton({
        caption: 'Delete selected',
        buttonicon: 'fa-trash-o',
        title: "Delete all selected rows",
        onClickButton: function () {
            var rowIds = $("#list").jqGrid('getGridParam', 'selarrrow');

            if (rowIds.length > 0) {
                delete_all_link_modal.modal();
                delete_all_link_modal.attr('data-link-ids', rowIds);
            } else {
                alert('You must select at least one item.');
            }
        }
    });
});

以下行启用内联编辑:

inlineEditing: {keys: true, defaultFocusField: "DrugGroupName", focusField: "DrugGroupName"}

我的问题出在哪里？我只需要编辑 DrugGroupName 列，上面的行使整行可编辑，这导致我提出以下问题:

  • 是否可以仅编辑给定的一组列而不是全部？ - 我正在检查文档 here但我找不到任何有用的东西

  • 只要我点击任何其他地方或按 ENTER 键就可以将数据发送到服务器吗？ - 我想避免额外点击保存图标。

更新:我已经找到了第一个问题的答案。我只需要在定义 colModel 时使该列不可编辑。例如:

colModel: [
    {name: "act", formatter: "customActionsFormatter", width: 20, search: false},
    {name: "Id", jsonmap: "Id", key: true, hidden: true},
    {name: "FormId", align: 'center', fixed: true, frozen: true, resizable: false, width: 100, editable: false},
    {name: "FormName", width: 300, editable: false},
    {name: "PlanName", width: 300, editable: false},
    {
        name: "DrugGroupName",
        width: 300,
        edittype: "select",
        editoptions: {
            generateValue: true,
            selectFilled: function (options) {
                setTimeout(function () {
                    $(options.elem).select2({
                        width: "100%"
                    });
                }, 0);
            }
        },
        stype: "select", searchoptions: {
            sopt: ["eq", "ne"],
            generateValue: true,
            noFilterText: "Any",
            selectFilled: function (options) {
                $(options.elem).select2({
                    width: "100%"
                });
            }
        }
    },
    {name: "DrugName", width: 300, editable: false}
]

这样我就强制 DrugGroupName 成为唯一可编辑的。

最佳答案

我认为你的代码有很多小问题。我准备了演示https://jsfiddle.net/OlegKi/rmo2370r/19/ ，它应该可以解决大多数问题，并演示 select2 的用法和免费 jqGrid 的一些功能。

第一个小问题是正确rowid的使用。您使用当前隐藏的列

{name: "Id", jsonmap: "Id", key: true, hidden: true}

这是使用jqGrid的用户的典型误解。 Rowid 将保存为 id行的属性( <tr> 元素)。请参阅the picture 。无需将案例信息隐藏<td>网格内部的元素。相反，可以使用以下 jqGrid 选项

prmNames: { id: "Id" },
jsonReader: { id: "Id" },

相反。选项jsonReader.id通知 jqGrid 在填充网格期间从哪里获取 rowid 和 prmNames.id提供编辑网格时的 id 名称。

要在 JSFiddle 中填充 jqGrid，可以使用 Echo 服务:

url: '/echo/json/',
datatype: 'json',
mtype: 'POST', // required for '/echo/json/'
postData: {
    json: JSON.stringify(mydata)
},

对 URL /echo/json/ 的请求将mydata作为回应。可以使用Chrome/IE/Firefox的开发者工具的Network选项卡来详细检查HTTP流量。

以同样的方式可以使用

editurl: '/echo/json/',
formDeleting: {
    url: '/echo/json/',
    ...
}

用于内联编辑和表单删除。

接下来的变化。我添加了resetWidthOrg: true属性(property) autoResizing :

autoResizing: {
    compact: true,
    resetWidthOrg: true
}

这改变了工作结果autowidth: true与 autoresizeOnLoad: true 结合。您可以看到，所有列的宽度都比以前更好地基于列的内容。请参阅the issues了解更多详情。

我不明白customActionsFormatter的目标。我将其替换为标准格式化程序操作

{ name: "act", template: "actions" }

如果需要，免费的 jqGrid 可以非常轻松地自定义操作按钮。请参阅the answer和 the wiki article了解更多详情。

您使用的旧代码

cmTemplate: {
  autoResizable: true,
  editable: true
}

并设置editable: false在最多的列中。相反，您只需删除 editable: true来自cmTemplate ，添加editable: true仅在一列中，您需要对其进行编辑，并将其包含在 cmTemplate 中其他设置最常用于 colModel :

cmTemplate: {
    width: 300,
    autoResizable: true
}

许多其他代码也可以简化。参见onSelectRow修改后的代码例如。

要自定义删除对话框，可以使用以下设置:

formDeleting: {
    url: '/echo/json/', // '/ajax/plans_to_forms/delete/' in final solution
    width: 320,
    caption: 'Delete Plan to Form Link',
    msg: 'Are you sure you want to delete this link?',
    beforeShowForm: function ($form) {
        var rowids = $form.find("#DelData>td").data("rowids");
            console.log(rowids);
            if (rowids.length > 1) {
            $form.find("td.delmsg")
                    .html('Are you sure you want to delete all the selected form links?');
            }
    }
}

删除发送数据Id=20622,20626和oper=del到服务器( formDeleting.url )。可以使用serializeDelData如果需要，将数据转换为 JSON。

要在编辑期间将更多数据从列发送到服务器，可以添加 editable: "hidden"在某些专栏中。我在FormId中添加了该属性演示的列和编辑期间发送到服务器的数据看起来像

{"FormId":"3393","DrugGroupName":"Some other value","oper":"edit","Id":"20620"}

填写<select>的数据对于对服务器的附加 Ajax 请求，需要使用 editoptions.dataUrl 。我在演示中添加了editoptions.postData仅模拟对服务器的真实请求:

editoptions: {
    dataUrl: "/echo/json/",
    postData: {
        json: JSON.stringify([
                "Non-Specialty Medications",
                "General Pharmacy Authorization",
                "Some other value"
            ])
        },
        buildSelect: function (data) {
            var select = "<select>", i;

            for (i = 0; i < data.length; i++) {
                select += "<option value='" + String(data[i]).replace(/\'/g, "&#39;") +
                            "'>" + $.jgrid.htmlEncode(data[i]) + "</option>"
            }
            return select + "</select>";
        },
        selectFilled: function(options) {
            var $self = $(this);

            setTimeout(function() {
                $(options.elem).select2({
                    width: "100%"
                }).on('select2:select', function (e) { 
                    // save the data on selection
                    $self.jqGrid("saveRow", options.rowid);
                });
            }, 0);
        }
    },
    stype: "select",
    searchoptions: {
        sopt: ["eq", "ne"],
        generateValue: true,
        noFilterText: "Any",
        selectFilled: function(options) {
            $(options.elem).select2({
                width: "100%"
            });
        }
    }
}

以上请求dataUrl返回 JSON 字符串 [ "Non-Specialty Medications", "General Pharmacy Authorization", "Some other value" ]和buildSelect将数据转换为 HTML 片段 <select>包含所有 <options> 。由此产生<select>将被转换为selectFilled内的select2 control打回来。最后代码使用

ajaxSelectOptions: {
    type: "POST",
    dataType: "json"
}

将 Ajax 请求参数更改为 dataUrl 的选项。演示https://jsfiddle.net/OlegKi/rmo2370r/19/包含一些其他小的更改，例如删除不需要的空寻呼机 div 以及 pager: true 的用法就像您已经使用 toppager: true 一样。这是我在免费的 jqGrid 分支中实现的另一项功能，以简化 jqGrid 的使用。

关于javascript - 内联编辑后如何将数据发送到服务器？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48097383/

上一篇：javascript - 如果字符串小于某个数字，则返回 bool 值 JavaScript

下一篇：javascript - 获取数组中的对象

相关文章：

javascript - 单选按钮列在使用 JqGrid 的该单选列的所有网格行中相互排斥？

jquery - BootStrap.groovy数据到gsp中的jqGrid中(groovy服务器页面)

javascript - 通过发送 POST 参数在 Ext JS 4 中显示 PDF

javascript - 无法复制多维数组

javascript - 按窗口和 Attr url 的类选择层次结构元素

jquery - 无法将部分 View 显示为 JQuery Mobile 对话框

jqGrid 多选 - 仅使用复选框限制行的选择

javascript - React 中的 HTML 标签与 React 组件性能对比

javascript - 将 latlng 写入计算机上的文件

jquery - 在循环迭代时添加 CSS 类，JQuery

©2024 IT工具网  联系我们