jqGrid添加行按钮，添加工具栏自定义按钮

html

 <table id="grid-table"></table>

  <div id="grid-pager"></div>

 JS

 var grid_selector = "#grid-table";
 var pager_selector = "#grid-pager";

 jQuery(grid_selector).jqGrid({
                //direction: "rtl",
...........

 colModel: [
                    {
                        name: 'myac', index: '', width: 80, fixed: true, sortable: false, resize: false,
                        //formatter:'actions',
                        formatter: function (value, grid, rows, state) { return "<a href=\"#\" style=\"color:#f60\" onclick=\"Modify(" + rows.id + ")\">Edit</a>" }
                        //formatoptions:{
                        //	keys:true,
                        //delbutton: false,//disable delete button

                        //	delOptions:{recreateForm: true, beforeShowForm:beforeDeleteCallback},
                        //editformbutton:true, editOptions:{recreateForm: true, beforeShowForm:beforeEditCallback}
                        //}
                    },

 通过设置 formatter:的返回值 来设置行按钮 。

注意：行按钮的 js方法 只能在最外面写 才能够调用 

 formatter: function (value, grid, rows, state) { return "<a href=\"#\" style=\"color:#f60\" onclick=\"Modify(" + rows.id + ")\">Edit</a>" }

 

 <script type="text/javascript">
        function Modify(id) {
            var grid_selector = "#grid-table";
            var model = jQuery(grid_selector).jqGrid('getRowData', id);
            alert(model.id);
        }

 2、工具栏增加自定义按钮

 var jqnav = jQuery(grid_selector).jqGrid('navGrid', pager_selector,
                { 	//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',
                }，{}，{}，{}

jqnav.navButtonAdd(pager_selector, {
                caption: "借阅",
                title:"jiejue",
                buttonicon: "ace-icon fa fa-globe blue",
                onClickButton: function () {
                    var s;
                   //多选获取
                    s = jQuery(grid_selector).jqGrid('getGridParam', 'selarrrow');
                    alert(s);
                },
                position: "last"
            })
            jqnav.navButtonAdd(pager_selector, {
                caption: "Del",
                buttonicon: "ace-icon fa fa-pencil blue",
                onClickButton: function () {
                    alert("Deleting Row");
                },
                position: "last"
            });

 关于navButtonAdd的属性：

• caption ：按钮上的文本，可以是空值；
• buttonicon ：按钮上的图标，如果设为“none”，则只显示按钮上的文本；
• onClickButton ：当点击按钮时所调用的方法函数，默认为null；
• position ：添加新按钮的位置，first或last；默认为last；
• title ：新按钮的tooltip
• cursor ：当鼠标滑过按钮时的光标样式，默认为pointer；
• id ：为按钮设置id。

 

 自定义分隔符

$("#grid_id").navSeparatorAdd('#pager',{separator_parameters}); 

相关属性：

• sepclass ：分隔符的CSS样式；
• sepcontent ：分隔符中的内容；

设置选中状态

jQuery("#m1s").click(function() { jQuery("#list9").jqGrid('setSelection', "13"); });

根据选中id获取行数据

jQuery("#a1").click(function() { var id = jQuery("#list5").jqGrid('getGridParam', 'selrow'); if (id) { var ret = jQuery("#list5").jqGrid('getRowData', id); alert("id=" + ret.id + " invdate=" + ret.invdate + "..."); } else { alert("Please select row"); } });

//删除行12

jQuery("#a2").click(function() { var su = jQuery("#list5").jqGrid('delRowData', 12); if (su)

//自己写ajax逻辑

alert("Succes. Write custom code to delete row from server"); else alert("Allready deleted or not in list"); });

//设置行数据update

jQuery("#a3").click(function() { var su = jQuery("#list5").jqGrid('setRowData', 11, { amount : "333.00", tax : "33.00", total : "366.00", note : "<img src='images/user1.gif'/>" }); if (su)

//自己写ajax逻辑

alert("Succes. Write custom code to update row in server"); else alert("Can not update"); }); jQuery("#a4").click(function() { var datarow = { id : "99", invdate : "2007-09-01", name : "test3", note : "note3", amount : "400.00", tax : "30.00", total : "430.00" };

//新增行

var su = jQuery("#list5").jqGrid('addRowData', 99, datarow); if (su){

//自己写ajax逻辑

alert("Succes. Write custom code to add data in server"); }else{ alert("Can not update"); } });