ACE框架使用总结3-按钮的使用

行按钮的使用

代码如下所示：

function displayBtn(cellValue, options, rowObject) {
		var edit = "";
		<#if fun480002 >
		if(rowObject.operateStatus == 2 || rowObject.operateStatus == 3){
				
		} else{
			edit = "<div  class=\"ui-pg-div ui-inline-edit\" οnmοuseοut=\"jQuery(this).removeClass('ui-state-hover');\" οnmοuseοver=\"jQuery(this).addClass('ui-state-hover');\" οnclick=\"_edit_row("
				+ rowObject.id
				+ ")\" style=\"float:left;cursor:pointer;\" title=\"编辑所选记录\"><span class=\"ui-icon ui-icon-pencil\"></span></div>";
		}
		</#if>
		var view="";
		<#if fun480004 >
	        view ="<div  class=\"ui-pg-div ui-inline-edit\" οnmοuseοut=\"jQuery(this).removeClass('ui-state-hover');\" οnmοuseοver=\"jQuery(this).addClass('ui-state-hover');\" οnclick=\"_view_row("
	               + rowObject.id
	               + ")\" style=\"float:left;cursor:pointer;padding-top:4px;padding-left:5px;\" title=\"查看所选记录\"><span class=\"ace-icon glyphicon glyphicon-search grey\"></span></div>";
			</#if>
	        var del = "";
	        <#if fun480003 >
	        if(rowObject.operateStatus == 2 || rowObject.operateStatus == 3){
				
			} else{
			del = "<div id=\"jDeleteButton_2\" class=\"ui-pg-div ui-inline-del\" οnmοuseοut=\"jQuery(this).removeClass('ui-state-hover');\" οnmοuseοver=\"jQuery(this).addClass('ui-state-hover');\" οnclick=\"_delete_row("
				+ options.rowId
				+ ")\" style=\"float:left;margin-left:5px;\" title=\"删除所选记录\"><span class=\"ui-icon ui-icon-trash\"></span></div>"
			}
		</#if>
			
		return edit +view+ del;
		}

1.其中的displayBtn是在行中用总结中2的formatter显示，显示效果如图所示：  

2.<# if   fun+数字>  </#if> 表示对按钮权限的设置 

2列表按钮的使用

代码如下所示：

jQuery(function($) {
			jQuery(grid_selector).jqGrid('navGrid', pager_selector, { // navbar
		        // options
		        <#if fun480007>
		        edit : true,
		        editicon : 'ace-icon fa fa-pencil blue',
		        editfunc : _editAll_row,
		        <#else>
		        edit : false,
              		editicon : 'ace-icon fa fa-pencil blue',
               		</#if>
			
		        <#if fun480001>
		        add : true,
		        addicon : 'ace-icon fa fa-plus-circle purple',
		        addfunc : _add_row,
		        <#else>
		        add: false,
		        addicon : 'ace-icon fa fa-plus-circle purple',
		        </#if>
		        
			<#if fun480006>
		        del : true,
		        delicon : 'ace-icon fa fa-trash-o red',
		        delfunc : _deleteAll_row, 
		        <#else>
			del : false,
               		delicon : 'ace-icon fa fa-trash-o red',
			</#if>
		        search : false,
		        searchicon : 'ace-icon fa fa-search orange',
		        refresh : true,
		        refreshicon : 'ace-icon fa fa-refresh green',
		        view : false,
		        viewicon : 'ace-icon fa fa-search-plus grey',
		    }, {
		        recreateForm : true,
		        beforeShowForm : function(e) {
		            var form = $(e[0]);
		            form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar')
		                    .wrapInner('<div class="widget-header" />')
		            style_edit_form(form);
		        }
		    }, {
		        closeAfterAdd : true,
		        recreateForm : true,
		        viewPagerButtons : false,
		        beforeShowForm : function(e) {
		            var form = $(e[0]);
		            form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar')
		                    .wrapInner('<div class="widget-header" />')
		            style_edit_form(form);
		        }
		    }).navButtonAdd(pager_selector, {
		        caption : "批量导入",
		        buttonicon : "ace-icon fa fa-tasks red",
		        onClickButton : function() {
		        	$("#uploadfilename").click();
		        }
		    }).navButtonAdd(pager_selector, {
		        caption : "<a class='tiplinks' href='#'>模板下载</a>",
		        onClickButton : function() {
		        	window.location.href="file/template/批量添加车辆信息.xls";
		        },
		        position : "last"
		    });
		});

显示如下所示：

其中上面增加按钮、删除按钮、编辑按钮、查看按钮和刷新按钮jqGrid原有的五个按钮，如果需要新添加按钮需要 navButtons.navButtonAdd这个函数去添加新的按钮。详情请参考点击打开链接