JQGrid学习之自定义按钮

用法： 

    </span></li> 
     <li style="border-style:none none none solid;border-left-width:3px;border-left-color:rgb(108,226,108);list-style:decimal outside;line-height:14px;"> <span style="line-height:1.5;border:none;color:#000000;">...   </span></li> 
     <li style="border-style:none none none solid;border-left-width:3px;border-left-color:rgb(108,226,108);list-style:decimal outside;line-height:14px;"> <span style="line-height:1.5;border:none;color:#000000;">jQuery(</span><span class="string" style="line-height:1.5;border:none;color:#0000FF;">"#grid_id"</span><span style="line-height:1.5;border:none;color:#000000;">).navGrid(</span><span class="string" style="line-height:1.5;border:none;color:#0000FF;">"#pager"</span><span style="line-height:1.5;border:none;color:#000000;">,...).navButtonAdd(</span><span class="string" style="line-height:1.5;border:none;color:#0000FF;">"#pager"</span><span style="line-height:1.5;border:none;color:#000000;">,{parameters});   </span></li> 
     <li style="border-style:none none none solid;border-left-width:3px;border-left-color:rgb(108,226,108);list-style:decimal outside;line-height:14px;"> <span style="line-height:1.5;border:none;color:#000000;">...   </span></li> 
     <li style="border-style:none none none solid;border-left-width:3px;border-left-color:rgb(108,226,108);list-style:decimal outside;line-height:14px;"> <span style="line-height:1.5;border:none;color:#000000;">

如果使用新API 

    </span></li> 
     <li style="border-style:none none none solid;border-left-width:3px;border-left-color:rgb(108,226,108);list-style:decimal outside;line-height:14px;"> <span style="line-height:1.5;border:none;color:#000000;">...   </span></li> 
     <li style="border-style:none none none solid;border-left-width:3px;border-left-color:rgb(108,226,108);list-style:decimal outside;line-height:14px;"> <span style="line-height:1.5;border:none;color:#000000;">jQuery(</span><span class="string" style="line-height:1.5;border:none;color:#0000FF;">"#grid_id"</span><span style="line-height:1.5;border:none;color:#000000;">).jqGrid(</span><span class="string" style="line-height:1.5;border:none;color:#0000FF;">'navGrid'</span><span style="line-height:1.5;border:none;color:#000000;">,</span><span class="string" style="line-height:1.5;border:none;color:#0000FF;">"#pager"</span><span style="line-height:1.5;border:none;color:#000000;">,...).jqGrid(</span><span class="string" style="line-height:1.5;border:none;color:#0000FF;">'navButtonAdd'</span><span style="line-height:1.5;border:none;color:#000000;">,</span><span class="string" style="line-height:1.5;border:none;color:#0000FF;">"#pager"</span><span style="line-height:1.5;border:none;color:#000000;">,{parameters});   </span></li> 
     <li style="border-style:none none none solid;border-left-width:3px;border-left-color:rgb(108,226,108);list-style:decimal outside;line-height:14px;"> <span style="line-height:1.5;border:none;color:#000000;">...   </span></li> 
     <li style="border-style:none none none solid;border-left-width:3px;border-left-color:rgb(108,226,108);list-style:decimal outside;line-height:14px;"> <span style="line-height:1.5;border:none;color:#000000;">

默认参数 

 { 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 

如果设置多个按钮： 

 ...
 jQuery("#grid_id")
 .navGrid('#pager',{edit:false,add:false,del:false,search:false})
 .navButtonAdd('#pager',{
    caption:"Add",
    buttonicon:"ui-icon-add",
    onClickButton: function(){
      alert("Adding Row");
    },
    position:"last"
 })
 .navButtonAdd('#pager',{
    caption:"Del",
    buttonicon:"ui-icon-del",
    onClickButton: function(){
       alert("Deleting Row");
    },
    position:"last"
 });
 ...

按钮间的分隔 

    </span></li> 
     <li style="border-style:none none none solid;border-left-width:3px;border-left-color:rgb(108,226,108);list-style:decimal outside;line-height:14px;"> <span style="line-height:1.5;border:none;color:#000000;">...   </span></li> 
     <li style="border-style:none none none solid;border-left-width:3px;border-left-color:rgb(108,226,108);list-style:decimal outside;line-height:14px;"> <span style="line-height:1.5;border:none;color:#000000;">jQuery(</span><span class="string" style="line-height:1.5;border:none;color:#0000FF;">"#grid_id"</span><span style="line-height:1.5;border:none;color:#000000;">).navGrid(</span><span class="string" style="line-height:1.5;border:none;color:#0000FF;">"#pager"</span><span style="line-height:1.5;border:none;color:#000000;">,...).navButtonAdd(</span><span class="string" style="line-height:1.5;border:none;color:#0000FF;">"#pager"</span><span style="line-height:1.5;border:none;color:#000000;">,{parameters}).navSeparatorAdd(</span><span class="string" style="line-height:1.5;border:none;color:#0000FF;">"#pager"</span><span style="line-height:1.5;border:none;color:#000000;">,{separator_parameters}};   </span></li> 
     <li style="border-style:none none none solid;border-left-width:3px;border-left-color:rgb(108,226,108);list-style:decimal outside;line-height:14px;"> <span style="line-height:1.5;border:none;color:#000000;">...   </span></li> 
     <li style="border-style:none none none solid;border-left-width:3px;border-left-color:rgb(108,226,108);list-style:decimal outside;line-height:14px;"> <span style="line-height:1.5;border:none;color:#000000;">

默认参数： 

 {sepclass : “ui-separator”,sepcontent: ''}

sepclass：ui-jqgrid的属性名 
sepcontent：分隔符的内容