为什么内联编辑不适用于此方案?

时间:2018-01-09 19:20:26

标签: javascript jquery jqgrid free-jqgrid

我正在尝试为jQgrid启用内联编辑,但我无法使其工作。它必须是真正“虚拟”的东西,但我找不到它。我已将此代码与内联编辑工作且相同的其他网格进行了比较。所以这就是我到目前为止所做的事情(我已经删除了一些部分,完全来自Fiddle - 见下面的链接):

$(function () {
    "use strict";

    var $grid = $("#form_list"),
        maximizeGrid = function () {
            var newWidth = $grid.closest(".ui-jqgrid").parent().width();
            $grid.jqGrid("setGridWidth", newWidth, true);
        },
        mydata = [...];

    // Resize grid if window is being resized
    $(window).on("resize", maximizeGrid);

    $grid.jqGrid({
        colNames: ["", "Form Name", "Fax Number", "FileName", "Folder"],
        colModel: [
            {name: "act", template: "actions", width: 115},
            {name: "FormName", search: true, stype: "text"},
            {name: "FaxNumber",search: true,stype: "text"}, 
            {name: "FormFileName",search: true,stype: "text"}, 
            {name: "folder",search: true,stype: "text"}],
        cmTemplate: {width: 300,autoResizable: true},
        iconSet: "fontAwesome",
        rowNum: 25,
        guiStyle: "bootstrap",
        autoResizing: {compact: true,resetWidthOrg: true},
        rowList: [25, 50, 100, "10000:All"],
        toolbar: [true, "top"],
        viewrecords: true,
        autoencode: true,
        sortable: true,
        pager: true,
        toppager: true,
        cloneToTop: true,
        hoverrows: true,
        multiselect: true,
        multiPageSelection: true,
        rownumbers: true,
        sortname: "Id",
        sortorder: "desc",
        loadonce: true,
        autowidth: true,
        autoresizeOnLoad: true,
        forceClientSorting: true,
        ignoreCase: true,
        prmNames: {id: "Id"},
        jsonReader: {id: "Id"},
        url: '/echo/json/',
        datatype: 'json',
        mtype: 'POST',
        postData: {json: JSON.stringify(mydata)},
        actionsNavOptions: {
            uploadFormicon: "fa-upload",
            uploadFormtitle: "Upload this form",
            cloneFormicon: "fa-clone",
            cloneFormtitle: "Clone this form",
            archiveFormicon: "fa-archive",
            archiveFormtitle: "Archive this form",
            custom: [
                {action: "uploadForm",position: "first",onClick: function (options) {alert("Upload Form, rowid=" + options.rowid);}}, 
                {
                action: "cloneForm",
                position: "first",
                onClick: function (options) {
                    $.ajax({
                        url: '/ajax/forms/clone_by_id',
                        type: 'POST',
                        dataType: 'json',
                        data: {
                            form_id: options.rowid
                        }
                    }).done(function () {
                        $grid.trigger("reloadGrid", {
                            fromServer: true
                        });
                        toastr["success"]("The form has been cloned.", "Information");
                    }).error(function (response) {
                        toastr["error"]("Something went wrong, the form could not be cloned.", "Error");
                        console.error(response);
                    });
                }}, 
                {action: "archiveForm",position: "first",onClick: function (options) {alert("Archive Form, rowid=" + options.rowid);}
            }]
        },
        formDeleting: {
            url: '/ajax/forms/delete',
            delicon: [true, "left", "fa-scissors"],
            cancelicon: [true, "left", "fa-times"],
            width: 320,
            caption: 'Delete form',
            msg: 'Are you sure you want to delete this form?',
            beforeShowForm: function ($form) {
                var rowids = $form.find("#DelData>td").data("rowids");

                $form.closest(".ui-jqdialog").position({
                    of: window,
                    my: "center center",
                    at: "center center"
                });

                if (rowids.length > 1) {
                    $form.find("td.delmsg").html('Are you sure you want to delete all the selected forms?');
                }
            },
            afterComplete: function (response, postdata, formid) {
                if (response.responseText === "true") {
                    alert("Success");
                } else {
                    alert("Error");
                }
            }
        },
        navOptions: {
            edit: false,
            add: false,
            search: false
        },
        inlineEditing: {
            keys: true,
            focusField: "FormName",
            serializeSaveData: function (postData) {
                var changedData = {},
                    prop, p = $(this).jqGrid("getGridParam"),
                    idname = p.keyName || p.prmNames.id,
                    oldValue, cm;

                for (prop in postData) {
                    oldValue = p.savedRow[0][prop];
                    if (p.iColByName[prop] != null) {
                        cm = p.colModel[p.iColByName[prop]];
                    }

                    if (postData.hasOwnProperty(prop) && (postData[prop] !== oldValue || prop === idname)) {
                        changedData[prop] = postData[prop];
                    }
                }

                return changedData;
            },
            aftersavefunc: function () {
                toastr["success"]("The record was updated successfully.", "Information");
            },
            errorfunc: function () {
                toastr["error"]("Something went wrong, the record could not be updated.", "Error");
            }
        },
        onSelectRow: function (rowid, status, e) {
            var $self = $(this),
                $td = $(e.target).closest("tr.jqgrow>td"),
                p = $self.jqGrid("getGridParam"),
                savedRow = p.savedRow;

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

            if ($td.length > 0 && $td[0].cellIndex !== p.iColByName.act) {
                // don't start editing mode on click on "act" column
                $self.jqGrid("editRow", rowid);
            }
        },
        loadComplete: function () {
            var $self = $(this),
                p = $self.jqGrid("getGridParam");

            if (p.datatype === "json") {
                // recreate the toolbar because we use generateValue: true option in the toolbar
                $self.jqGrid("destroyFilterToolbar").jqGrid("filterToolbar");
            }
        }
    }).jqGrid('navGrid').jqGrid("filterToolbar").jqGrid('setFrozenColumns');
});   

有什么想法吗?这是Fiddle

0 个答案:

没有答案