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

最新推荐文章于 2026-05-09 12:19:01 发布

原创最新推荐文章于 2026-05-09 12:19:01 发布 · 5.6k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #ViewUI

JS 专栏收录该内容

37 篇文章

订阅专栏

本文详细介绍了如何使用jQuery库实现表格的基本操作，包括行按钮自定义、工具栏自定义按钮添加以及表格分隔符设置。此外，还展示了如何通过设置formatter属性来创建行操作按钮，并说明了在不同场景下使用navGrid方法实现自定义工具栏的步骤。通过实例代码演示了如何获取表格数据、执行操作和调整表格外观。

html

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

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

 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>" }

注意：rows.id 有时候取不到，rows是以一种数组形式存在，所以采用 rows[i] 来取值。

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