话不多说、直接上代码

JSP页面：

<body>
    <table id="contractDatagrid"></table>
    <!-- datagrid的toolbar -->
    <div id="contractDatagridToolbar">
	<a data-cmd="contractAdd" href="javascript:;" class="easyui-linkbutton c2" data-options="iconCls:'icon-add',plain:true">添加</a>
	<a data-cmd="contractEdit" href="javascript:;" class="easyui-linkbutton c2" data-options="iconCls:'icon-edit',plain:true">修改</a>
	<a data-cmd="contractReload" href="javascript:;" class="easyui-linkbutton c2" data-options="iconCls:'icon-reload',plain:true">刷新</a>
	<a data-cmd="contractRemove" class="easyui-linkbutton c3" data-options="iconCls:'icon-remove',plain:true">删除</a>

	<form id="contractSimpleSearchForm" style="margin: 5px">
	    合同编号:&nbsp;&nbsp;<input name="q" class="easyui-textbox" style="width: 100px"> 
            客户:&nbsp;&nbsp; 
            <select editable=false value="" class="easyui-combobox" style="width: 200px" valueField="id" textField="name" name="customerId.id" data-options="url:'order/loadCustomerTree'"></select>
	    销售人员:&nbsp;&nbsp; <select editable=false value="" class="easyui-combobox" style="width: 200px" valueField="id" textField="realname" name="sellerId.id" data-options="url:'order/loadEmployeeTree'"></select>
	<a data-cmd="contractSearch" href="javascript:;" class="easyui-linkbutton" data-options="iconCls:'icon-search'">搜索</a>
	<a data-cmd="contractReset" class="easyui-linkbutton" data-options="iconCls:'icon-search'">重置</a>
	</form>
    </div>
<body>

把每个按钮的id都换成data-cmd、按钮都用a标签

js页面：

$(function(){
    //在这里面写每个按钮的点击事件
    var cmdObj = {
        //直接用jsp中写的data-cmd中的值
        contractAdd : function() {
            alert("添加")
        }
        contractEdit : function(){
            alert("修改")
        }
        //可以写多个方法.........
    }
    
    //为页面中所有的按钮统一添加点击事件
    $("a").on("click",function(){
	//获取到data-cmd的属性值
	var cmd = $(this).data("cmd");
	if(cmd&&!($(this).hasClass("l-btn-disabled"))){
	    //做事情
	    cmdObj[cmd]();
	}
    });
})

简单好用

easyUI统一管理点击按钮、为所有按钮统一添加分配点击事件

话不多说、直接上代码

JSP页面：

js页面：

猜你喜欢