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>" }
注意: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"); } });
相关推荐
jqgrid自定义按钮,jqgrid自定义按钮,jqgrid自定义按钮
jqGrid顶部工具栏扩展,可将导航按钮及自定义按钮添加到表格的顶部,使用方法见https://blog.csdn.net/liandi_123456/article/details/89501692
jqGrid 学习 搜索工具栏 16 jqGrid 学习 搜索 17 jqGrid 学习 自定义格式化类型 19 jqGrid 学习 格式化 21 jqGrid 学习 自定义按钮 26 jqGrid 学习 翻页(2) 28 jqGrid 学习 翻页 33 jqGrid 学习 配置 json 35 ...
jqGrid实现如何自定义组合控件,实现更好用户体验
jqGrid单元格自定义显示设置及getRowData获取原始数据示例
jqgrid实现分组显示和统计的功能,jqgrid实现分组显示和统计
该方式是在jqgrid的列基础上进行编辑,为列添加保存事件,文本域和输入框采用blur失去焦点的方式进行保存,该方法含有点击为其他列赋值的功能。参考api列子并结合自己公司功能需求。
jqgrid合并行、合并列 先看示例图片最终效果: jqgrid合并单元格 .jqgrid { width: 80%; margin: 0 auto; } /* 这个代码是解决表头有一点点错位的问题 */ .ui-state-default, .ui-widget-content .ui-state...
我这里用的不是jqGrid的自带的编辑和删除操作,我已经把分页导航栏下的编辑,删除,搜索都取消掉了,就是这句$(“#list1”).navGrid(“#pager1”,{edit:false,del:false, search:false}), 然后在数据加载完成后,给每...
下面可以获取选择一行的id,如果你选择多行,那下面的id是最后选择的行的id: var id=$(‘#gridTable').jqGrid(‘getGridParam','selrow'); 如果想要获取选择多行的id,那这些id便封装成一个id数组,那可以使用以下...
jqgrid加载本地数据并且分页例子,下载直接搭环境使用
jqgrid jqgrid 增删查改 添加toolbar 不保存到数据库 artdialog 弹出框
本篇文章主要介绍了Jqgrid设置全选(选择)及获取选择行的值示例代码。需要的朋友可以过来参考下,希望对大家有所帮助
一个关于jqGrid使用的小例子(行按钮) ,使用jqGrid的朋友可以参考下。
jqgrid_位于上端的合计行、汇总列表数据,并展示合计行与首行,适用于带数字的列表,简单适用,速度很快
在使用JqGrid时,Table中最后一列是操作列,在操作列中每一行都一个操作按钮,该操作按钮类似下拉菜单,如下图: 在点击Table中【操作】一列时需要弹出一个Div层,该Div层中包含一堆按钮,用于对Table行进行操作,...
在开发过程中遇到一个需求,根据供应商合并证照到期提醒天数,感觉还不错,所以就分享给大家
jquery.jqGrid-4.6.0(jquery表格插件).zip----------jqGrid4.6.0包,官网下载的,原封不动的在这里。 jqgrid_demo40-----可用的-使用方法请查看README文件.rar-----------经我修改过的demo40,官网上面demo40下载...
使用jQuery为表格添加合计行,方法依赖jQuery,方法中使用到的JQ是jQuery中的$方法的别名