jqGrid自定义按钮和汇总问题

标签：

1，jqGrid的自定义按钮事件，是在左下角导航栏产生的，

 jQuery(grid_selector).jqGrid(‘navGrid‘, "#tableId",

             { edit: true,add: true, del: true,view: true},

{

        //edit按钮的一些属性

    可以增加一些上述四个方法的设置

       beforeShowForm: function (e) {}

        },{

      //add按钮的一些属性

},{...},{...}

//在上述四个方括号后直接调用此方法
.jqGrid(‘navButtonAdd‘,pager_selector,{
                buttonicon:‘icon-globe purple‘,
                caption:‘history‘,
                position:‘last‘,
                title:‘view history‘,
                onClickButton:function(){
                    debugger;
                    //获得某行id
                    var gr = jQuery("#grid-table").jqGrid(‘getGridParam‘, ‘selrow‘);
                    //获得某行数据
                    var grr = jQuery("#grid-table").jqGrid(‘getRowData‘,gr);
                    if (gr != null)  alert("history"+grr.name);
                    else alert("Please Select Row");

                }
            })

那么自定义的history按钮就可以了，触发的是查询功能

2,汇总

方法1

 jQuery(grid_selector).jqGrid({
        //地址
        url: "/jqGrid/select.html",
        //发送数据
        postData: {"stock": $("#stock").val(), "name": $("#lastSales").val(), "note": $("#notes").val()},
        //发送方式
        mtype: "get",
        datatype: "json",
        //表格高度
        height: 400,
        //列名
        colNames: [‘ ‘, ‘ID‘, ‘Last Sales‘, ‘Name‘, ‘Stock‘, ‘Ship via‘, ‘Notes‘,‘Amt‘],
        colModel: [            
            {name: ‘id‘, index: ‘id‘, width: 60, sorttype: "int", editable: true},
            {name: ‘sdate‘, index: ‘sdate‘, width: 90, editable: true, sorttype: "date", unformat: pickDate}}
        ],
        //汇总
        footerrow : true,
        userDataOnFooter : true

汇总首先要显示出如图中的汇总行，他是最下放突出的一行，需要在方法1里设置两个属性

 footerrow : true,
 userDataOnFooter : true,

然后想要显示total：和总金额1060怎么做呢

1，总金额是 后台代码通过sql自己计算的，然后放到userdate里

以图片为例

能看到，Totals 显示在note这一列里，总金额显示在amt的这一列里。

所以后台返回的json中，userdate这样设置

userdata:{amt:1060,note:"Totals"}即可

jqGrid自定义按钮和汇总问题

标签：

原文地址：http://my.oschina.net/u/1454202/blog/488143