自定义 jQGrid 发布操作 [英] Custom jQGrid post action

问题描述

我有一个很好的 jQGrid 内联编辑示例 的当前版本支持easy实现自定义按钮的方法.请参阅演示.

I have an great sample of inline edit with jQGrid http://ok-soft-gmbh.com/jqGrid/TestSamle/Admin.htm There is two custom actions Edit and Delete.

I want to add one more custom inline Action, lets call it ToggleOnline. On this action i want to post all cells of the grid to the controller. Basically it will be kind of of edit action but it will set some default values to some columns.

The inline buttons was added like that:

{ name: 'act', index: 'act', width: 55, align: 'center', sortable: false, formatter: 'actions',
                        formatoptions: {
                            keys: true, // we want use [Enter] key to save the row and [Esc] to cancel editing.
                            delOptions: myDelOptions
                        }
                    }

than to add custom additional button i was using event loadComplete:

loadComplete: function(){ 
            debugger;
            var ids = jQuery("#Grid1").getDataIDs(); 
                for(var i=0;i<ids.length;i++){ 
                    var cl = ids[i];
                    custom = "<input style='height:22px;width:20px;' type='button' value='E' onclick=jQuery('#Grid1').editRow(" + cl + "); />";
                    jQuery("#Grid1").setRowData(ids[i], { act: custom }) 
                } 
            } 

but the custom button does not appearing at all. And also i need somehow to post row data and also i need to specify custom action name(oper) to handle this action on server.

解决方案

I updated the demo for you. Now the http://ok-soft-gmbh.com/jqGrid/TestSamle/Admin1.htm do what you need. (I removed from the code the second grid to hold the code smaller):

Some comments to the implementation. The actions formatter add "action buttons" elements inside a div. Every "action button" has the HTML markup like the following

<div style="margin-left: 5px; float: left;"
     class="ui-pg-div ui-inline-del"
     onmouseover="jQuery(this).addClass('ui-state-hover');"
     title="Delete selected row"
     onmouseout="jQuery(this).removeClass('ui-state-hover');"
     onclick="$.fn.fmatter.rowactions('10','List1','del',0);">
    <span class="ui-icon ui-icon-trash"></span>
</div>

So to have the look of the custom button close to the original "action buttons" I do inside of loadComplete to following:

loadComplete: function () {
    var grid = $(this),
        iCol = getColumnIndexByName(grid,'act'); // 'act' - name of the actions column
    grid.children("tbody")
        .children("tr.jqgrow")
        .children("td:nth-child("+(iCol+1)+")")
        .each(function() {
            $("<div>",
                {
                    title: "Custom",
                    mouseover: function() {
                        $(this).addClass('ui-state-hover');
                    },
                    mouseout: function() {
                        $(this).removeClass('ui-state-hover');
                    },
                    click: function(e) {
                        alert("'Custom' button is clicked in the rowis="+
                              $(e.target).closest("tr.jqgrow").attr("id") +" !");
                    }
                }
              ).css({"margin-left": "5px", float:"left"})
               .addClass("ui-pg-div ui-inline-custom")
               .append('<span class="ui-icon ui-icon-document"></span>')
               .appendTo($(this).children("div"));
    });
}

where

var getColumnIndexByName = function(grid,columnName) {
        var cm = grid.jqGrid('getGridParam','colModel'), i=0,l=cm.length;
        for (; i<l; i+=1) {
            if (cm[i].name===columnName) {
                return i; // return the index
            }
        }
        return -1;
    };

You can change the icon of the custom button from 'ui-icon-document' and change the code of the click event handle what you need I showed how you can get the rowid. Using it you can use getRowData method to get contain of another cells of the row.

UPDATED: The current version of free jqGrid supports easy way to implement custom buttons. See the demo.

这篇关于自定义 jQGrid 发布操作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！