EasyUI應用之 datagrid與menubutton結合
最近在做一個項目，需要使用EasyUI的datagrid將數據顯示出來，並且需要對這些記錄進行各類操作，如：普遍的只讀()，編輯()，刪除()，列印()，加料的簽收()，提交(),接受()，拒絕()等。就這么8項操作就已經占據了8＊60px的珍貴寬度（如圖一所示），如果一行記錄太寬，要用戶拖動滾動條進行操作的話，那么用戶體驗感受一定不好，那么有什么方案可供選擇呢？其中方案之一就是，將這8項操作放在menubutton上，鼠標移到上面才出現下拉菜單進行操作（如圖二所示）。這樣一來節省了位置，二來顯得清晰美觀多了。
好了，廢話不多說，上代碼。
1、前端網頁代碼，設置EasyUI的datagrid：
<tableid="tt"class="easyui-datagrid"style="width:700px;height:500px;font-size:xx-large " url="../JsonData/WebForm1Data.aspx"singleSelect="true"rownumbers="true">
<thead>
<tr>
<th field="action"width="80"align="centor" formatter="InputAction">操作</th>
<thfield="Field1"width="200 "align="centor">Field1</th>
<th field="Field2"width="80"align="centor">Field2</th>
<th field="Field3"width="80"align="centor">Field3</th>
</tr>
</thead>
</table>
重點：formatter="InputAction"使用InputAction函數對［操作］欄位格式化。
2、InputAction Function:
function InputAction(value, row, index) {
return'<a href="javascript:void(0)" id="mb' + index + '" class="easyui-menubutton" menu="#mm3" iconCls="icon-edit" onmouseover="ShowMenu(' + index + ')">'+this.title+'</a>';
}
重點：1、添加的<div>要命名id：id="mb' + index + '"。2、為其加上onmouseover 事件的Function，以便按下菜單時能響應不同列的事件。
3、ShowMenu Function
function ShowMenu(key) {
$('#mm3').menu({
onClick: function (item) {
if (item.id != undefined && eval(item.id) != undefined && $.isFunction(eval(item.id))) {
item.onclick = eval(item.id + "(" + key + ")");
}
}
});
}
4、菜單item響應Click事件Function:
function menuModify(key) {
alert("menuModify");
alert(key);
}
function menuRead(key) {
alert("menuReady");
alert(key);
}
重點：Function名要與menubutton的菜單項id一致
5、前端網頁代碼，設置EasyUI的menubutton菜單項：
<divid="mm3"class="easyui-menu"style="width:120px;">
<div iconCls="icon-save" id="menuModify">編輯</div>
<divid="menuRead">只讀</div>
<divid="Div7">列印</div>
<divid="Div8">刪除</div>
<divclass="menu-sep"></div>
<divid="Div9">簽收</div>
<divid="Div10">提交</div>
<divid="Div11">接受</div>
<divid="Div12">拒絕</div>
</div>
OK，運行效果如圖：
咦？怎么不是menubutton的效果？怎么只是超連接，而且鼠標放上去也沒有反應的？
哦，原來我們忘了在datagrid成功載入數據后對通過InputAction Function加上去的<div>進行一次menubutton效果的生成。代碼如下：
$(function () {
$('#tt').datagrid({
onLoadSuccess: function (data) {
for (i = 0; i < $('#tt').datagrid('getRows').length; i++) {
$('#mb' + i).menubutton();
}
}
});
OK，這樣運行后的效果就如圖二所示的效果一樣了！
總結知識點：
1、［對象］.[事件]＝function(){}:為對象的事件綁定Function，如Function是動態的，則可用eval(FunctionName)。
2、在datagrid成功載入數據后對動態添加的EasyUI控件進行一次相應控件的效果生成。
3、datagrid可通過formatter 屬性來自定義各類超Cool的效果。