easyUI統一管理點選按鈕、為所有按鈕統一新增分配點選事件
阿新 • • 發佈：2018-12-03
話不多說、直接上程式碼
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"> 合同編號: <input name="q" class="easyui-textbox" style="width: 100px"> 客戶: <select editable=false value="" class="easyui-combobox" style="width: 200px" valueField="id" textField="name" name="customerId.id" data-options="url:'order/loadCustomerTree'"></select> 銷售人員: <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](); } }); })
簡單好用