08jqGrid - 自定义按钮

简介: 08jqGrid - 自定义按钮

自定义按钮语法

jQuery("#grid_id").navGrid("#pager",...).navButtonAdd("#pager",{parameters});
jQuery("#grid_id").jqGrid('navGrid',"#pager",...).jqGrid('navButtonAdd',"#pager",{parameters});
{ caption:"NewButton", buttonicon:"ui-icon-newwin", onClickButton:null, position: "last", title:"", cursor: "pointer"}  

参数解析:

  • caption:按钮名称,可以为空,string类型
  • buttonicon:按钮的图标,string类型,必须为UI theme图标
  • onClickButton:按钮事件,function类型,默认null
  • position:first或者last,按钮位置
  • title:string类型,按钮的提示信息
  • cursor:string类型,光标类型,默认为pointer
  • id:string类型,按钮id

例子

如果设置多个按钮(index.js代码):

$(function() {
  //页面加载完成之后执行
  pageInit();
});
function pageInit() {
  //创建jqGrid组件
  jQuery("#list2").jqGrid({
    url: 'data/JSONData.json', //组件创建完成之后请求数据的url
    datatype: "json", //请求数据返回的类型。可选json,xml,txt
    colNames: ['Inv No', 'Date', 'Client', 'Amount', 'Tax', 'Total', 'Notes'], //jqGrid的列显示名字
    colModel: [ //jqGrid每一列的配置信息。包括名字,索引,宽度,对齐方式.....
      {name: 'id',index: 'id',width: 55},
      {name: 'invdate',index: 'invdate',width: 90},
      {name: 'name',index: 'name asc, invdate',width: 100},
      {name: 'amount',index: 'amount',width: 80,align: "right"},
      {name: 'tax',index: 'tax',width: 80,align: "right"},
      {name: 'total',index: 'total',width: 80,align: "right"},
      {name: 'note',index: 'note',width: 150,sortable: false}
    ],
    rowNum: 10, //一页显示多少条
    rowList: [10, 20, 30], //可供用户选择一页显示多少条
    pager: '#pager2', //表格页脚的占位符(一般是div)的id
    sortname: 'id', //初始化的时候排序的字段
    sortorder: "desc", //排序方式,可选desc,asc
    mtype: "get", //向后台请求数据的ajax的类型。可选post,get
    viewrecords: true,
    caption: "JSON Example" //表格的标题名字
  });
  /*创建jqGrid的操作按钮容器*/
  /*可以控制界面上增删改查的按钮是否显示*/
  jQuery("#list2")
    .jqGrid('navGrid', '#pager2', {
      edit: false,
      add: false,
      del: false
    }).navButtonAdd("#pager2", {
      caption: "Add",
      buttonicon: "ui-icon-add",
      onClickButton: function() {
        alert("Adding Row");
      },
      position: "last"
    }).navButtonAdd('#pager2', {
      caption: "Del",
      buttonicon: "ui-icon-del",
      onClickButton: function() {
        alert("Deleting Row");
      },
      position: "last"
    });;
}

关键代码:


目录
打赏
0
0
0
0
239
分享
相关文章
|
9月前
|
40.c#:TreeView 控件
40.c#:TreeView 控件
89 1
48zTree - 下拉菜单
48zTree - 下拉菜单
41 0
|
5月前
|
Twaver-HTML5基础学习(28)工具条(添加自定义按钮_自定义事件)
这篇文章介绍了如何在Twaver-HTML5中创建工具条,添加自定义按钮,并绑定自定义事件,包括放大、缩小、占满屏幕和重置画布大小的功能。
75 11
49zTree - 带 checkbox 的多选下拉菜单
49zTree - 带 checkbox 的多选下拉菜单
54 0
21zTree - 用 zTree 方法 勾选 checkbox
21zTree - 用 zTree 方法 勾选 checkbox
73 0
jqGrid 表格设置单选按钮
jqGrid 表格设置单选按钮
170 0
jquery 使用attr方法对checkBox进行全选和反选操作
一次点击按钮进行全选的时候,checkbox全部选中;再次点击的时候,checkbox取消选中。 第二次,第三次,之后再点击,没有效果,代码也执行。checkbox的checked属性也改变,但是checkbox就是没有 被选中。问题解决办法是把红色部分中的attr方法修改
159 0
Jquery中的CheckBox、RadioButton、DropDownList的取值赋值实现代码
由于Jquery的版本更新很快,代码的写法也改变了许多,以下Jquery代码适query1.4版本以上Radio 1.获取选中值,三种方法都可以: $('input:radio:checked').val(); $("input[type='radio']:checked").
1024 1
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等