我的jqgrid

时间:2016-01-18 22:28:29

标签: jquery jqgrid

我正在使用jqgrid,我想要编辑(添加,编辑和删除)数据。 但是当它们中的任何一个不工作时。我点击添加或编辑或删除图标,完全没有响应。

<script>
    $(document).ready(function () {
        jQuery("#jqgrid").jqGrid({
            url: API_URL,
            datatype: 'json',
            mtype: 'GET',
            height: 'auto',
            colNames: ['', 'Company', 'ContactName', 'ContactPhone', 'UserName', 'UserKey', 'Active', 'FacilityId', 'ClientId', 'PhotoURL', 'PushToGP'],
            colModel: [
                { name: 'act', template: "actions", width: 80 },
                { name: 'company', width: 120 },
                { name: 'contact', width: 110 },
                { name: 'phone', width: 120 },
                { name: 'username', align: "right", width: 90 },
                { name: 'userkey', align: "right", width: 120 },
                { name: 'active', width: 50, template: "booleanCheckboxFa" },
                { name: 'facility', align: "right", width: 100 },
                { name: 'client', align: "right", width: 100 },
                { name: 'photo', align: "right", width: 80 },
                { name: 'pushtogp', align: "right", width: 80 }
            ],
            cmTemplate: { autoResizable: true, editable: true },
            iconSet: "fontAwesome",
            rowNum: 10,
            rowList: [10, 20, "10000:All"],
            pager: pagerSelector,
            sortname: 'company',
            viewrecords: true,
            caption: "Vendor Managerment"
        });

    $("#jqgrid").jqGrid('navGrid', pagerSelector,
            {
                //navbar options
                edit: true,
                editicon: 'ace-icon fa fa-pencil blue',
                add: true,
                addicon: 'ace-icon fa fa-plus-circle purple',
                del: true,
                delicon: 'ace-icon fa fa-trash-o red',
                search: true,
                searchicon: 'ace-icon fa fa-search orange',
                refresh: true,
                refreshicon: 'ace-icon fa fa-refresh green',
                view: true,
                viewicon: 'ace-icon fa fa-search-plus grey'
            },
            {
                //edit record form
                //closeAfterEdit: true,
                //width: 700,
                recreateForm: true,
                mtype: 'PUT',
                onclickSubmit: function (params, postdata) {
                    params.url = API_URL;
                },
                beforeShowForm: function (e) {
                    var form = $(e[0]);
                    form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />');
                    styleEditForm(form);
                }
            },
            {
                //new record form
                //width: 700,
                closeAfterAdd: true,
                recreateForm: true,
                viewPagerButtons: false,
                mtype: 'POST',
                onclickSubmit: function (params, postdata) {
                    params.url = API_URL;
                },
                beforeShowForm: function (e) {
                    var form = $(e[0]);
                    form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar')
                        .wrapInner('<div class="widget-header" />');
                    styleEditForm(form);
                }
            },
            {
                //delete record form
                recreateForm: true,
                mtype: 'DELETE',
                onclickSubmit: function (params, postdata) {
                    params.url = API_URL;
                },
                beforeShowForm: function (e) {
                    var form = $(e[0]);
                    if (form.data('styled')) return false;

                    form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />');
                    styleDeleteForm(form);

                    form.data('styled', true);
                }
            },
            {
                //search form
                recreateForm: true,
                afterShowSearch: function (e) {
                    var form = $(e[0]);
                    form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />');
                    styleSearchForm(form);
                },
                afterRedraw: function () {
                    styleSearchFilters($(this));
                },
                multipleSearch: true,
                /**
                                     multipleGroup:true,
                                     showQuery: true
                                     */
            },
            {
                //view record form
                recreateForm: true,
                beforeShowForm: function (e) {
                    var form = $(e[0]);
                    form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />');
                }
            }
        );
    jQuery("#jqgrid").jqGrid('inlineNav', pagerSelector);

    });
</script>

更新: 它工作但内联加按钮没有显示。看图像。我将鼠标悬停在显示的位置&#34;添加新行&#34;但没有图标。 button

1 个答案:

答案 0 :(得分:0)

问题是没有以下功能的定义。

styleEditForm(form)
styleDeleteForm(form)
styleSearchForm(form)
styleSearchFilters($(this))

您应该添加这些功能的定义或删除它们。