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

Ecyun.com

html代码

1. <table id="grid-table"></table>
   
2. 
   
3.   <div id="grid-pager"></div>
   

复制代码

JS代码

1. var grid_selector = "#grid-table";
   
2. var pager_selector = "#grid-pager";
   
3. 
   
4. jQuery(grid_selector).jqGrid({
   
5.                 //direction: "rtl",
   
6. ...........
   
7. 
   
8. colModel: [
   
9.                     {
   
10.                         name: 'myac', index: '', width: 80, fixed: true, sortable: false, resize: false,
    
11.                         //formatter:'actions',
    
12.                         formatter: function (value, grid, rows, state) { return "<a href="#" style="color:#f60" onclick="Modify(" + rows.id + ")">Edit</a>" }
    
13.                         //formatoptions:{
    
14.                         //        keys:true,
    
15.                         //delbutton: false,//disable delete button
    
16. 
    
17.                         //        delOptions:{recreateForm: true, beforeShowForm:beforeDeleteCallback},
    
18.                         //editformbutton:true, editOptions:{recreateForm: true, beforeShowForm:beforeEditCallback}
    
19.                         //}
    
20.                     },
    

复制代码

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

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

JS代码

1. formatter: function (value, grid, rows, state)

复制代码

JS代码

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

复制代码

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

1. var jqnav = jQuery(grid_selector).jqGrid('navGrid', pager_selector,
   
2.                 {         //navbar options
   
3.                     edit: true,
   
4.                     editicon: 'ace-icon fa fa-pencil blue',
   
5.                     add: true,
   
6.                     addicon: 'ace-icon fa fa-plus-circle purple',
   
7.                     del: true,
   
8.                     delicon: 'ace-icon fa fa-trash-o red',
   
9.                     search: true,
   
10.                     searchicon: 'ace-icon fa fa-search orange',
    
11.                     refresh: true,
    
12.                     refreshicon: 'ace-icon fa fa-refresh green',
    
13.                     view: true,
    
14.                     viewicon: 'ace-icon fa fa-search-plus grey',
    
15.                 }，{}，{}，{}
    
16. 
    
17. jqnav.navButtonAdd(pager_selector, {
    
18.                 caption: "借阅",
    
19.                 title:"jiejue",
    
20.                 buttonicon: "ace-icon fa fa-globe blue",
    
21.                 onClickButton: function () {
    
22.                     var s;
    
23.                    //多选获取
    
24.                     s = jQuery(grid_selector).jqGrid('getGridParam', 'selarrrow');
    
25.                     alert(s);
    
26.                 },
    
27.                 position: "last"
    
28.             })
    
29.             jqnav.navButtonAdd(pager_selector, {
    
30.                 caption: "Del",
    
31.                 buttonicon: "ace-icon fa fa-pencil blue",
    
32.                 onClickButton: function () {
    
33.                     alert("Deleting Row");
    
34.                 },
    
35.                 position: "last"
    
36.             });

复制代码

关于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"); } });

原文链接：[url]https://www.iteye.com/blog/wyf-2235334[/url]